HTML тег <b>
Тег <b> используется для выделения части текста жирным шрифтом, чтобы сделать её более заметной для пользователя
HTML-тег <b> используется для отображения части текста жирным шрифтом, чтобы она выделялась. Тег <b> лишь изменяет визуальное представление и не несёт смыслового значения (в том числе для поисковых систем).
Эта глава предназначена для всех, кто пишет HTML и хочет правильно делать текст жирным. Вы узнаете, для чего служит тег <b> в современном HTML, когда стоит использовать его, а когда CSS, а также чем он отличается от <strong>, <i> и <em> — четырёх тегов, которые легко перепутать.
В HTML5 тег <b> предназначен для несемантического стилистического выделения, например для обозначения ключевых слов, названий продуктов или меток интерфейса, а не как замена других тегов.
Когда использовать тег <b>
В HTML5 тег <b> имеет конкретное, узкое назначение: привлечение внимания к фрагменту текста исключительно из стилистических соображений, без указания на то, что этот текст важнее остального. Спецификация HTML называет три классических случая:
- Ключевые слова в документе, например первое употребление технического термина.
- Названия продуктов в обзоре или описании.
- Вводная фраза или начальные слова абзаца статьи.
<p><b>HTML</b> is the standard markup language for web pages.</p>
<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>
<p><b>In a hurry?</b> Skip to the summary below.</p>В каждом из этих случаев жирный текст выделяется визуально, но не обязательно является более важным по смыслу предложения — именно это отличает <b> от <strong>.
Не используйте тег <b> для заголовков. Вместо этого применяйте теги <h1>–<h6>, которые несут смысловую нагрузку в структуре документа.
<b> или CSS?
Если ваша цель — исключительно визуальная и обусловлена дизайнерским правилом, например «все названия продуктов в этом каталоге выделяются жирным», то лучше задать жирное начертание с помощью свойства CSS font-weight, поскольку стиль будет храниться в таблице стилей и может быть изменён в одном месте. Тег <b> стоит использовать тогда, когда жирное начертание является частью самого содержимого документа (разовое ключевое слово или вводная фраза), а не повторяющимся шаблоном дизайна. В любом случае ни один из этих подходов не передаёт важность вспомогательным технологиям — для этого нужен <strong>.
Синтаксис
Тег <b> является парным. Содержимое записывается между открывающим ( <b> ) и закрывающим ( </b> ) тегами.
Пример HTML-тега <b> :
Пример HTML-тега <b> |W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p><b>This section of the text </b> has been rendered in bold,</p>
</body>
</html>По умолчанию элемент <b> отображается жирным шрифтом, однако это поведение является лишь стилем браузера по умолчанию — его можно изменить с помощью CSS.
Жирное начертание текста через CSS
Если жирное выделение определяется дизайном, а не содержимым, задайте его с помощью свойства CSS font-weight для <span> (или любого другого элемента) вместо тега <b> ``. Это позволит переиспользовать стиль в таблице стилей:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="bold-text">This section of the text </span>
has been rendered in bold.
</p>
</body>
</html> <b> и <strong>
Оба элемента — <b> и <strong> — по умолчанию отображают текст жирным шрифтом, поэтому визуально выглядят одинаково. Разница заключается в смысле:
<strong><b>
Вот одинаковые слова, оформленные двумя разными способами:
<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>
<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>Практическое правило: если жирное начертание что-то означает — этот текст важнее, и пользователь программы экранного доступа должен об этом знать — используйте <strong> . Если нужна лишь визуальная подсказка, используйте <b> или CSS font-weight.
<b> , <i> , <em> и <strong>
Эти четыре тега нередко путают, потому что два из них дают жирное начертание, а два — курсив. Они разграничиваются по той же линии, что и <b> со <strong> : визуальное против семантического:
| Тег | Стиль по умолчанию | Передаёт важность/акцент? |
|---|---|---|
<b> | Жирный | Нет — только визуальное |
<strong> | Жирный | Да — сильная важность |
<i> | Курсив | Нет — только визуальное (альтернативный голос, термины) |
<em> | Курсив | Да — смысловое ударение |
Таким образом, <b> является жирным аналогом <i>, а <strong> — жирным аналогом <em>.
Доступность
Программы экранного доступа не присваивают элементу <b> никакой семантической роли — его текст озвучивается точно так же, как окружающий текст, без каких-либо изменений акцента. Это сделано намеренно, поскольку <b> является презентационным элементом. Практическое следствие: никогда не используйте <b> ``, если важность текста должна быть донесена до пользователей вспомогательных технологий. Если фраза действительно более важна, отметьте её тегом <strong> (или <em> для устного акцента), чтобы смысл был понятен всем, а не только зрячим пользователям.
Атрибуты
Тег <b> поддерживает глобальные атрибуты и атрибуты событий.
Пример применения глобального атрибута к HTML-тегу <b>
<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>