Как сделать текст жирным в HTML: правильное использование тегов

Быстрый ответ

Для выделения текста жирным шрифтом в контексте значимости или важности используйте тег <strong>. Если же выделять текст нужно просто для внешнего эффекта, будет уместен тег <b>:

<strong>Важная информация.</strong>
<b>Текст, выделенный жирным для визуального акцента.</b>

Тег <strong> акцентирует важность контента, в то время как <b> служит для визуального обозначения. Оба эти тега делают текст жирным.

Разница между <strong> и <b>

Несмотря на внешнее сходство <strong> и <b>, эти теги имеют разное семантическое значение. Тег <strong> подчёркивает высокую значимость содержимого, что учитывается поисковыми системами и программами для воспроизведения текста.

Визуализация

Представим, что нам нужно выделить текст, чтобы он был особенным:

                До:             После:

               "Приветствую!"      "**Приветствую!**"

В HTML мы используем теги <strong> или <b> для выделения:

<strong>Приветствую!</strong> или <b>Приветствую!</b>

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

Применение CSS для создания жирного стиля текста

Если необходимо точно контролировать жирность или выделить большой блок текста, предпочтительно использовать CSS:

/* Шутка про шрифты вполне уместна! */
.bold-text {
    font-weight: bold;
}

<!-- Это слово танцует не просто танго, а фламенко! -->
<p>Это <span class="bold-text">выделенное</span> слово.</p>

Свойство font-weight: bold; позволяет управлять жирностью не только одного элемента, но и целых блоков элементов, делая код более структурированным и легким в поддержке.

Подробнее об этом расскажет наш спикер на видео

Жирный текст и доступность

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

Составление структурированных разметок

Структурированный контент не только полезен для читаемости, но также способствует SEO и доступности. Правильное использование иерархии заголовков (<h1>, <h2> и далее) и семантических элементов (<label>, <th>, <cite>) улучшает понимание структуры и смысла содержимого.

Ниже схема правильной разметки:

<!-- Вы так важны, что заслуживаете использования "H1". -->
<h1>Главный заголовок страницы</h1>
<!-- Принцип воспитания: учить давая выбор. -->
<h2>Подзаголовок раздела</h2>
<label for="search">Поиск:</label>
<th>Заголовок столбца таблицы</th>
<cite>Цитируемое произведение</cite>

Структурированный HTML и семантический контекст — эти ключевые аспекты в веб-разработке, поэтому всегда используйте HTML для доноса смысла и CSS для оформления.

Полезные материалы

1. HTML b Tag — Гайд по тегу <b> для жирного текста в HTML.
2. <strong>: The Strong Importance element – HTML: HyperText Markup Language | MDN — Детальная информация о семантическом значении элемента <strong>.
3. CSS font-weight property — Всё о свойстве CSS font-weight для стилизации текста.
4. HTML Styles CSS — Руководство по встроенной стилизации CSS, включая создание жирного текста.
5. html – What's the difference between <b> and <strong>, <i> and <em>? – Stack Overflow — Обсуждение в сообществе относительно использования <b> и <strong>.
6. The i, b, em, & strong elements | HTML5 Doctor — Статья о применении <b> в контексте HTML5-стандарта.
7. WebAIM: Typefaces and Fonts — Обсуждение вопросов доступности, связанных с использованием жирного шрифта в HTML.