Тег strong отмечает в тексте фрагмент, который важен, серьёзен или срочен: предупреждение, условие, факт, который нельзя пропустить. Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Жирным браузер его выводит по умолчанию, но жирность здесь следствие, а не цель: если нужен один лишь вид, для этого есть CSS.
<p>Перед началом работы <strong>отключите питание</strong>.</p>В этой статье
Для чего нужен тег strong в HTML
Стандарт описывает три случая, когда фрагмент стоит отметить этим тегом: он важен, серьёзен или срочен. Важным бывает название в заголовке главы, серьёзным - предупреждение об опасности, срочным - пункт списка, который нельзя откладывать.
<h1>Глава 1: <strong>Практика</strong></h1>
<p><strong>Осторожно:</strong> ступени скользкие.</p>
<ul>
<li><strong>Выключить духовку.</strong></li>
<li>Вынести мусор.</li>
</ul>Во всех трёх случаях выделение говорит читателю одно: этот фрагмент лучше не пропускать. Смысл самого предложения при этом не меняется, и именно так стандарт отличает strong от em: тот меняет смысл предложения интонацией, а этот только показывает значимость фрагмента.
Пример: отметьте в инструкции то, что нельзя пропустить
Нажимайте на предложения прямо в тексте: отмеченное становится жирным, а вокруг него появляются теги strong. Под текстом разбор того, что вы отметили.
Когда отмечено почти всё, тег теряет главное свойство: выделение работает только на фоне текста, который остался без него. Поэтому на практике strong прописывают одному-двум фрагментам в абзаце, не больше.
Тег strong или b: как выбрать
Оба тега выводятся жирным, поэтому на экране их не различить. Разница в том, что вы сообщаете читателю и программам, которые разбирают страницу.
Помогает проверочный вопрос: пострадает ли читатель, если пропустит этот фрагмент? Если да, это важность или срочность, и нужен strong. Если фрагмент просто должен бросаться в глаза, как название товара в обзоре или ключевое слово в аннотации, подойдёт b. Разбор с нуля есть в уроке курса: Чем strong отличается от b .
| Признак | strong | b |
|---|---|---|
| Что сообщает | Фрагмент важен, серьёзен или срочен | Фрагмент нужно выделить взглядом, важности нет |
| Пример | Предупреждение, условие, критичный факт | Название товара в обзоре, ключевое слово в аннотации |
| Вид по умолчанию | Жирный | Жирный |
| Роль в структуре доступности (Chromium 141) | strong | Отдельной роли нет |
| Вложенность | Каждый уровень повышает важность | Смысла не имеет |
Как выглядит strong и почему он не всегда жирный
Сначала о числах, которые встретятся ниже. В CSS толщина шрифта задаётся числом от 100 до 900 в свойстве font-weight. Чем число больше, тем текст жирнее: 100-300 - тонкий, лёгкий шрифт, 400 - обычный текст, 700 - то, что мы привыкли называть жирным, 900 - самый жирный.
Браузер задаёт тегу strong значение font-weight: bolder, то есть «жирнее, чем у окружающего текста». Он смотрит, какой вес у родителя, и поднимает его на ступень:
| Вес окружающего текста | Вес strong | Что получится |
|---|---|---|
| 100-300, тонкий | 400 | Обычный текст: тег есть, а жирности нет |
| 400-500, обычный | 700 | Привычный жирный шрифт |
| 600-900, уже жирный | 900 | Самый жирный, если у шрифта есть такое начертание, иначе выглядит как 700 |
Пример: какой вес получает strong в четырёх случаях
В каждом случае показаны два числа: вес окружающего текста и вес strong. На шкале серая точка - окружающий текст, оранжевая - strong. Числа вычислены скриптом, а заметна ли разница глазом, зависит от начертаний шрифта.
Отсюда три случая, когда жирности нет. Первый - тонкий родитель, как во втором случае: тег поднимает вес только до 400, а это обычный текст. Второй - CSS-сброс, как в четвёртом: для strong прописано font-weight: normal или inherit, смысловая разметка остаётся, а вида нет. Третий - заголовок, как в третьем случае: он и без того жирный, поэтому strong внутри различим только там, где у шрифта есть начертание 900.
Внешний вид тега меняют обычным правилом:
strong {
font-weight: 600;
color: #b3261e;
}Если жирность нужна без смысла важности, её задают классом или правилом для нужного элемента, а тег strong для этого не берут.
Вложенный strong: уровни важности
Стандарт считает важность относительной: чем больше у фрагмента предков strong, тем он важнее. Так в одном абзаце получаются уровни.
<p>
<strong>Осторожно.</strong> В комнате идёт ремонт.
<strong><strong>Не включайте свет</strong>, пока не проверена проводка.</strong>
</p>Фраза «Не включайте свет» находится внутри двух тегов strong и потому важнее, чем «пока не проверена проводка», у которой тег один.
Пример: уровень и вес каждого фрагмента
В таблице для каждого фрагмента посчитан уровень вложенности и вес. Кнопка красит фрагмент второго уровня, чтобы разницу было видно.
Глазом уровни различить сложно: вес 900 виден только там, где у шрифта есть такое начертание. Если различие нужно читателю, его задают стилем для вложенного тега:
strong strong {
color: #b3261e;
}Где можно использовать strong: абзац, заголовок, ссылка, список
strong - строчный элемент: он не начинает новую строку и подстраивается под окружающий текст. Его прописывают внутри абзаца (p), пункта списка, ячейки таблицы, ссылки и заголовка.
<p>Срок оплаты - <strong>до пятницы</strong>.</p>
<li>Ключ хранится <strong>только у администратора</strong></li>
<a href="/tarify">Смотреть <strong>новые</strong> тарифы</a>Внутри допустим только строчный контент: другой strong, em, ссылка, код. Обернуть сразу несколько абзацев нельзя, поэтому тег прописывают внутри каждого из них.
В заголовке (h1) strong обычно лишний: заголовок и так важнее окружающего текста и уже выводится жирным. Исключение - когда часть заголовка отделяется от остальной, как название в «Глава 1: Практика».
Читают ли strong программы чтения с экрана
Браузеры передают strong вспомогательным технологиям: в Chromium 141 элемент попадает в структуру доступности с ролью strong, мы проверили это на пустой странице. Но то, что элемент виден программе чтения с экрана, не значит, что она его озвучит.
NVDA по умолчанию читает текст внутри strong ровным голосом и о выделении не сообщает. Если включить в настройках атрибуты шрифта, текст будет назван жирным, а не важным. Запрос на озвучивание strong в трекере NVDA на сентябрь 2024 года оставался открытым, актуальный статус мы не проверяли. Как ведут себя JAWS и VoiceOver, мы не проверяли вовсе, поэтому утверждать не будем.
Отсюда практический вывод: предупреждение должно быть понятно и без выделения. Слова «Внимание» или «Важно» в самом тексте работают для всех читателей, а strong остаётся дополнительным сигналом.
Частые ошибки
Ошибки с этим тегом сводятся к двум крайностям: его прописывают ради одной жирности или выделяют им слишком много.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
strong вместо CSS, ради жирности | Тексту приписана важность, которой у него нет | Задать вес через font-weight |
| Выделены несколько фраз подряд или почти весь абзац | Важное перестаёт отличаться от остального | Оставить тег одному-двум ключевым фрагментам |
| Жирная строка вместо заголовка | В структуре документа раздела нет | Использовать заголовок, например h2 |
Неверный порядок закрытия: <strong><em>текст</strong></em> | Разметка невалидна | Закрывать теги в обратном порядке |
| Важное сказано только выделением | Читатель с NVDA не узнает о срочности | Продублировать словом в тексте: «Внимание», «Важно» |
