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

08.01.2021

5 мин.

Содержание скрыть

1 Тег mark в HTML: дефолтные стили
2 Кастомные стили с помощью CSS
3 Отличия mark от других подобных HTML-тегов
4 Почему mark имеет семантическую важность
5 Семантическая разметка и SEO
6 Проблемы доступности
7 Примеры использования mark
8 Тег mark в HTML: кроссбраузерность

Почему для выделения фона текста лучше использовать тег mark в HTML? Он несет в себе большее семантическое значение по сравнению с таким тегом как span Многие верстальщики применяют его для выделения важных элементов в тексте, добавляя необходимые CSS стили.

Тег mark в HTML: дефолтные стили

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

<mark>Выделенный текст</mark>

Кастомные стили с помощью CSS

Тег mark в HTML можно задавать и пользовательские CSS стили. В этом плане он ничем не отличается от множества других тегов.

mark { 
    background: red; 
    color: white; 
}

Отличия mark от других подобных HTML-тегов

strong: применяется для выделения элементов текста жирным шрифтом с целью придания им большей семантической важности, чем окружающий их текст (предупреждения или ошибки);
b: как и strong, он тоже выделяет текст жирным шрифтом, но никакого семантического значения тексту не придает, а обладает больше стилистическим характером;
em: его цель — выделение определённых слов курсивом;
mark: придаёт актуальность выделенным фрагментам текста.

До выхода HTML5 для подобных целей чаще всего применялся em или strong, чтобы придать семантическое значение выделяемому контенту. Но не более! Если имеется необходимость выделения фрагментов текста, то mark является лучшим вариантом.

Почему mark имеет семантическую важность

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

Ещё одна причина соблюдать семантику при вёрстке — доступность. В основе многих инструментов доступности лежит именно семантика тегов, чтобы сделать контент более удобным для пользователя. Например, для скринридеров.

Отказ от семантики делает впечатление от прослушивания информации на сайтах просто ужасным. Если же делать всё правильно, то это становится похожим на прослушивание с помощью системы Siri. В этом случае всё звучит более человечно. Это обеспечивает присутствие соответствующей интонации, изменению громкости звука и правильному распределению пауз. И все это можно обеспечить просто при использовании семантически правильной структуры, в том числе правильных HTML-тегов, таких как mark.

Семантическая разметка и SEO

Здесь стоит сразу отметить одну важную вещь — высказывание представителя Google Джона Мюллера в Twitter:

Безусловно, правильное использование тегов HTML5 имеет смысл, если это возможно, в этом нет недостатков для SEO.

Тем не менее, он также считает, что отклонение от стандартов HTML5 не повредит ранжированию сайта в поисковиках. Стоит ли в этом случае соблюдать семантику? Однозначно, да! Преимущества доступности ещё никто не отменял. Некоторые теги действительно интересно ведут себя в браузере, обеспечивая для пользователей более продвинутые функции, недоступные ранее.

Читать также: Как изменить стили элемента с помощью свойства Element.style в JavaScript.

Проблемы доступности

Можно с уверенностью сказать, что mark — это не просто способ стилизации текста, а семантически важная вещь.

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

mark::before { 
    content: "[Начало выделенного текста]"; 
} 

mark::after { 
    content: "[Конец выделенного текста]"; 
} 

// Скрытие текста в свойстве content
mark::before, 
mark::after { 
    clip-path: inset(100%); 
    clip: rect(1px, 1px, 1px, 1px); 
    height: 1px; 
    white-space: nowrap;
    width: 1px; 
    overflow: hidden; 
    position: absolute; 
}

Как в таком случае поведёт себя программа чтения с экрана? Когда она дойдет до текста с обёрткой, имеющей тег mark в HTML, она объявит о «начале выделения». Затем последует чтение текста внутри тега, а потом — объявление о «конце выделения».

Но злоупотреблять этим тегом тоже не стоит. Большое количество подобных «объявлений», которые могут быть очень подробными, зачастую несут раздражающую и ненужную пользователю информацию. Из-за этого некоторые пользователи отключают эту функцию. Не стоит злоупотреблять подобными выделениями. Лучше использовать их только тогда, когда выделяемый контент действительно несет важную для пользователя информацию.

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

Какие существуют варианты применения этого тега?

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