Жирный и курсивный текст в браузере может выглядеть совершенно одинаково, даже если получен разными тегами - разница не видна глазу, а лежит в смысле, который тег передаёт браузеру, поисковику и программам для чтения с экрана. Разберём, какой тег для чего предназначен на самом деле.
Попробуй заменить <strong> на <b>, а <em> на <i> - внешне результат справа не изменится, хотя смысл тегов другой.
Чем <strong> отличается от <b>
<strong> обозначает содержимое, которое действительно важно, серьёзно или срочно - предупреждение, требование, критичный факт. <b> просто привлекает внимание к тексту, не утверждая, что он важнее остального - например, ключевое слово в отзыве или название продукта.
<p><strong>Осторожно:</strong> это действие нельзя отменить.</p> - предупреждение по-настоящему важно.
<p><b>Осторожно:</b> это действие нельзя отменить.</p> - смысл важности теряется: <b> ничего не сообщает поисковику и скринридеру о серьёзности предупреждения.
Чем <em> отличается от <i>
<em> - это акцент, который меняет смысл фразы, если произнести её вслух с ударением на другое слово. <i> - это текст «другим голосом»: иностранные слова, технические термины, названия кораблей или изданий - не потому что на них падает ударение, а потому что они по природе стоят немного особняком от основного текста.
<p>Я <em>не говорил</em>, что это твоя вина.</p> - ударение на «не говорил» меняет смысл: важно именно то, что этого не было сказано.
<p>Я <i>не говорил</i>, что это твоя вина.</p> - <i> не передаёт логическое ударение, для акцента, меняющего смысл, нужен <em>.
Когда использовать тег <mark>
<mark> - ещё один вид выделения, отличный от важности и акцента: он отмечает текст, который имеет значение в конкретном контексте прямо сейчас. Самый частый пример - подсветка слова, совпавшего с поисковым запросом, в результатах поиска по сайту.
<p>Результаты поиска по запросу «кот»: рыжий <mark>кот</mark> спит на подоконнике.</p> - слово выделено не потому, что оно важно само по себе, а потому что совпало с запросом.
<p>Осторожно: это действие <mark>нельзя отменить</mark>.</p> - здесь нужна не контекстная подсветка, а важность - подходит <strong>, а не <mark>.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Использовать <b> для по-настоящему важного предупреждения |
Смысл важности не долетает до поисковика и программы чтения с экрана - визуально текст жирный, а по смыслу «обычный» | Использовать <strong> там, где содержимое действительно важно или срочно |
Использовать <i> там, где акцент меняет смысл фразы |
Логическое ударение не передаётся ни поисковику, ни программе чтения с экрана | Использовать <em>, если акцент важен для смысла произносимой фразы |
Использовать <mark> вместо <strong> для предупреждений |
Подсветка контекстной значимости - не то же самое, что важность содержимого | Выбирать тег по смыслу: <mark> - для контекстной значимости, <strong> - для важности |
Красить текст жёлтым через CSS вместо <mark>, когда речь о совпадении с поиском |
Внешний вид похож, но для поисковика и скринридера такой текст ничем не отличается от обычного | Использовать <mark>, когда подсветка имеет смысловую причину, а не только визуальную |
Шпаргалка
| Термин | Значение |
|---|---|
<strong> | Высокая важность или срочность содержимого |
<b> | Визуальное выделение без указания на важность (ключевые слова, названия) |
<em> | Акцент, меняющий смысл фразы при прочтении вслух |
<i> | Текст «другим голосом» - иностранные слова, термины, названия |
<mark> | Подсветка из-за значимости в конкретном контексте (например, совпадение с поиском) |
Коротко: отвечаем на вопросы
Чем <strong> отличается от <b>, если оба показывают жирный текст?
Визуально - ничем, оба по умолчанию отображаются жирным шрифтом. Разница в смысле: <strong> сообщает браузеру, поисковику и программам для чтения с экрана, что содержимое действительно важно или срочно, а <b> просто привлекает внимание к тексту, не заявляя об особой важности.
Чем <em> отличается от <i>, если оба показывают курсив?
Как и в паре strong/b, разница не во внешнем виде, а в смысле. <em> - это логическое ударение, которое меняет смысл фразы при чтении вслух. <i> - текст «другим голосом»: иностранные слова, технические термины, названия - выделен курсивом по традиции, а не потому что на него падает ударение.
Если <strong> и <em> - это про смысл, а не про внешний вид, почему они всё равно жирные и курсивные по умолчанию?
Браузер должен как-то отобразить эти теги без дополнительного CSS, и жирный текст/курсив - удобный способ визуально показать, что здесь есть смысловое выделение. Но этот внешний вид - только оформление по умолчанию: его можно полностью переопределить через CSS, а смысл тега при этом не изменится.
