HTML тег <mark>
HTML тег <mark> выделяет текст как релевантный в текущем контексте. Узнайте о его применении, атрибутах и стилизации на примерах.
Тег <mark> — один из элементов HTML5. Он помечает фрагмент текста как релевантный или выделенный для справки — примерно так же, как вы проводите маркером по словам на бумажной странице. По умолчанию браузеры отображают его с жёлтым фоном.
На этой странице объясняется семантический смысл тега <mark>, когда стоит использовать его вместо обычного <span>, три классических сценария применения, а также его отличия от <strong>, <b> и <em>.
Почему <mark>, а не <span>?
Тег <span> — универсальный контейнер без какого-либо смысла: он служит исключительно крючком для стилизации. Можно задать <span> жёлтый фон, и он будет выглядеть выделенным, но для программы чтения с экрана, поисковой системы или любой другой программы это останется обычным текстом.
<mark> отличается тем, что несёт семантику: он сообщает браузеру и вспомогательным технологиям, что «эта часть текста примечательна или релевантна в текущем контексте». Выделение является частью смысла документа, а не только его внешнего вида.
Используйте простое правило:
- Если выделение передаёт смысл (этот текст совпал с поисковым запросом, этот фрагмент — суть сказанного) → используйте
<mark>. - Если нужен цветной фон только для оформления → используйте
<span>с CSS.
Когда применять <mark>
Спецификация описывает три основных сценария:
- Выделение совпадений в результатах поиска. Отмечайте слова в тексте, совпадающие с поисковым запросом пользователя, чтобы он мог быстро найти нужное место.
- Релевантность внутри цитаты. Когда вы цитируете чужой текст,
<mark>выделяет ту часть, которая важна для цели цитирования — акцент, которого оригинальный автор не добавлял. - Выделенный пользователем контент. Представляет текст, который читатель выделил сам, — аналог функции «выделение» в приложениях для чтения или аннотирования.
Никогда не используйте <mark> для подсветки синтаксиса или чисто визуального окрашивания. Для этого применяйте <span> с соответствующим CSS.
Синтаксис
Тег <mark> используется парно. Содержимое записывается между открывающим (<mark>) и закрывающим (</mark>) тегами.
Пример HTML тега <mark>:
HTML тег <mark>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>Результат
Реальный пример: выделение совпадений при поиске
Представьте страницу с результатами поиска, где пользователь искал слово highlight. Каждое совпадающее слово в абзаце оборачивается в <mark>, чтобы результат было легко просматривать. Пример ниже также изменяет цвет выделения и добавляет правило @media print, поскольку жёлтый фон по умолчанию при печати страниц часто не отображается:
<!DOCTYPE html>
<html>
<head>
<title>Search results</title>
<style>
/* Custom highlight color instead of the default yellow */
mark {
background-color: #c8f7c5;
color: #14532d;
padding: 0 2px;
border-radius: 3px;
}
/* Make sure highlights are still visible when printed */
@media print {
mark {
background-color: transparent;
color: inherit;
text-decoration: underline;
}
}
</style>
</head>
<body>
<p>
You can <mark>highlight</mark> search terms so the user finds them
fast. Each <mark>highlight</mark> marks where the query matched.
</p>
</body>
</html>Тег <mark> и другие HTML теги
Некоторые HTML элементы выглядят похоже на <mark>, но означают разные вещи. Правильный выбор важен для доступности и SEO, поскольку каждый элемент сообщает браузерам и вспомогательным технологиям о своём особом назначении.
HTML тег <strong>
Тег <strong> обозначает текст, имеющий большую важность, серьёзность или срочность — например, сообщение об ошибке или предупреждение. По умолчанию браузеры отображают его жирным шрифтом. Используйте <strong>, когда текст значим, а не просто должен быть выделен.
HTML тег <b>
Тег <b> также отображается жирным, но, в отличие от <strong>, не несёт значимости. Он привлекает внимание по стилистическим соображениям — например, для ключевых слов или названия продукта — не подразумевая, что текст важнее остального.
HTML тег <em>
Тег <em> добавляет смысловое ударение на слово, подобно тому как вы меняете интонацию при разговоре. По умолчанию отображается курсивом и может менять смысл предложения.
Коротко: <mark> = релевантно/выделено здесь, <strong> = важно, <b> = визуально жирный, без смысла, <em> = речевое ударение.
Атрибуты
У тега <mark> нет собственных атрибутов — он принимает только глобальные атрибуты и атрибуты событий.
Как стилизовать HTML тег <mark>
Вы можете изменить жёлтый фон по умолчанию с помощью CSS свойства background-color:
mark {
background-color: #ffeb3b;
color: #333;
}