Тег <mark>
Описание
Тег <mark> выделяет текст как маркированный или выделенный для справочных целей. По умолчанию браузеры отображают его с желтым фоновым цветом, но стиль можно изменить через CSS.
<p>
В этом тексте <mark>выделены</mark> важные фрагменты,
соответствующие вашему запросу.
</p>
<blockquote>
"Все счастливые семьи похожи друг на друга,
<mark>каждая несчастливая семья несчастлива по-своему</mark>."
<footer>- Лев Толстой</footer>
</blockquote>
<style>
mark {
background-color: #ffeb3b; /* Желтый по умолчанию */
padding: 0.2em;
border-radius: 3px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
mark.important {
background: linear-gradient(to right, #ffeb3b, #ff9800);
color: white;
font-weight: bold;
}
</style>
<p>Это <mark class="important">очень важное</mark> замечание.</p>
Ключевые особенности:
- Семантически обозначает релевантный или выделенный текст
- Не передает важность (для этого используйте
<strong>) - Часто используется в поисковых результатах
- Поддерживает все глобальные атрибуты HTML
- Может содержать другие фразовые элементы
Рекомендации по использованию:
- Используйте для визуального выделения релевантных фрагментов
- Избегайте чрезмерного выделения (не более 10-15% текста)
- Для семантического выделения важности используйте
<strong> - Сочетайте с JavaScript для динамического выделения
- Проверяйте контрастность при кастомизации стилей
Тег <mark> является полезным инструментом для привлечения внимания к определенным частям текста без изменения семантической важности контента.
Атрибуты
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент от отображения |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 9.0 | 6.0 | 10.6 | 4.0 | 4.0 |