Тег mark в HTML

Введение

Тег mark в HTML используют для визуального подсвечивания фрагментов текста. Его основная задача — показать пользователю, что этот текст важен в текущем контексте или представляет результаты поиска.

Если вы когда-либо видели на странице поисковой выдачи подсвеченные слова, совпадающие с вашим запросом, то чаще всего для этого и используется тег mark. Он дает браузеру и вспомогательным технологиям (например, экранным дикторам) дополнительную семантику, а не просто «желтый фон через CSS».

В этой статье я покажу вам, как правильно использовать тег mark, в чем его отличие от span, strong и других тегов, как его стилизовать и как интегрировать с JavaScript, например, для подсветки результатов поиска по странице.

Назначение и семантика тега mark

Что делает тег mark

Тег mark задает семантическое выделение текста. Он говорит браузеру и пользователю следующее: этот текст выделен, потому что он важен в текущем контексте.

Классический пример — подсветка найденного фрагмента текста:

<p>
  Вы искали слово 
  <mark>подсветка</mark> 
  и вот результаты на этой странице.
</p>
<!-- Тег mark показывает, что слово "подсветка" важно именно в контексте поиска -->

Здесь:

• Браузер по умолчанию подсветит слово желтым фоном.
• Экранный диктор может дополнительно озвучить, что это выделенный фрагмент (зависит от реализации).
• Разработчик и другой читатель кода сразу понимают, что это не просто «стилизованный span», а именно подсветка по смыслу.

Когда использовать mark

Используйте тег mark, если:

• Вы показываете результаты поиска на странице.
• Вы выделяете совпадения с фильтром (например, при поиске по таблице).
• Вам нужно подсветить фрагмент текста, который важен сейчас, а не всегда.
• Вы хотите показать пользователю контекст совпадения в длинном тексте.

Не используйте mark, если вы просто хотите сделать текст ярче без семантики. Для этого лучше подойдет span с классом и CSS.

Пример корректного использования

<p>
  По запросу 
  <mark>HTML</mark> 
  найдены следующие статьи.
</p>
<!-- "HTML" важен, потому что это искомый термин пользователя -->

Пример некорректного использования

<p>
  Наш новый 
  <mark>супер-важный</mark> 
  продукт на рынке.
</p>
<!-- Здесь нет "контекста", просто желание сделать текст заметным -->

В таком случае лучше использовать strong или span с классом:

<p>
  Наш новый <strong>супер-важный</strong> продукт на рынке.
</p>
<!-- strong показывает логическую важность, а не "актуальный контекст" -->

Базовый синтаксис и поведение

Простейший пример

Смотрите, сначала разберем самый простой вариант:

<p>
  Результат поиска - найдено слово 
  <mark>маркировка</mark>.
</p>
<!-- Тег mark оборачивает только тот текст, который нужно подсветить -->

Что здесь происходит:

• <mark>маркировка</mark> — это оборачивающий тег для небольшого текстового фрагмента.
• Внутри можно использовать обычный текст и другие инлайновые элементы (например, span, a).
• Браузер по умолчанию применит желтый фон и черный текст (цвета зависят от браузера и темы ОС).

Можно ли вкладывать другие теги в mark

Да, тег mark — строчный (inline) элемент, и внутри можно размещать другие строчные элементы. Давайте посмотрим пример:

<p>
  Найден пользователь 
  <mark>
    <a href="/users/42">Иван Иванов</a>
  </mark>
  с совпадением по имени.
</p>
<!-- Внутри mark находится ссылка. Это корректно и часто полезно -->

Здесь:

• Мы подсвечиваем не только текст, но и саму ссылку как часть найденного результата.
• Визуально пользователь увидит подсвеченный кликабельный фрагмент.

Важно не превращать mark в «контейнер для всего подряд». Например, оборачивать в него большие блоки вроде div или целые абзацы — не лучшая идея.

Семантика и отличие от других тегов

mark vs span

Многие разработчики спрашивают, чем mark отличается от span, ведь визуально можно сделать одно и то же.

• span — чисто технический тег, без семантики. Он нужен для группировки текста и назначения стилей/скриптов.
• mark — семантический тег, он сообщает смысл выделения: текст важен в текущем контексте.

Давайте разберем на примере:

<p>
  Это 
  <span class="yellow">слово</span> 
  выделено просто желтым фоном.
</p>

<p>
  Это 
  <mark>слово</mark> 
  выделено как результат поиска.
</p>
<!-- Во втором случае вы явно показываете смысл выделения -->

Таким образом:

• Если вы хотите просто поменять внешний вид текста — чаще всего достаточно span.
• Если вы хотите выразить значение в контексте — используйте mark.

mark vs strong и em

Теги strong и em обозначают логическую важность или акцент:

• strong — важный текст (часто отображается жирным).
• em — логическое ударение при чтении (часто курсивом).

Тег mark отличается тем, что говорит не о «важности вообще», а о релевантности здесь и сейчас.

Например:

<p>
  <strong>Внимание</strong> - завтра плановое отключение сервера.
</p>
<!-- strong - важная информация -->

<p>
  Текст поиска - 
  <mark>сервер</mark> 
  был найден в нескольких документах.
</p>
<!-- mark - подсветка совпадения по поисковому запросу -->

Можно комбинировать:

<p>
  По запросу 
  <mark><strong>сервер</strong></mark> 
  найдена критически важная информация.
</p>
<!-- Здесь фраза и важна (strong) и подсвечена как совпадение (mark) -->

Атрибуты тега mark

Глобальные атрибуты

У тега mark нет специальных собственных атрибутов, он поддерживает только глобальные атрибуты HTML:

• id — для идентификации элемента.
• class — для CSS-стилей.
• title — всплывающая подсказка.
• lang — язык содержимого.
• data-* — пользовательские атрибуты для скриптов.
• и другие глобальные атрибуты (style, dir и т.п.).

Давайте разберемся на примере, как это выглядит в реальном коде:

<p>
  Слово 
  <mark 
    id="search-hit-1" 
    class="search-hit" 
    title="Совпадение с поисковым запросом" 
    data-score="0.92"
  >
    подсветка
  </mark>
  было найдено в тексте.
</p>
<!-- id и class помогают стилизовать и находить элемент в DOM -->
<!-- title показывает подсказку при наведении -->
<!-- data-score - пример пользовательского атрибута для логики поиска -->

Пример использования с data-атрибутами

Часто тег mark применяется в связке с JavaScript, и data-атрибуты очень помогают.

<p>
  Найдено совпадение - 
  <mark data-match-index="1" data-field="title">HTML</mark>.
</p>
<!-- data-match-index - номер совпадения -->
<!-- data-field - поле, в котором найдено совпадение -->

Вы позже можете получить эти значения в JavaScript, чтобы, например, подсветить текущий результат или построить навигацию по совпадениям.

Стилизация тега mark с помощью CSS

Базовая стилизация

По умолчанию браузер обычно делает фоновый цвет текстового фрагмента желтым. Но вы почти всегда захотите переопределить этот стиль под дизайн вашего сайта.

Теперь вы увидите, как это выглядит в коде:

<style>
  mark {
    background-color: #ffe9a3; /* Мягкий желтый вместо ярко-желтого */
    color: #000;               /* Черный текст для контраста */
    padding: 0 2px;           /* Небольшие отступы слева и справа */
    border-radius: 2px;       /* Легкое скругление углов */
  }
</style>

<p>
  Поиск нашел слово 
  <mark>подсветка</mark>.
</p>
<!-- CSS переопределяет стандартный вид тега mark -->

Здесь:

• Мы задаем общий стиль для всех элементов mark на странице.
• Добавляем отступы, чтобы выделение выглядело аккуратнее.
• Добавляем скругление, чтобы оно выглядело ближе к современному дизайну.

Разные типы подсветки

Иногда на одной странице может быть несколько типов подсветки. Например:

• Основные совпадения.
• Второстепенные совпадения.
• Ошибки или предупреждения.

Смотрите, я покажу вам, как это реализовать:

<style>
  mark.primary-hit {
    background-color: #ffeb3b; /* Яркая подсветка для главных совпадений */
  }

  mark.secondary-hit {
    background-color: #c8e6c9; /* Зеленоватый фон для второстепенных */
  }

  mark.warning-hit {
    background-color: #ffcdd2; /* Розоватый фон для предупреждений */
    color: #b71c1c;            /* Темно-красный текст */
  }
</style>

<p>
  Основное совпадение - 
  <mark class="primary-hit">HTML</mark>.
</p>
<p>
  Дополнительное совпадение - 
  <mark class="secondary-hit">разметка</mark>.
</p>
<p>
  Возможная ошибка - 
  <mark class="warning-hit">HTMl</mark>.
</p>
<!-- Каждому типу присвоен свой класс и стиль -->

Такой подход удобен, если вы реализуете, например, систему проверки орфографии или подсветку синтаксиса.

Темная тема и контрастность

Важный момент — контрастность. На темной теме желтый фон может выглядеть слишком ярким или, наоборот, нечитабельным.

Давайте посмотрим пример стилизации для темной темы:

<style>
  body.dark {
    background: #121212; /* Темный фон */
    color: #eee;         /* Светлый текст */
  }

  body.dark mark {
    background-color: #37474f; /* Темно-серый фон для подсветки */
    color: #ffeb3b;            /* Желтоватый текст */
  }
</style>

<body class="dark">
  <p>
    Совпадение - 
    <mark>подсветка</mark>
    в темной теме.
  </p>
</body>
<!-- Мы меняем стиль mark в зависимости от темы через класс body.dark -->

Здесь:

• Мы используем класс dark на body.
• Переопределяем стили для mark только когда включена темная тема.
• Добиваемся хорошей читабельности и визуального баланса.

Примеры использования в реальных сценариях

Подсветка результатов поиска на странице

Один из самых частых сценариев — подсветка слова, которое пользователь ищет в тексте статьи.

Давайте разберемся на примере, который показывает минимальный вариант реализации с JavaScript:

<input id="query" placeholder="Введите слово для поиска">
<button id="search-btn">Найти</button>

<p id="text">
  Тег mark в HTML используют для подсветки текстовых фрагментов 
  в контексте поиска или текущей важности.
</p>

<script>
  // Находим элементы в DOM
  const input = document.getElementById('query');   // Поле ввода
  const button = document.getElementById('search-btn'); // Кнопка
  const textEl = document.getElementById('text');   // Абзац с текстом

  button.addEventListener('click', () => {
    // Сбрасываем предыдущие подсветки
    // innerText убирает теги, оставляя только текст
    const originalText = textEl.innerText; // Исходный текст без HTML
    const query = input.value.trim();      // Текст, который ищет пользователь

    if (!query) {
      textEl.textContent = originalText;   // Если запрос пустой - просто возвращаем текст
      return;
    }

    // Создаем регулярное выражение для поиска всех вхождений
    const regex = new RegExp(`(${query})`, 'gi'); // 'gi' - глобальный и без учета регистра

    // Заменяем найденные фрагменты на обернутые в <mark>
    const highlighted = originalText.replace(regex, '<mark>$1</mark>');

    // Вставляем HTML с подсветкой
    textEl.innerHTML = highlighted;
  });
</script>
<!-- Этот код показывает простейшую подсветку всех совпадений через mark -->

На что стоит обратить внимание:

• Мы используем innerText, чтобы очистить предыдущую подсветку и избежать «вложенных» mark.
• Через RegExp оборачиваем все совпадения в <mark>...</mark>.
• В реальном проекте важно еще экранировать спецсимволы и учитывать сложные случаи, но для понимания концепции этого примера достаточно.

Подсветка текущего шага инструкции

Тег mark можно использовать для обозначения «актуального шага» в инструкции, который сейчас выполняет пользователь.

<ol>
  <li><mark>Откройте настройки браузера</mark></li>
  <li>Перейдите в раздел Безопасность</li>
  <li>Включите нужную опцию</li>
</ol>
<!-- mark подсказывает, какой шаг сейчас выделен как актуальный -->

Позже вы можете программно менять, какой шаг обернут в mark, или хотя бы CSS-классами имитировать этот эффект.

Подсветка терминов в глоссарии

Представьте, что у вас есть глоссарий, и пользователь навел указатель мыши на какой-то термин в тексте. Можно временно подсветить этот термин в определении:

<p>
  В этом документе встречается термин HTTP.
  При наведении мы подсветим его в глоссарии.
</p>

<p id="glossary">
  HTTP - протокол передачи гипертекста.
</p>

<script>
  const glossary = document.getElementById('glossary'); // Определение
  const term = 'HTTP';                                  // Термин, который подсвечиваем

  // Имитация "наведения" - просто запустим подсветку через 1 секунду
  setTimeout(() => {
    const originalText = glossary.innerText; // Исходный текст
    const regex = new RegExp(`(${term})`, 'g'); // Ищем все вхождения термина

    const highlighted = originalText.replace(regex, '<mark>$1</mark>');

    glossary.innerHTML = highlighted; // Вставляем HTML с подсветкой
  }, 1000);
</script>
<!-- Здесь мы подсвечиваем термин "HTTP" в определении через секунду -->

Этот пример демонстрирует, как можно использовать mark динамически, в зависимости от действий пользователя.

Доступность (a11y) и UX

Как тег mark влияет на доступность

Тег mark добавляет семантический смысл, но не все экранные дикторы обрабатывают его одинаково. Часть из них может просто прочитать текст без указания на подсветку.

Несколько рекомендаций:

1. Не полагайтесь только на цвет подсветки.
2. Используйте дополнительные подсказки, например, title или пояснения перед блоком.
3. Следите за контрастностью текста и фона.

Пример с пояснением перед результатами:

<p>
  Ниже подсвечены совпадения с вашим запросом.
</p>

<p>
  Документ описывает 
  <mark title="Совпадение с запросом">HTML</mark> 
  и CSS.
</p>
<!-- Текст перед блоком помогает и для доступности, и для UX -->

Контрастность и цвет

Чтобы подсветка была не просто красивой, но и доступной, важно:

• Обеспечить достаточную контрастность между текстом и фоном.
• Учитывать пользователей с нарушениями цветового восприятия.

Например:

mark {
  background-color: #ffeb3b; /* Желтый фон */
  color: #000;               /* Черный текст дает хороший контраст */
}

Избегайте комбинаций вроде светло-серого текста на светло-желтом фоне — они часто плохо читаются.

Поведение в разных браузерах

Поддержка тега mark

Тег mark появился в HTML5 и сейчас поддерживается всеми современными браузерами:

• Chrome
• Firefox
• Safari
• Edge
• Мобильные браузеры на базе Chromium и WebKit

Обычно никаких полифиллов не требуется. В старых браузерах (вроде Internet Explorer до 9) mark будет восприниматься как неизвестный тег, но:

• Его содержимое все равно будет отображаться.
• Стили можно применить, если явно задать display: inline; в CSS.

Пример для очень старых окружений (часто уже не актуально, но полезно понимать принцип):

mark {
  background-color: yellow; /* Простой и заметный фон */
  color: black;             /* Контрастный текст */
  display: inline;          /* На случай, если браузер не знает про этот тег */
}

Лучшие практики использования тега mark

Используйте по назначению

Главное правило — используйте mark для подсветки текста, важного в текущем контексте, а не как «просто желтый фон».

Неправильно:

<p>
  Наш <mark>главный</mark> продукт.
</p>
<!-- Нет явного контекста, почему именно этот текст подсвечен -->

Правильно:

<p>
  По вашему запросу найден продукт 
  <mark>главный</mark>, 
  который чаще всего выбирают пользователи.
</p>
<!-- Слово "главный" связано с результатом поиска или фильтрации -->

Не злоупотребляйте

Если подсвечено почти все, то подсветка теряет смысл. Старайтесь:

• Ограничивать количество подсвеченных фрагментов.
• Подсвечивать только действительно релевантные части текста.
• Не использовать слишком агрессивные цвета, если подсветки много.

Обрабатывайте HTML-структуру аккуратно

Если вы автоматически вставляете mark через JavaScript, важно:

• Не «ломать» существующие теги.
• Не вкладывать mark в середину HTML-тегов.
• Не создавать вложенные mark друг в друга.

Хороший подход — работать не со всей разметкой целиком, а с отдельными текстовыми узлами, но это уже более продвинутая задача.

Заключение

Тег mark в HTML — это простой, но полезный инструмент для подсветки фрагментов текста с явной семантикой: «важно здесь и сейчас». В отличие от span, который не несет смысла сам по себе, mark сообщает браузеру и читателю кода, что этот фрагмент текста имеет особое значение в текущем контексте, например, является результатом поиска или совпадением с фильтром.

Вы можете свободно стилизовать mark через CSS, создавать разные типы подсветки, учитывать темные темы и требования доступности. В связке с JavaScript тег mark позволяет реализовать подсветку поисковых совпадений, выделение активного шага, акцентирование терминов и многие другие сценарии.

Главное — использовать этот тег по назначению: для контекстного выделения, а не просто ради эффектного визуального оформления. Тогда верстка останется семантичной и понятной как пользователям, так и поддерживающим разметку разработчикам.

Частозадаваемые технические вопросы

Как убрать подсветку mark по клику на кнопку

Можно просто удалить теги mark и оставить только текст. Один из способов — заменить innerHTML на innerText:

<button id="clear">Сбросить подсветку</button>
<p id="text">
  Здесь <mark>подсвеченное</mark> слово.
</p>

<script>
  const btn = document.getElementById('clear'); // Кнопка
  const p = document.getElementById('text');    // Абзац

  btn.addEventListener('click', () => {
    const plain = p.innerText;  // Получаем текст без тегов
    p.textContent = plain;      // Записываем обратно как чистый текст
  });
</script>

Так вы полностью убираете все теги mark внутри выбранного элемента.

Как подсветить только первое совпадение в тексте

Вместо флага g у регулярного выражения можно использовать replace без глобального совпадения:

const text = element.innerText;                 // Исходный текст
const query = 'HTML';                           // Что ищем
const regex = new RegExp(`(${query})`, 'i');    // Только первое совпадение

const result = text.replace(regex, '<mark>$1</mark>'); // Заменяем только один раз
element.innerHTML = result;                     // Вставляем HTML

Так заменится только первое вхождение в строке.

Как подсвечивать несколько разных слов разными цветами

Используйте разные классы для разных терминов и CSS-стили:

const mapping = {
  HTML: 'hit-html',   // Слово "HTML" - класс "hit-html"
  CSS: 'hit-css'      // Слово "CSS" - класс "hit-css"
};

let html = text; // Исходный текст

Object.entries(mapping).forEach(([word, cls]) => {
  const regex = new RegExp(`(${word})`, 'gi');        // Ищем все вхождения
  html = html.replace(regex, `<mark class="${cls}">$1</mark>`); // Оборачиваем
});

element.innerHTML = html; // Вставляем результат

Далее в CSS настраиваете разные стили для .hit-html и .hit-css.

Как избежать вложенных mark при повторной подсветке

Перед новой подсветкой удаляйте старые теги mark:

function removeMarks(root) {
  // Находим все элементы mark внутри корня
  const marks = root.querySelectorAll('mark');

  marks.forEach(mark => {
    const text = mark.textContent;     // Текст внутри mark
    mark.replaceWith(text);            // Заменяем элемент на текстовый узел
  });
}

// Использование
const container = document.getElementById('content'); // Корневой элемент
removeMarks(container);                               // Сначала убираем подсветку
// Потом уже заново добавляем нужные mark

Так вы не получите вложенные mark друг в друга.

Можно ли использовать mark внутри заголовков h1–h6

Да, можно. Это полезно, если вы подсвечиваете совпадения в заголовках при поиске по странице:

<h2>Введение в <mark>HTML</mark></h2>

Следите только за тем, чтобы не переборщить с подсветкой во всех заголовках сразу — это может сделать интерфейс визуально перегруженным.