Форматирование текста
Учимся выделять важное в тексте так, чтобы это понимали и люди, и машины.
В HTML выделение несёт смысл, а не только внешний вид:
<strong>— это «важно», а не просто «жирным».
strong — важное
Тег <strong> помечает текст как важный. Браузер по умолчанию делает его жирным, но смысл глубже: программа чтения с экрана может произнести такой текст с нажимом.
<p><strong>Внимание!</strong> Перед стиркой проверьте карманы.</p>em — акцент
Тег <em> (от emphasis) делает смысловой акцент — то слово, на которое в речи падает ударение. По умолчанию отображается курсивом:
<p>Я <em>правда</em> хочу это сделать.</p>Сравните: «Я правда хочу» и «Я правда хочу» — акцент меняет смысл фразы. Именно это и передаёт em.
Семантика важнее вида
Есть похожие на вид теги <b> (просто жирный) и <i> (просто курсив). Они меняют только внешность и не несут смысла. По возможности предпочитайте осмысленные <strong> и <em> — они понятнее и людям, и поисковикам, и программам доступности.
mark — выделение маркером
Тег <mark> подсвечивает текст, как будто вы провели по нему жёлтым маркером. Полезно, чтобы выделить найденное или особо значимое:
<p>В отчёте важна <mark>итоговая сумма</mark> за квартал.</p>Типичный сценарий — подсветка совпадений в результатах поиска: вы ищете слово, и сайт выделяет его <mark> в найденных абзацах. Это не «важность» и не «акцент», а именно визуальная пометка «обрати сюда внимание».
small — мелкий, второстепенный текст
Тег <small> для примечаний, копирайтов и мелкого шрифта — оговорок, которые читают «между строк»:
<p>Цена 990 рублей. <small>Без учёта доставки.</small></p>Памятка
| Тег | Смысл | Вид по умолчанию |
<strong> | важное | жирный |
<em> | смысловой акцент | курсив |
<mark> | выделено маркером | жёлтый фон |
<small> | второстепенное, оговорка | мелкий шрифт |
Вид — это не задача HTML
Здесь кроется важная мысль обо всём HTML. Да, браузер по умолчанию рисует <strong> жирным, а <em> курсивом — но это всего лишь стиль по умолчанию. Через CSS его можно изменить: сделать <strong> красным, а <em> — подчёркнутым. Смысл тега при этом не меняется.
Поэтому выбирайте тег не по тому, «как он выглядит», а по тому, «что он значит». Нужно показать важность — берите <strong>, даже если внешний вид потом поменяете. Этот принцип — «HTML отвечает за смысл, CSS за вид» — будет с вами на протяжении всей карьеры веб-разработчика. Лучше усвоить его на простых тегах прямо сейчас.
Итог
<strong>— важное,<em>— смысловой акцент; они несут смысл, а не только вид.<mark>подсвечивает,<small>помечает второстепенное.- Семантичные теги предпочтительнее чисто визуальных
<b>и<i>.
