Тег HTML выделение текста, подсветка фона
Тег используется для выделения фрагмента текста (обычно с помощью подсветки фона).
Используйте тег , если вы хотите выделить участок текста аналогично выделению текста в тетради маркером.
В зависимости от браузера тег может иметь разные стили отображения. В некоторых браузерах тег не имеет стилей по умолчанию, поэтому лучше указывать стиль выделения вручную через CSS свойства.
Выделять часть текста также можно другими способами. Для выделения важных фрагментов (жирным шрифтом) используйте тег ; для выделения по смыслу (курсивом) — тег .
Все виды выделения текста описаны в статье: Теги форматирование текста в HTML.
Синтаксис
выделенный текстОтображение в браузере
Кто ценит свое время, тот читает справочник GuruWeba 😉
Пример использования в HTML коде
Выделение текста маркером mark
Кто ценит свое время, тот читает справочник GuruWeba ;-).
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | 9+ | Да | Да | Да |
Теги strong и b, важность и выделение
На этом возможности выделения слов и фраз в тексте не заканчиваются. Вы научились выделять фразы курсивом, а теперь давайте разберёмся с выделением текста жирным.
Теги и (сокращение от «bold») предназначены для выделения слова или фразы. Отображаются оба тега одинаково, они выделяют текст жирным.
Тег указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом не должно изменять смысла предложения.
Внимание! Это место опасно. Вы можете упасть в пропасть, если подойдёте близко к краю. Тег предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.
Вы входите в небольшую комнату. Ваш меч загорается ярче. Крыса стремительно пробегает вдоль стены.Лучше всего отличия этих тегов будут заметны людям, которые используют средства доступности, в частности, слепым и слабовидящим. Скринридер при чтении сайта будет выделять слова с тегом интонационно, в отличие от простого выделения с помощью .
То же самое касается тегов и . Тег «читалка» будет выделять интонацией.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 26 марта цена 19 900 ₽ 22 900 ₽
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Блог
День десятый. Подведение итогов
Прошла первая неделя, как я учусь вёрстке.
Кажется я понял, что в вёрстке на самом деле нет ничего сложного. Нужно только знать, для чего используется каждый тег и применять их по назначению.
Осталось всего лишь выучить CSS и всё, я буду крутым верстальщиком!
— жирное выделение текста
HTML-элемент является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.
| Content categories (en-US) | Flow content (en-US) , phrasing content (en-US) , palpable content. |
|---|---|
| Разрешённый контент | Phrasing content (en-US) . |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts phrasing content (en-US) . |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element. |
Атрибуты
Указания по применению
- Используйте в таких случаях, как ключевые слова в кратком содержании, имена продуктов в отзыве, или других частях текста, которые обычно выделяют жирным.
- Не путать элемент с , , или элементами. Элемент представляет собой текст определённой важности, делает некий акцент на тексте, и элемент представляет собой текст определённой значимости. Элемент не содержит специальной семантической информации, используйте его только в том случае, если другие не подошли.
- Также не помечайте заглавия и заголовки элементом . Для этих целей используйте элементы с (en-US) до (en-US) . К тому же CSS может изменять стандартный вид этих элементов, в результате чего они не всегда будут выделены жирным текстом.
- Хорошей практикой является использование атрибута class на элементе для того, чтобы передать дополнительную семантическую информацию (например, для первого предложения в абзаце). Это упрощает разработку различных стилизаций веб-документа без надобности менять его HTML-код.
- Исторически, элемент был задуман для выделения текста жирным шрифтом. Информация о стилизации устарела, начиная с HTML4, значение элемента было изменено.
- Если нет семантической причины использовать элемент , использование css свойства font-weight (en-US) со значением bold будет более грамотным выбором для изменения толщины текста.
Пример
.keywords color: red; >
p> В этой статье описывается элемент для форматирования b class="keywords">текстаb>. Она объясняет его использование в документе b class="keywords">HTMLb>. p>
Ключевые слова с тегом , отображаемые со стилем, выделены жирным шрифтом.
Спецификации
| Specification |
|---|
| HTML Standard # the-b-element |
Совместимость с браузерами
BCD tables only load in the browser
Как сделать текст курсивным. Тег
Тег не предназначен для использования в семантических целях, поскольку не передаёт никакого конкретного значения. Он только выделяет текст курсивом. Чрезмерное использование может сделать документ трудным для чтения и понимания, поэтому используйте тег только по мере необходимости.
В большинстве случаев тег можно заменить тегом . А чтобы специально указать, что текст должен быть выделен курсивом, используйте CSS. Например:
Это очень важно.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.