Тег strong в HTML

Главная

База знаний

html

Форматирование текста

Тег strong в HTML - полное руководство по семантическому выделению важного текста

26 ноября 2025

Автор

Олег Марков

Введение

Тег strong в HTML используется для выделения текста, который имеет особую важность в контексте страницы. На первый взгляд может казаться, что это просто "жирный текст", но на самом деле тег решает семантическую задачу: он сообщает браузеру, поисковым системам и вспомогательным технологиям (например, экранным читалкам) о том, что этот фрагмент текста действительно важен.

Смотрите, я покажу вам, что тег strong — это не про визуальное оформление, а про смысл. Жирное начертание — это всего лишь стандартный стиль по умолчанию. Настоящая ценность strong в том, что он добавляет смысловую нагрузку: подчеркивает важность, акцентирует внимание и делает контент более доступным и понятным как людям, так и машинам.

В этой статье вы разберетесь:

чем strong отличается от b и других тегов выделения;
как правильно использовать strong в текстах;
как он влияет на доступность и работу экранных читалок;
как его стилизовать с помощью CSS;
каких ошибок лучше избегать.

Теперь давайте перейдем к деталям.

Семантика тега strong

Что означает тег strong с точки зрения HTML

Тег strong — это семантический тег. Это значит, что он описывает не внешний вид текста, а его роль и значимость.

Если говорить простыми словами: strong говорит "этот фрагмент текста особенно важен". Браузеры по умолчанию отображают такой текст жирным шрифтом, но это всего лишь стандартная стилизация, которую легко изменить через CSS.

Официальное описание в HTML спецификации:

strong обозначает фрагмент текста, который имеет высокую степень важности.
Внутри него можно помещать обычный текст и другие строчные элементы (например, a, span, em), а также некоторые блочные элементы, если это допустимо в контексте.

Разница между "важным" и "выделенным" текстом

Важно отличать визуальное выделение от смыслового:

Визуальное выделение — это когда вы хотите просто подчеркнуть глазами: "обратите внимание, это выглядит иначе". Для этого чаще подходят b или CSS-классы.
Семантическое выделение (важность) — когда вы хотите сообщить: "этот текст ключевой, он критичен для понимания или действия".

Тег strong как раз и отвечает за второе. Вы используете его, когда смысл текста усиливается:

предупреждение об опасности;
обязательное условие;
ключевой факт;
важная часть уведомления или инструкции.

Как браузеры и технологии понимают strong

Давайте разберемся, что происходит за кадром:

Браузер добавляет элементу роль "важного текста". Чаще всего он просто делает текст жирным.
Экранные читалки (screen readers) могут менять интонацию, делать паузу или иным образом выделять этот фрагмент при озвучивании.
Поисковые системы могут учитывать такой текст как более значимый для содержания страницы (не как "волшебную SEO-кнопку", а как дополнительный сигнал о важности).

То есть strong — это подсказка не только для глаз, но и для всей экосистемы вокруг HTML.

Синтаксис и базовое использование

Простейший пример

Теперь вы увидите, как это выглядит в коде.

<p>
  Пожалуйста, <strong>не передавайте пароль третьим лицам</strong>.
</p>

Комментарии к примеру:

Здесь мы выделяем часть предложения, которая несет критически важную информацию.
Браузер отобразит текст "не передавайте пароль третьим лицам" жирным шрифтом.
Экранная читалка подчеркнет важность этой части фразы при озвучивании.

Вложенность и допустимое содержимое

Внутри strong можно использовать:

обычный текст;
строчные элементы (em, a, span, code и т. д.);
в некоторых случаях — другие strong или em, но с осторожностью.

Пример с вложенными тегами:

<p>
  Для входа используйте <strong>только официальный сайт 
    <a href="https://example.com">example.com</a>
  </strong>.
</p>

// Здесь мы выделяем важность условия и одновременно даем ссылку на сайт

Такой вариант допустим и часто встречается в реальных проектах.

Можно ли вкладывать strong в strong

Формально это возможно, но редко оправдано с точки зрения смысла. Скорее всего, если вам хочется так сделать, вы:

либо построили фразу неудачно;
либо пытаетесь визуально "сделать еще жирнее", что уже задача CSS, а не HTML.

Давайте разберемся на примере.

Нежелательный вариант:

<p>
  <strong>Очень <strong>важное</strong> сообщение</strong>.
</p>

// Вложенный strong не добавляет новой семантики – важность уже есть у всей фразы

Лучше переписать фразу или использовать один уровень выделения.

Когда использовать strong, а когда нет

Типичные кейсы для использования strong

Смотрите, я покажу вам распространенные ситуации, где strong действительно оправдан.

Предупреждения и критические сообщения:

<p>
  <strong>Внимание</strong> - перед обновлением сделайте резервную копию базы данных.
</p>

// Здесь "Внимание" несет важное предупреждение, поэтому strong оправдан

Ключевая часть инструкции:

<p>
  Перед отправкой формы <strong>обязательно проверьте адрес электронной почты</strong>.
</p>

// Мы подчеркиваем обязательность действия

Важные юридические или финансовые условия:

<p>
  <strong>Оплата не подлежит возврату</strong> после активации подписки.
</p>

// Важно, чтобы пользователь точно не пропустил это условие

Итоговые выводы в тексте:

<p>
  <strong>Основной вывод</strong> - используйте strong только для действительно важного текста.
</p>

Когда лучше использовать b, а не strong

Тег b не несет семантического значения "важность". Он просто визуально выделяет текст.

Можно использовать b, когда:

вы подчеркиваете термин в определении, но не хотите делать акцент на важности;
вы стилизуете элементы интерфейса чисто визуально;
вы повторяете структуру оформления документа (например, воссоздаете внешний вид печатного текста).

Пример:

<p>
  Термин <b>клиент</b> означает лицо, использующее услуги сервиса.
</p>

// Мы выделяем термин визуально, но не делаем акцент на его "большей важности" по смыслу

Если текст действительно важен — выбирайте strong. Если это просто визуальное выделение без "усиления смысла" — b или CSS-класс.

Strong и em: в чем разница

em обозначает логическое или эмоциональное выделение, "акцент" в речи. Strong — важность, "значимость" текста.

Смотрите сравнение на примере:

<p>
  Я <em>очень</em> надеюсь, что вы сохраните резервную копию.
</p>

<p>
  Я надеюсь, что вы <strong>сохраните резервную копию</strong>.
</p>

// В первом случае мы усиливаем слово "очень" // Во втором — подчеркиваем важность самого действия "сохраните резервную копию"

Иногда их комбинируют, но с этим стоит быть аккуратнее, чтобы не перегружать текст.

Strong и доступность (a11y)

Как экранные читалки озвучивают strong

Экранные читалки могут:

менять интонацию;
делать паузу;
иногда произносить специальные маркеры (в зависимости от настроек пользователя).

То есть пользователи, которые слушают страницу, а не читают ее глазами, получают дополнительную информацию о важности фрагментов.

Это особенно полезно:

в системных сообщениях;
в формах с ошибками;
в критичных инструкциях.

Правильное использование strong для доступности

Давайте посмотрим, как правильно применить strong в форме с ошибками.

<p role="alert">
  <strong>Ошибка</strong> - адрес электронной почты указан неверно.
</p>

// role="alert" сообщает читалке, что это важное сообщение // strong выделяет ключевое слово "Ошибка" как особо важное

Здесь strong помогает сделать сообщение понятнее и заметнее, а роль alert — сообщает, что это срочное уведомление.

Еще пример — важное уточнение в инструкции:

<p>
  При смене пароля <strong>не используйте старый пароль</strong>.
</p>

// Экранная читалка выделит важную часть фразы, что снижает риск ошибки пользователя

Ошибки, которые мешают доступности

Выделение всего текста на странице strong:

<main>
  <strong>
    ...весь основной контент страницы...
  </strong>
</main>

// Для пользователя с читалкой почти все будет "очень важным", теряется смысл акцентов

Использование strong только для визуального эффекта без реальной важности:

<p>
  Добро пожаловать в наш <strong>замечательный</strong> сервис.
</p>

// Здесь слово "замечательный" не несет критической информации // Для доступности это "шумовой" акцент

Лучше использовать strong там, где без этого акцента пользователь может неправильно понять или пропустить важный смысл.

Влияние strong на SEO

Учитывают ли поисковые системы strong

Поисковые системы видят тег strong как дополнительный сигнал: "этот фрагмент текста важен". Но это не магический усилитель ранжирования.

Как это обычно интерпретируется:

текст в strong чуть более значим для понимания темы страницы;
это помогает поисковику лучше определить ключевые части содержания;
при разумном использовании это может немного улучшить "понятность" страницы.

Но если вы начнете оборачивать в strong все подряд или каждое упоминание ключевого слова, это, наоборот, может выглядеть как спам.

Стилизация strong с помощью CSS

Изменение стандартного вида strong

По умолчанию текст в strong отображается жирным шрифтом. Но вы можете изменить это поведение.

Давайте разберемся на примере.

strong {
  font-weight: 600;      /* Делаем полужирным, но не максимально */
  color: #d32f2f;        /* Красный цвет для акцента */
}

// Здесь мы настраиваем внешний вид всех элементов strong на странице

HTML:

<p>
  <strong>Важно</strong> - перед продолжением сохраните ваши данные.
</p>

// Теперь слово "Важно" отобразится красным полужирным шрифтом

Использование классов вместо переопределения всех strong

Иногда вам нужно кастомное оформление только для части strong, а не для всех.

Тогда можно использовать классы:

<p>
  <strong class="warning">Внимание</strong> - файл будет удален без возможности восстановления.
</p>

// Здесь мы выделяем сильное важное предупреждение

CSS:

strong.warning {
  color: #b71c1c;        /* Тёмно-красный цвет */
  background-color: #ffebee; /* Светлый фон для акцента */
  padding: 2px 4px;      /* Небольшие отступы */
  border-radius: 2px;    /* Слегка скругляем углы */
}

// Так оформление предупреждения становится более заметным

Отмена жирного начертания у strong

Иногда по дизайну важно, чтобы strong не был жирным, но при этом сохранял семантику важности.

strong {
  font-weight: normal;   /* Убираем жирность */
  text-decoration: underline; /* Подчеркивание вместо жирного шрифта */
}

// Семантика тега сохраняется, но визуально он выделяется по-другому

Это хороший пример, почему важно не путать теги (семантика) и визуальные стили (CSS).

Практические примеры использования strong в интерфейсах

Системные уведомления и ошибки

Покажу вам, как это реализовано на практике в интерфейсах уведомлений.

<div class="alert alert-error" role="alert">
  <p>
    <strong>Ошибка</strong> - не удалось сохранить изменения. Повторите попытку позже.
  </p>
</div>

// strong выделяет ключевое слово // role="alert" сообщает о срочности // класс alert-error отвечает за внешний вид блока

Такое сочетание делает сообщение понятным и заметным как визуально, так и для вспомогательных технологий.

Подсказки и хинты в формах

<label for="password">Пароль</label>
<p class="hint">
  <strong>Минимум 8 символов</strong> - используйте буквы и цифры.
</p>
<input type="password" id="password">

// Мы выделяем "Минимум 8 символов" как важное техническое требование

Здесь strong помогает пользователю не пропустить критическое условие.

Подтверждение действий

<p>
  Вы собираетесь <strong>безвозвратно удалить</strong> выбранные файлы.
</p>
<p>
  Это действие <strong>нельзя отменить</strong>.
</p>

// Важные последствия действия выделены отдельно // Такое оформление снижает риск случайных ошибок

Частые ошибки при использовании strong

Перегрузка страницы сильными акцентами

Если вы выделите strong каждые второе-третье предложение, важность перестанет ощущаться. Акцент работает только тогда, когда он используется выборочно.

Нежелательный пример:

<p>
  <strong>Наш сервис лучший</strong> на рынке. 
  <strong>Вы экономите время</strong> и деньги. 
  <strong>Никаких сложных настроек</strong>.
</p>

// Здесь все фразы "кричат", пользователь перестает различать степень важности

Лучше оставить один-два действительно важных акцента и переработать текст.

Использование strong вместо заголовков

Иногда разработчики пытаются "сделать текст крупнее и жирным" с помощью strong, а не заголовков h1–h6.

Неправильно:

<strong>Настройки профиля</strong>
<p>Здесь вы можете изменить свои персональные данные.</p>

// Визуально это может быть заголовок, но семантически — обычный текст

Правильнее:

<h2>Настройки профиля</h2>
<p>Здесь вы можете изменить свои персональные данные.</p>

// Здесь заголовок структурирует документ, что полезно и для SEO, и для доступности

Тег strong — не замена заголовкам. Он не участвует в структуре документа, он лишь подчеркивает важность фрагментов текста.

Использование strong для декоративного оформления

Когда вы хотите добиться только красивого оформления, лучше использовать span с классом и CSS.

Неправильно:

<p>
  Добро пожаловать в <strong>наш сервис</strong>.
</p>

// Если важности в словах "наш сервис" нет, strong здесь неуместен

Лучше так:

<p>
  Добро пожаловать в <span class="brand-name">наш сервис</span>.
</p>

.brand-name {
  font-weight: 600;   /* Чуть более жирный шрифт */
  color: #1976d2;     /* Брендовый цвет */
}

// Здесь мы разделяем смысл (текст) и оформление (CSS)

Strong в сочетании с другими тегами

Strong внутри ссылок и наоборот

Давайте посмотрим, что происходит в таком примере.

<p>
  Подробнее читайте в разделе 
  <a href="/docs/security">
    <strong>Безопасность и конфиденциальность</strong>
  </a>.
</p>

// Здесь вся ссылка является важной, поэтому текст ссылки обернут в strong

Это допустимо и логично, если вы хотите подчеркнуть важность самого раздела.

Обратная ситуация:

<p>
  Ознакомьтесь с <a href="/terms">условиями использования</a>, 
  особенно с разделом <strong>"Оплата и возвраты"</strong>.
</p>

// Здесь ссылка не является особо важной, но конкретный текстовый фрагмент "Оплата и возвраты" важен по смыслу

Strong внутри заголовков

Иногда внутри заголовка нужно выделить особенно важное слово или фразу.

<h2>
  Как <strong>безопасно</strong> хранить пароли
</h2>

// Заголовок описывает тему, а strong усиливает акцент на слове "безопасно"

Такой прием уместен, но им не стоит злоупотреблять. Если каждый заголовок будет с strong, эффект потеряется.

Комбинация strong и em

Иногда вам нужно одновременно подчеркнуть важность и акцентировать интонацию. Например:

<p>
  <strong><em>Никогда</em> не передавайте свои пароли по электронной почте.</strong>
</p>

// em акцентирует слово "Никогда" // strong делает все предложение особо важным

Используйте такую комбинацию осознанно и редко, чтобы не перегружать текст.

Лучшие практики использования strong

Руководство по принятию решения: нужен ли здесь strong

Давайте сформулируем простой "чек-лист". Задайте себе вопросы:

Если пользователь пропустит этот текст, он:
- может сделать критическую ошибку?
- может не понять основную суть?
- может нарушить правила, что приведет к проблемам?
Этот фрагмент:
- формулирует ключевое требование?
- описывает важное последствие?
- подводит важный итог?

Если хотя бы на один вопрос ответ "да" — strong здесь, скорее всего, оправдан.

Если же текст:

просто маркетинговый;
чисто декоративный;
не меняет понимание сути при пропуске —

скорее всего, strong не нужен.

Консистентность по всему проекту

Полезно договориться внутри команды, как именно использовать strong:

фиксировать правила в гайдлайнах по верстке;
приводить примеры "до/после" из реальных интерфейсов;
следить за единообразием в похожих блоках (например, все важные предупреждения пишутся по одному паттерну).

Это делает интерфейс более предсказуемым и для пользователей, и для разработчиков.

Разделение задач: HTML для смысла, CSS для вида

Хорошая практика:

использовать strong только там, где нужно подчеркнуть важность;
все остальные визуальные эффекты (цвета, шрифты, фоны) выносить в CSS через классы;
не превращать strong в "универсальный инструмент сделать текст жирным".

Так код становится чище, а страница — более понятной и доступной.

Частозадаваемые технические вопросы по теме и ответы

Как сделать так, чтобы strong не был жирным, но сохранял семантику важности?

Используйте CSS, чтобы изменить визуальный стиль, при этом тег strong оставьте на месте:

strong {
  font-weight: normal;       // Убираем жирность
  text-decoration: underline; // Можно добавить подчеркивание
}

// Семантика тега сохраняется, экранные читалки по-прежнему видят важный текст

Можно ли использовать strong внутри кнопок button?

Да, это допустимо, если часть текста действительно более важна:

<button type="submit">
  <strong>Удалить</strong> навсегда
</button>

// Здесь акцент на слове "Удалить" подчеркивает серьёзность действия

Следите, чтобы в таких кнопках не было избыточного количества акцентов.

Влияет ли strong на вес шрифта, если шрифт не поддерживает bold?

Если выбранный шрифт не имеет жирного начертания, браузер может:

сымитировать жирность (утолщением обводки);
или проигнорировать font-weight.

В любом случае семантика strong сохраняется. Если важно визуально подчеркнуть акцент, лучше выбрать шрифт с нужным набором начертаний.

Можно ли использовать strong внутри списка li для обозначения ключевого слова пункта?

Да, это распространенный и логичный прием:

<ul>
  <li><strong>Логин</strong> - адрес электронной почты пользователя</li>
  <li><strong>Пароль</strong> - секретная комбинация символов</li>
</ul>

// Здесь ключевое слово пункта действительно важнее остального текста описания

Главное — не оборачивать в strong весь текст пункта без необходимости.

Как тестировать, что strong корректно воспринимается экранными читалками?

Мини-инструкция:

Установите экранную читалку (например, NVDA на Windows или VoiceOver на macOS).
Откройте страницу в браузере.
Включите читалку и перемещайтесь по тексту с помощью клавиатуры.
Слушайте, как озвучиваются фрагменты с strong — обычно слышна интонационная разница или пауза.
Попробуйте убрать strong в коде и повторить тест — сравните восприятие.

Так вы убедитесь, что акценты действительно помогают воспринимать текст, а не мешают.

Тег параграфа p в HTML