Тег <mark>: смысловое выделение найденного фрагмента
Элемент mark отмечает фрагмент, значимый в текущем контексте: например, совпадение с поисковым запросом. Такое выделение отличается от общей важности текста и от речевого ударения.
Назначение
Элемент mark отмечает фрагмент, значимый в текущем контексте: например, совпадение с поисковым запросом. Такое выделение отличается от общей важности текста и от речевого ударения.
Как это работает
Окружите только нужную часть фразы, сохраняя нормальный порядок чтения. Оформление браузера можно заменить CSS, но контраст букв и фона необходимо проверить. Для важности используйте strong, для смыслового акцента — em.
Пример
<style>mark{background:#fff0a8;color:#202020;padding-inline:.1em}</style>
<p>Результат поиска по слову «сетка»:</p>
<p>CSS-<mark>сетка</mark> помогает расположить карточки по колонкам.</p>Что должно получиться
Совпадающее слово подсвечено, а предложение остаётся обычным текстом. Поисковый запрос назван отдельно: посетитель может понять причину выделения и без его цветового оформления.
Граница применения и частая ошибка
Не предполагайте, что экранный диктор обязательно объявит начало mark. Массовая подсветка через innerHTML с неэкранированным запросом небезопасна; создавайте текстовые узлы и элементы отдельно.
Самостоятельная проверка
Проверьте пример без CSS и в режиме повышенной контрастности. Замените запрос и выделяемое слово, затем убедитесь, что выделен именно фрагмент результата, а не вся карточка или заголовок страницы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.