HTML тег <strong>
Тег HTML <strong> обозначает текст с высокой важностью, серьёзностью или срочностью. Значение, доступность, примеры и <b> vs <em>.
Тег HTML <strong> отмечает текст как обладающий высокой важностью, серьёзностью или срочностью. В этом его ключевая задача: он несёт смысл, а не просто задаёт внешний вид. Браузеры по умолчанию отображают содержимое <strong> полужирным шрифтом, но жирность — лишь побочный эффект. Настоящая ценность тега в том, что вы сообщаете браузерам, поисковым системам и вспомогательным технологиям: этот текст важнее окружающего содержимого.
На этой странице объясняется, что означает <strong>, чем он отличается от полужирного стиля и похожих тегов <b> и <em>, как его воспринимают экранные дикторы и SEO, а также как правильно его использовать — с рабочими примерами.
Почему стоит использовать <strong> вместо полужирного стиля?
Полезно разграничить два разных понятия:
- Визуальный вес — текст, который просто выглядит жирным. Это достигается с помощью CSS
font-weight: boldили тега<b>. Изменяется только внешний вид, смысл не добавляется. - Важность — текст, который является более важным по сравнению с окружением. Именно это представляет
<strong>. Полужирное начертание — это стандартное отображение этой важности, но вы можете изменить его через CSS, и смысл при этом останется.
Используйте <strong>, когда акцент является частью смысла контента — предупреждение, дедлайн, критическая инструкция. Используйте полужирный стиль (CSS или <b>), когда хотите просто выделить слова визуально — например, название продукта или ключевое слово для удобства сканирования.
В HTML4 тег <strong> означал более сильное ударение, а HTML5 переопределил его как обозначение высокой важности содержимого. Вы также можете вкладывать <strong> внутрь <strong>, чтобы повысить относительную важность фразы.
Если вы хотите выделить текст жирным чисто для оформления — без дополнительной смысловой нагрузки — используйте тег <b> или свойство CSS font-weight вместо <strong>.
<strong> vs <b> vs <em>
Все три тега изменяют внешний вид текста, но несут разный смысл. Правильный выбор делает разметку семантической.
| Тег | Отображение по умолчанию | Значение | Когда использовать |
|---|---|---|---|
<strong> | Жирный | Высокая важность, серьёзность, срочность | Предупреждения, дедлайны, критические инструкции |
<b> | Жирный | Без дополнительной важности — стилистическое выделение | Ключевые слова, названия продуктов, вводное предложение |
<em> | Курсив | Смысловое ударение, меняющее произносимый смысл | Слова, которые вы произнесли бы с голосовым акцентом |
Простой способ запомнить: <strong> означает «это важно», <em> означает «скажи это иначе», а <b> означает «просто сделай жирным». Для выделения (а не обозначения важности) текста смотрите тег <mark>.
Доступность и SEO
Реальные преимущества <strong> — это семантика и поиск:
- Поисковые системы могут использовать разметку как сигнал того, что обёрнутый текст значимее остального содержимого страницы, что помогает описать тематику страницы.
- Вспомогательные технологии получают информацию о важности как часть структуры документа. Большинство популярных экранных дикторов по умолчанию не меняют голос автоматически для
<strong>, однако важность всё равно передаётся, и пользователи могут настроить программу для её объявления.
Иными словами, не используйте <strong> ради голосового выделения — используйте его потому, что текст действительно важнее. На смысл опираются инструменты; жирный вид — лишь отображение по умолчанию.
Синтаксис
Тег <strong> используется парно. Содержимое записывается между открывающим (<strong>) и закрывающим (</strong>) тегами. Забыть закрывающий </strong> — распространённая ошибка: без него весь последующий текст может быть помечен как важный.
Пример тега HTML <strong>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We’ve used the <strong>strong</strong> tag to highlight this important part of the text.</p>
</body>
</html>Результат
Пример: срочность и предупреждения
Естественный способ применения <strong> — выделить то, что читатель не должен пропустить:
<!DOCTYPE html>
<html>
<body>
<p><strong>Warning:</strong> this action permanently deletes your account.</p>
<p>Submit the form before <strong>5:00 PM on Friday</strong> — late entries are not accepted.</p>
</body>
</html>Атрибуты
Тег <strong> поддерживает глобальные атрибуты и атрибуты событий. Например, вы можете добавить класс для нестандартного стиля:
<strong class="warning">Important notice</strong>