HTML: Начертание текста
Любой текст содержит ключевые части, которые хочется донести до читателя. Это могут быть определения, подсказки, ключевая мысль. Если текста очень много, то такие части могут потеряться или вовсе не быть обнаруженными. Как помочь браузеру и пользователю быстро найти такие части на странице? В HTML-разметке для этих целей можно использовать жирное и курсивное начертание.
Жирное начертание
Для выделения текста жирным используется один из двух парных тегов: <b> или <strong>:
<p>Code Basics — programming <b>courses</b>.</p>
<p>HTML — <strong>Hypertext Markup Language</strong></p>
Оба примера иллюстрируют добавление жирного начертания к участку текста. Но почему для визуально одинаковых результатов использовалось два разных тега? Дело в семантике, то есть смысловом значении. В данном случае смысловом значении тега:
<b>— простое выделение текста. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт<strong>— логическое выделение важного участка текста. Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд
Когда-то разработчики хотели, чтобы эти теги выглядели по разному и отличались с точки зрения поведения для браузера, но история пошла по чуть иному пути. Сейчас считается, что использование <b> избыточно и для визуального выделения нужно использовать CSS, а для важных участков <strong>
Курсивное выделение
По своему смыслу курсивное выделение очень похоже на жирное, но им выделяется не ключевая часть, а ставится акцент. Например:
<p><i>Code Basics</i> — programming <em>free</em> courses</p>
В этом примере были размечены две части текста:
- Тегом
<i>было размечено название портала Code Basics. Тег предназначен для визуального выделение текста курсивом и не несёт смысловой нагрузки - Тегом
<em>была выделена фраза «бесплатные курсы». Это логический акцент на бесплатности курсов, который был придан предложению. Курсов много, а бесплатных нет, поэтому стоит добавить акцент на эту часть предложения
Задание
Добавьте в редактор фразу
Hexlet - hands-on programming coursesв которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф
Полезное
Теги для визуального выделения короче, чем для смыслового. Это поможет запомнить, когда использовать
<i>и<b>, а когда<em>и<strong>В практике вместо
<i>и<b>используют стилизацию с помощью CSS
HTML: Начертание текста
Любой текст содержит ключевые части, которые хочется донести до читателя. Это могут быть определения, подсказки, ключевая мысль. Если текста очень много, то такие части могут потеряться или вовсе не быть обнаруженными. Как помочь браузеру и пользователю быстро найти такие части на странице? В HTML-разметке для этих целей можно использовать жирное и курсивное начертание.
Жирное начертание
Для выделения текста жирным используется один из двух парных тегов: <b> или <strong>:
<p>Code Basics — programming <b>courses</b>.</p>
<p>HTML — <strong>Hypertext Markup Language</strong></p>
Оба примера иллюстрируют добавление жирного начертания к участку текста. Но почему для визуально одинаковых результатов использовалось два разных тега? Дело в семантике, то есть смысловом значении. В данном случае смысловом значении тега:
<b>— простое выделение текста. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт<strong>— логическое выделение важного участка текста. Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд
Когда-то разработчики хотели, чтобы эти теги выглядели по разному и отличались с точки зрения поведения для браузера, но история пошла по чуть иному пути. Сейчас считается, что использование <b> избыточно и для визуального выделения нужно использовать CSS, а для важных участков <strong>
Курсивное выделение
По своему смыслу курсивное выделение очень похоже на жирное, но им выделяется не ключевая часть, а ставится акцент. Например:
<p><i>Code Basics</i> — programming <em>free</em> courses</p>
В этом примере были размечены две части текста:
- Тегом
<i>было размечено название портала Code Basics. Тег предназначен для визуального выделение текста курсивом и не несёт смысловой нагрузки - Тегом
<em>была выделена фраза «бесплатные курсы». Это логический акцент на бесплатности курсов, который был придан предложению. Курсов много, а бесплатных нет, поэтому стоит добавить акцент на эту часть предложения
Задание
Добавьте в редактор фразу
Hexlet - hands-on programming coursesв которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф
Полезное
Теги для визуального выделения короче, чем для смыслового. Это поможет запомнить, когда использовать
<i>и<b>, а когда<em>и<strong>В практике вместо
<i>и<b>используют стилизацию с помощью CSS
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const b = query(document, 'p > b', HTMLElement);
expect(b).to.have.text('courses');
const em = query(document, 'p > em', HTMLElement);
expect(em).to.have.text('programming');
});Решение учителя откроется через:
20:00
