<mark> Элемент HTML mark

Элемент <mark> HTML представляет текст, который отмечен или выделен для справки или примечаний из-за значимости отмеченного фрагмента в окружающем контексте.

Попробуйте

<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>

mark {
  /* Add your styles here */
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

Типичные случаи использования <mark>:

• В цитате (<q>) или блочной цитате (<blockquote>) элемент обычно указывает на текст, который представляет особый интерес, но не был отмечен в исходном материале, либо на материал, требующий особого внимания, даже если исходный автор не считал его особенно важным. Это похоже на выделение интересующих фрагментов текста маркером в книге.
• В остальных случаях <mark> указывает на часть содержимого документа, которая, вероятно, имеет отношение к текущей задаче пользователя. Например, с его помощью можно отметить слова, совпавшие с поисковым запросом.
• Не используйте <mark> для подсветки синтаксиса; вместо этого используйте элемент <span> с соответствующими стилями CSS.

Доступность

Большинство программ экранного доступа в настройках по умолчанию не объявляют о наличии элемента mark. Это поведение можно изменить с помощью свойства CSS content вместе с псевдоэлементами ::before и ::after.

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [highlight start] ";
}

mark::after {
  content: " [highlight end] ";
}

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

• Настройка стилей текста, повторно — Adrian Roselli (2025)
• Краткое примечание о том, как сделать mark более доступным — Vispero (2017)

Примеры

Выделение интересующего текста

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

<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

Результат

Выделение фрагментов, важных в контексте

В этом примере показано, как с помощью <mark> отметить результаты поиска во фрагменте текста.

<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>

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

Результат

Техническая сводка

Спецификации

Совместимость с браузерами