HTML тег <mark>
Поддержка браузерами
| 12.0+ | 9.0+ | 4.0+ | 6.0+ | 11.1+ | 5.0+ |
Описание
HTML тег <mark> используется для выделения или подсветки текста из-за его актуальности в другом контексте. Хорошим примером является выделение слова в документе, которое искал пользователь.
Тег <mark> не несет в себе никакого логического контекста, в отличие от тегов <strong> или <em>, но он является более семантически значимым, чем обычный <span>. Его прямым назначением является обратить внимание на то, что в данный момент актуально для пользователя.
Для примера опишем несколько вариантов, в которых может быть полезно выделить некую информацию для пользователя, не несущую в себе явного логического смысла:
- Показ результатов поиска - при использовании поиска на сайте или в поисковой системе, можно выделить раздел текста, точно соответствующий введенным данным. Это поможет посетителю сайта сориентироваться на странице найти на странице и быстрее найти нужную ему информацию.
- Указать на новые элементы в списке - если у вас есть список элементов, который вы постоянно обновляете, можно выделить новые элементы, чтоб постоянные посетители сайта сразу могли увидеть, что было добавлено.
- Показать текущую дату в календаре - если на сайте есть календарь, то можно использовать <mark> для указания на текущую дату.
Примечание: текст, заключенный в элемент <mark>, ничем не будет отличаться от остального текста (в некоторых браузерах, задний фон, выделенного текста, подсвечивается желтым цветом), для изменения внешнего вида иcпользуйте CSS.
Атрибуты
Тег <mark> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
mark {
background-color: yellow;
color: black;
}
Пример
<p>Не забудь купить <mark>молока</mark> сегодня.</p>
Результат данного примера в окне браузера:
