0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#База знаний</a></p>
1
<p><a>#База знаний</a></p>
2
<ul><li>10 июн 2025</li>
2
<ul><li>10 июн 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Разбираемся, как работает этот тег, когда его стоит применять и почему иногда лучше выбрать другой способ.</p>
4
</ul><p>Разбираемся, как работает этот тег, когда его стоит применять и почему иногда лучше выбрать другой способ.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Тег <b> (от англ. bold - "жирный") используется в HTML для визуального выделения текста жирным начертанием. Он не добавляет тексту дополнительный смысл, а лишь акцентирует внимание читателя на контенте. В этой статье мы разберём, как работает этот тег и чем он отличается от других способов выделения.</p>
7
<p>Тег <b> (от англ. bold - "жирный") используется в HTML для визуального выделения текста жирным начертанием. Он не добавляет тексту дополнительный смысл, а лишь акцентирует внимание читателя на контенте. В этой статье мы разберём, как работает этот тег и чем он отличается от других способов выделения.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Как работает тег <b> и зачем он нужен</a></li>
9
<ul><li><a>Как работает тег <b> и зачем он нужен</a></li>
10
<li><a>Как правильно писать и использовать тег <b> в HTML-документе</a></li>
10
<li><a>Как правильно писать и использовать тег <b> в HTML-документе</a></li>
11
<li><a>Тег <b> и тег <strong>: в чем разница</a></li>
11
<li><a>Тег <b> и тег <strong>: в чем разница</a></li>
12
<li><a>Как тег <b> влияет на доступность и SEO</a></li>
12
<li><a>Как тег <b> влияет на доступность и SEO</a></li>
13
<li><a>Применение стилей вместо тега <b></a></li>
13
<li><a>Применение стилей вместо тега <b></a></li>
14
</ul><p>Тег <b> делает шрифт в выделенном тексте жирным, чтобы он стал заметнее на странице. Поисковые системы и скринридеры (программы, читающие текст вслух людям с нарушением зрения) такое выделение игнорируют. Чтобы сообщить им, что это важный текст, на который стоит обратить внимание, используются другие методы. Мы поговорим о них ниже.</p>
14
</ul><p>Тег <b> делает шрифт в выделенном тексте жирным, чтобы он стал заметнее на странице. Поисковые системы и скринридеры (программы, читающие текст вслух людям с нарушением зрения) такое выделение игнорируют. Чтобы сообщить им, что это важный текст, на который стоит обратить внимание, используются другие методы. Мы поговорим о них ниже.</p>
15
<p>Тегом <b>, можно выделить, например:</p>
15
<p>Тегом <b>, можно выделить, например:</p>
16
<ul><li>название товара или бренда;</li>
16
<ul><li>название товара или бренда;</li>
17
<li>текст на кнопке;</li>
17
<li>текст на кнопке;</li>
18
<li>первые слова в пунктах списка, чтобы визуально отделить их друг от друга.</li>
18
<li>первые слова в пунктах списка, чтобы визуально отделить их друг от друга.</li>
19
</ul><p>Это обычный текст, а <b>это жирный шрифт</b>.</p<p>На странице выделится только фраза "<strong>это жирный шрифт</strong>".</p>
19
</ul><p>Это обычный текст, а <b>это жирный шрифт</b>.</p<p>На странице выделится только фраза "<strong>это жирный шрифт</strong>".</p>
20
<p>Тег <b> - парный, то есть его нужно открыть (<b>) и потом закрыть (</b>). Всё, что находится внутри, будет отображаться в жирном начертании.</p>
20
<p>Тег <b> - парный, то есть его нужно открыть (<b>) и потом закрыть (</b>). Всё, что находится внутри, будет отображаться в жирном начертании.</p>
21
<p>Для запуска программы нажмите <b>Старт</b>.</p><p>Браузер изменяет выделенный таким образом текст, применяя стиль font-weight: bold.</p>
21
<p>Для запуска программы нажмите <b>Старт</b>.</p><p>Браузер изменяет выделенный таким образом текст, применяя стиль font-weight: bold.</p>
22
<p>У тега нет своих уникальных атрибутов, но он поддерживает общие HTML-атрибуты:</p>
22
<p>У тега нет своих уникальных атрибутов, но он поддерживает общие HTML-атрибуты:</p>
23
<ul><li>class - для подключения CSS-стилей;</li>
23
<ul><li>class - для подключения CSS-стилей;</li>
24
<li>id - для уникальной идентификации;</li>
24
<li>id - для уникальной идентификации;</li>
25
<li>style - для быстрой настройки внешнего вида;</li>
25
<li>style - для быстрой настройки внешнего вида;</li>
26
<li>title - всплывающая подсказка.</li>
26
<li>title - всплывающая подсказка.</li>
27
</ul><b class="highlight" title="Важная информация">Обратите внимание!</b><p><strong>Что здесь происходит:</strong></p>
27
</ul><b class="highlight" title="Важная информация">Обратите внимание!</b><p><strong>Что здесь происходит:</strong></p>
28
<ul><li>class="highlight" - подключает CSS-класс с именем highlight, с помощью которого можно задать стили (например, цвет, отступы и так далее) в CSS-файле;</li>
28
<ul><li>class="highlight" - подключает CSS-класс с именем highlight, с помощью которого можно задать стили (например, цвет, отступы и так далее) в CSS-файле;</li>
29
<li>title="Важная информация" - если навести курсор мыши на текст, появится всплывающая подсказка с этой фразой.</li>
29
<li>title="Важная информация" - если навести курсор мыши на текст, появится всплывающая подсказка с этой фразой.</li>
30
</ul><p><strong> - похожий тег для выделения текста. Оба тега делают шрифт жирным, но работают по-разному:</p>
30
</ul><p><strong> - похожий тег для выделения текста. Оба тега делают шрифт жирным, но работают по-разному:</p>
31
<ul><li>Тег <b> просто выделяет текст внешне, без дополнительного смысла.</li>
31
<ul><li>Тег <b> просто выделяет текст внешне, без дополнительного смысла.</li>
32
<li>Тег <strong> показывает, что текст важный и что на него нужно обратить внимание. Это понимают и браузеры, и поисковики, и скринридеры (программы, которые читают текст вслух). Тегом <strong> можно выделить, например, предупреждения, ключевые фразы.</li>
32
<li>Тег <strong> показывает, что текст важный и что на него нужно обратить внимание. Это понимают и браузеры, и поисковики, и скринридеры (программы, которые читают текст вслух). Тегом <strong> можно выделить, например, предупреждения, ключевые фразы.</li>
33
</ul><p>Этот текст <b>просто жирный</b>, а этот <strong>важный</strong>.</p><p>Внешне результат работы этих тегов выглядит абсолютно одинаково:</p>
33
</ul><p>Этот текст <b>просто жирный</b>, а этот <strong>важный</strong>.</p><p>Внешне результат работы этих тегов выглядит абсолютно одинаково:</p>
34
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Поисковые системы игнорируют тег <b>, потому что он не имеет смысла, то есть этот тег никак не влияет на SEO.</p>
34
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Поисковые системы игнорируют тег <b>, потому что он не имеет смысла, то есть этот тег никак не влияет на SEO.</p>
35
<p>Сам по себе тег <b> не помогает и создать доступную среду для людей с нарушениями зрения, но его можно использовать вместе с ARIA-атрибутами. Тогда текст начнёт взаимодействовать со скринридерами.</p>
35
<p>Сам по себе тег <b> не помогает и создать доступную среду для людей с нарушениями зрения, но его можно использовать вместе с ARIA-атрибутами. Тогда текст начнёт взаимодействовать со скринридерами.</p>
36
<p>ARIA-атрибуты помогают объяснить смысл текста программам для чтения с экрана. Это важно, если вы используете <b> и хотите, чтобы выделение было понято правильно.</p>
36
<p>ARIA-атрибуты помогают объяснить смысл текста программам для чтения с экрана. Это важно, если вы используете <b> и хотите, чтобы выделение было понято правильно.</p>
37
<p>Атрибут aria-label задаёт текстовую подсказку, которую скринридеры озвучивают вместе с содержимым элемента.</p>
37
<p>Атрибут aria-label задаёт текстовую подсказку, которую скринридеры озвучивают вместе с содержимым элемента.</p>
38
<p>Скорость автомобиля: <b aria-label="критически высокая"> - 200 км/ч</b></p><p>Скринридер озвучит:</p>
38
<p>Скорость автомобиля: <b aria-label="критически высокая"> - 200 км/ч</b></p><p>Скринридер озвучит:</p>
39
<p>"Скорость автомобиля критически высокая - 200 километров в час".</p>
39
<p>"Скорость автомобиля критически высокая - 200 километров в час".</p>
40
<p>Атрибут aria-hidden поможет спрятать текст от скринридеров:</p>
40
<p>Атрибут aria-hidden поможет спрятать текст от скринридеров:</p>
41
<p>Это <b aria-hidden="true">важное</b> сообщение.</p><p>Скринридер прочитает только: "Это сообщение" - слово "важное" будет пропущено, но визуально останется на экране.</p>
41
<p>Это <b aria-hidden="true">важное</b> сообщение.</p><p>Скринридер прочитает только: "Это сообщение" - слово "важное" будет пропущено, но визуально останется на экране.</p>
42
<p>Если вам нужно просто выделить текст жирным, необязательно использовать тег <b>. Можно сделать то же самое с помощью CSS - языка, который управляет внешним видом страницы.</p>
42
<p>Если вам нужно просто выделить текст жирным, необязательно использовать тег <b>. Можно сделать то же самое с помощью CSS - языка, который управляет внешним видом страницы.</p>
43
<p>Это <span class="highlight">выделенный</span> текст.</p> .highlight { font-weight: 700; }<p>Здесь шрифт у выделенной фразы внутри тега <span> будет жирным, потому что мы задали стиль font-weight: 700 - то есть указали толщину шрифта 700. Лучше использовать числовое значение, а не значение bold, потому что современные шрифты поддерживают разные толщины:</p>
43
<p>Это <span class="highlight">выделенный</span> текст.</p> .highlight { font-weight: 700; }<p>Здесь шрифт у выделенной фразы внутри тега <span> будет жирным, потому что мы задали стиль font-weight: 700 - то есть указали толщину шрифта 700. Лучше использовать числовое значение, а не значение bold, потому что современные шрифты поддерживают разные толщины:</p>
44
<strong>Название</strong><strong>Толщина</strong>Thin / Hair100Extra Light200Light300Regular400Medium500Semi Bold600Bold700Extra Bold800Black / Heavy / Ultra900<p>Используя числа, вы точно настраиваете внешний вид текста. Это важно, если у вас есть дизайн-макет или нужен единый стиль.</p>
44
<strong>Название</strong><strong>Толщина</strong>Thin / Hair100Extra Light200Light300Regular400Medium500Semi Bold600Bold700Extra Bold800Black / Heavy / Ultra900<p>Используя числа, вы точно настраиваете внешний вид текста. Это важно, если у вас есть дизайн-макет или нужен единый стиль.</p>
45
<p>У стилей есть несколько преимуществ перед тегом <b>:</p>
45
<p>У стилей есть несколько преимуществ перед тегом <b>:</p>
46
<ul><li>Можно управлять стилем в одном месте - меняете стиль в CSS, и он применяется ко всем нужным элементам.</li>
46
<ul><li>Можно управлять стилем в одном месте - меняете стиль в CSS, и он применяется ко всем нужным элементам.</li>
47
<li>Легко использовать разные типы выделения - жирный (font-weight), цветной (color), подчёркнутый (text-decoration) и другие.</li>
47
<li>Легко использовать разные типы выделения - жирный (font-weight), цветной (color), подчёркнутый (text-decoration) и другие.</li>
48
<li>Код становится чище - структура (HTML) и оформление (CSS) разделены.</li>
48
<li>Код становится чище - структура (HTML) и оформление (CSS) разделены.</li>
49
</ul><p>Зато тег <b> можно использовать:</p>
49
</ul><p>Зато тег <b> можно использовать:</p>
50
<ul><li>для быстрого выделения текста в небольшом фрагменте;</li>
50
<ul><li>для быстрого выделения текста в небольшом фрагменте;</li>
51
<li>если нет доступа к CSS (например, в CMS или конструкторе сайтов);</li>
51
<li>если нет доступа к CSS (например, в CMS или конструкторе сайтов);</li>
52
<li>в учебных примерах или черновиках.</li>
52
<li>в учебных примерах или черновиках.</li>
53
</ul><ul><li><a>MDN: Тег <b></a></li>
53
</ul><ul><li><a>MDN: Тег <b></a></li>
54
<li><a>MDN: Тег <strong></a></li>
54
<li><a>MDN: Тег <strong></a></li>
55
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>
55
</ul><a>Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше</a>