<mark>: Элемент текста <mark>

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

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

Типичные случаи использования <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] ";
}

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

• Краткое замечание о повышении доступности вашей метки | The Paciello Group
• Настройка стилей текстового уровня | Adrian Roselli

В этом первом примере элемент <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".

Результат