Смысловое выделение текста
В HTML есть теги, которые не меняют внешний вид (или меняют, но это не главное), а придают тексту смысловую нагрузку. Они помогают браузеру, поисковым системам и вспомогательным технологиям понять, что именно важно в тексте, что изменено, а что добавлено позже.
1. Сильное выделение — <strong>
Тег <strong> обозначает очень важный текст. Он влияет на смысл. По умолчанию браузер показывает его жирным шрифтом.
<p><strong>Внимание!</strong> Обновление выйдет завтра.</p>Как это выглядит в браузере:
Внимание! Обновление выйдет завтра.
<strong> — про смысл. <b> — просто жирный текст без смысла. Старайтесь использовать <strong> везде, где текст действительно важен.
2. Логическое выделение — <em>
Тег <em> (emphasis) придаёт тексту логическое ударение. Браузер по умолчанию отображает его курсивом.
<p>Я <em>не говорил</em>, что приду. (А может, и говорил)</p>Как это выглядит в браузере:
Я не говорил, что приду. (А может, и говорил)
<em> — про ударение. <i> — просто курсив без смысла. Выбирайте <em>, если нужно изменить интонацию прочтения.
3. Выделение цветом — <mark>
Тег <mark> показывает текст, который выделен для справки (как маркером в книге). Браузер по умолчанию делает жёлтый фон.
<p>Сегодня мы изучим <mark>семантику</mark> — один из важнейших разделов.</p>Как это выглядит в браузере:
Сегодня мы изучим семантику — один из важнейших разделов.
<mark> не используется для постоянного оформления. Он показывает релевантный фрагмент (например, найденное слово в поиске).
4. Мелкий текст — <small>
Тег <small> обозначает мелкий текст. В нём обычно пишут примечания, лицензии, авторские права. Браузер уменьшает размер шрифта.
<p>Материал распространяется свободно. <small>© 2026</small></p>Как это выглядит в браузере:
Материал распространяется свободно. © 2026
5. Удалённый текст — <del>
Тег <del> показывает текст, который был удалён из документа (например, в новой версии). Браузер зачёркивает его.
<p>Старая цена: <del>1000 рублей</del> Новая цена: 800 рублей</p>Как это выглядит в браузере:
Старая цена: 1000 рублей Новая цена: 800 рублей
6. Добавленный текст — <ins>
Тег <ins> показывает текст, который был добавлен в документ. Браузер обычно подчёркивает его.
<p>Версия 2.0: <ins>добавлена поддержка картинок</ins></p>Как это выглядит в браузере:
Версия 2.0: добавлена поддержка картинок
<del> и <ins> часто используются вместе для показа изменений в тексте.
7. Сравнение смысловых и визуальных тегов
В старых версиях HTML часто использовали теги <b> (жирный) и <i> (курсив). Они задают только внешний вид, без смысла. В современном HTML лучше использовать смысловые:
<strong>(важно) вместо<b>(просто жирный)<em>(ударение) вместо<i>(просто курсив)
<!-- Плохо (без смысла) -->
<b>Важно</b>
<i>Курсив</i>
<!-- Хорошо (со смыслом) -->
<strong>Важно</strong>
<em>Ударение</em>