Тег mark отмечает фрагмент текста, который нужен читателю прямо сейчас: как маркер на бумаге отмечает найденное. Название - от английского mark, «отметка». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт и не устарел, а по умолчанию браузер выводит его с жёлтым фоном.
<p>Результаты по запросу «сайт»: как создать <mark>сайт</mark> с нуля.</p>В этой статье
Что делает тег mark в HTML
Тег mark не говорит, что текст важен или что на нём стоит ударение. Он говорит другое: этот фрагмент имеет значение для читателя в его нынешней ситуации. Самый частый случай - слово из поискового запроса, найденное в тексте.
Пример: найдите слово в тексте
Введите слово или нажмите на кнопку: найденные слова получают жёлтый фон, а под текстом показано, какая разметка для этого нужна. Слово «слон» в тексте не встречается, поэтому подсветки нет.
Сам текст при этом не меняется. Если убрать теги mark, останется тот же абзац, только без отметок. Поэтому mark подходит для того, что появляется и исчезает вместе с действием читателя: поиском, фильтром, выбранным термином.
Тег mark, strong или em: как выбрать
Три тега выделяют текст, но отвечают на разные вопросы, поэтому их не заменить друг другом.
Задайте себе вопрос. Слово важно для безопасности или смысла всего текста? Нужен strong. Слово читается с ударением, от которого зависит смысл предложения? Нужен em. Слово нужно читателю именно сейчас, потому что он его искал или отметил? Нужен mark.
<p><strong>Не</strong> нажимайте кнопку дважды.</p>
<p>Я <em>вчера</em> купил хлеб.</p>
<p>Найдено: <mark>сайт</mark>.</p>| Признак | strong | em | mark |
|---|---|---|---|
| Что сообщает | Текст важен или срочен | На слово падает ударение | Слово нужно читателю сейчас |
| От чего зависит | От смысла текста | От смысла предложения | От запроса или действия читателя |
| Вид по умолчанию | Более толстый шрифт | Курсив | Жёлтый фон, чёрный текст |
| Роль в структуре доступности (Chromium 141) | strong | emphasis | mark |
Как выглядит mark и как изменить цвет
Браузер даёт mark два значения сразу: жёлтый цвет фона и чёрный цвет текста. Мы проверили это в Chromium 141: даже если у абзаца красный текст на тёмном фоне, внутри mark он остаётся чёрным. Цвет родителя тег не наследует.
Из этого следует главное правило: меняете фон - задавайте и цвет текста. За фон отвечает свойство background, за цвет текста - свойство color.
mark {
background: #cde8ff;
color: #000;
}Если задать только фон, например тёмно-серый, чёрный текст останется чёрным и на нём пропадёт. Если задать только цвет текста, например белый, он окажется на жёлтом фоне и тоже пропадёт. Насколько хорошо виден текст, показывает число - контраст.
Контраст показывает, насколько цвет текста отличается от цвета фона. Число бывает от 1 (цвета одинаковые) до 21 (чёрное на белом). Чтобы обычный текст читался, нужно не меньше 4,5: так требуют рекомендации WCAG . Скрипт в кадре ниже сам считает это число для четырёх вариантов стиля.
Пример: читается ли текст при разных стилях
В каждой строке показаны стиль, слово в теге mark, число контраста и вывод: читается текст или нет. Числа посчитаны скриптом по тем цветам, которые получил браузер.
Видно, что рискованные варианты - второй и третий: изменён один цвет из двух. В четвёртом задана пара, и текст читается.
Вложенные теги mark отдельного вида не получают: во вложенном фон и текст те же, что и в одинарном, поэтому усиления отметки не будет.
Где применяют mark
Значение тега узкое, поэтому и случаев его применения немного. Во всех работает одна мысль: отметить то, что нужно читателю в его ситуации.
Первый случай - результаты поиска: слова запроса выделяют в найденных фрагментах. Второй - цитата, в которой автор отметил место от себя, и оригинал такой отметки не содержал. Третий - текст, который читатель сам отметил или выбрал: найденный термин, выбранная строка в таблице.
<blockquote>
<p>Мы не знаем, что будет завтра, но <mark>сегодня надо работать</mark>.</p>
<p>Выделено мной.</p>
</blockquote>Отметку в цитате принято пояснять словами: читателю нужно знать, что подсветка не из оригинала.
Подсветка слова через JavaScript
Демонстрация в начале страницы работает по такой схеме: берётся текст абзаца, режется по найденному слову, а найденные части оборачиваются в mark. Код короткий, и в нём нет ничего лишнего.
const p = document.querySelector('p');
const word = 'сайт';
const parts = p.textContent.split(new RegExp('(' + word + ')', 'gi'));
p.textContent = '';
parts.forEach((part, i) => {
if (i % 2 === 1) {
const mark = document.createElement('mark');
mark.textContent = part;
p.append(mark);
} else {
p.append(part);
}
});Разберём по строкам. Метод split режет строку по шаблону, а скобки вокруг слова заставляют оставить найденные слова в результате. Поэтому в массиве parts чередуются обычный текст (номера 0, 2, 4) и найденные слова (номера 1, 3, 5). Флаг gi означает: искать все совпадения и не различать заглавные и строчные буквы. Условие i % 2 === 1 проверяет, что номер нечётный, то есть перед нами найденное слово. Его помещают в новый элемент mark, остальное добавляют как есть.
Слово в textContent записано текстом, а не разметкой, поэтому найденный текст не превратится в теги. Если слово вводит пользователь, спецсимволы вроде точки, скобок и знака вопроса нужно экранировать: в шаблоне они имеют особый смысл.
const safe = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');Затем в new RegExp используют safe вместо word. Чтобы убрать подсветку, достаточно снова записать в абзац исходный текст: p.textContent = исходныйТекст.
Читают ли mark программы чтения с экрана
В Chromium 141 элемент попадает в структуру доступности с ролью mark, мы проверили это на пустой странице. Но озвучит ли отметку программа чтения с экрана, зависит от самой программы.
Справочник MDN пишет, что большинство программ чтения по умолчанию mark не озвучивают. Мы это не проверяли ни в NVDA, ни в JAWS, ни в VoiceOver.
Поэтому подсветка не должна быть единственным носителем информации. В результатах поиска напишите рядом словами, что найдено: «Найдено: 3 совпадения». В цитате пометка «Выделено мной» тоже нужна и зрячему читателю, и слепому.
Частые ошибки
Почти все ошибки с этим тегом растут из одной привычки: брать его как жёлтый маркер для красоты.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
mark вместо strong для предупреждения | Фрагмент подсвечен, но важность в смысле текста не передана | Использовать strong |
mark для красивых заголовков и плашек | Тег обещает «нужно читателю сейчас», а это просто оформление | Класс и span с CSS |
Изменён только background или только color | Текст сливается с фоном и пропадает | Всегда задавать пару: фон и цвет текста |
mark для подсветки синтаксиса кода | Тег не для этого: подсветка кода не про нужность читателю | Классы на span |
| Подсвечено слишком много слов | Когда отмечено всё, не видно ничего | Отмечать только нужное читателю в данный момент |
