<mark>

Тег <mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют <mark> жёлтый фоновый цвет #ffff00 (yellow), похожий на выделение канцелярским маркером.

        
          
          <p>  Мы можем предложить вам на выбор  преимущественно <mark>чёрных</mark>,  <mark>белых</mark> или <mark>серых</mark>  котов. Также обратите внимание  на <mark>черепаховую</mark> кошку,  которую сложно определить  в одну из этих категорий.</p>
          <p>
  Мы можем предложить вам на выбор
  преимущественно <mark>чёрных</mark>,
  <mark>белых</mark> или <mark>серых</mark>
  котов. Также обратите внимание
  на <mark>черепаховую</mark> кошку,
  которую сложно определить
  в одну из этих категорий.
</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере при помощи <mark> выделены все прилагательные.

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

В цитатах <mark> помогает подсветить то, на что автор основного текста хочет обратить внимание.

Можно реализовать текстовый поиск, выделяя цветом найденные фрагменты.

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

Чтобы тег в текущей реализации стал более доступным, нужно задействовать магию CSS — псевдоэлементы ::before, ::after и свойство content.

        
          
          mark::before {  content: " [начало выделения] ";}mark::after {  content: " [конец выделения] ";}
          mark::before {
  content: " [начало выделения] ";
}

mark::after {
  content: " [конец выделения] ";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Если поддерживаете режим высокой контрастности в Windows, не забудьте задать <mark> системный цвет с помощью значения forced-colors у директивы @media. Благодаря этому цвет выделения заменится на системный и будет таким же контрастным, как остальные цвета.

        
          
          @media (forced-colors: active) {  mark {    color: HighlightText;    background-color: Highlight;  }}
          @media (forced-colors: active) {
  mark {
    color: HighlightText;
    background-color: Highlight;
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать