В большинстве случаев мы используем тег span для выделения нужных слов или частей текста, присваивая ему необходимые CSS стили. Но не все знают, что для подобных случаев потребуется использование специального HTML-тега mark.
Он представляет собой аналог желтого маркера и является семантически более правильным вариантом для создания визуальных акцентов в тексте. Этот тег появился после выхода HTML5 и обладает более широкими возможностями.
Дефолтные стили HTML-тега mark
По умолчанию он окрашивает фон текста в желтый цвет.
<mark>Выделенный текст</mark>
Кастомные стили с помощью CSS
HTML-тегу mark можно задавать и пользовательские CSS стили. В этом плане он ничем не отличается от множества других тегов.
mark {
background: red;
color: white;
}
Отличия mark от других подобных HTML-тегов
- strong: применяется для выделения элементов текста жирным шрифтом с целью придания им большей семантической важности, чем окружающий их текст (предупреждения или ошибки);
- b: как и strong, он тоже выделяет текст жирным шрифтом, но никакого семантического значения тексту не придает, а обладает больше стилистическим характером;
- em: его цель — выделение определенных слов курсивом;
- mark: придает актуальность выделенным фрагментам текста.
До выхода HTML5 для подобных целей чаще всего применялся em или strong, чтобы придать семантическое значение выделяемому контенту. Но не более! Если имеется необходимость выделения фрагментов текста, то mark является лучшим вариантом.
Почему mark имеет семантическую важность
Причина, по которой тег <div> применяется не везде, заключается в том, что он не несет в себе никакой семантики. Несмотря на это, многие новички вообще не стараются делать верстку семантически правильной, считая это не важным.
На самом деле это важный аспект и такие поисковые системы, как Google, учитывают этот момент при анализе сайта. Правильная семантика позволяет поисковикам получить максимально подробную и правильную информацию для ранжирования. Это необходимо для правильной настройки SEO и поисковой оптимизации.
Еще одна причина соблюдать семантику при верстке — доступность. В основе многих инструментов доступности лежит именно семантика тегов, чтобы сделать контент более удобным для пользователя. Например, для скринридеров.
Отказ от семантики делает впечатление от прослушивания информации на сайтах просто ужасным. Если же делать все правильно, то это становится похожим на прослушивание с помощью системы Siri. В этом случае все звучит более человечно благодаря присутствию соответствующей интонации, изменению громкости звука и правильному распределению пауз. И все это можно обеспечить просто при использовании семантически правильной структуры, в том числе правильных HTML-тегов, таких как mark.
Семантическая разметка HTML5 и SEO
Здесь стоит сразу отметить одну важную вещь — высказывание представителя Google Джона Мюллера в Twitter:
Безусловно, правильное использование тегов HTML5 имеет смысл, если это возможно, в этом нет недостатков для SEO.
Тем не менее, он также считает, что отклонение от стандартов HTML5 не повредит ранжированию сайта в поисковиках. Стоит ли в этом случае соблюдать семантику? Однозначно, да! Преимущества доступности еще никто не отменял. Некоторые теги действительно интересно ведут себя в браузере, обеспечивая для пользователей более продвинутые функции, недоступные ранее.
Проблемы доступности
После обсуждения важности использования семантических тегов можно с уверенностью сказать, что mark — это не просто способ стилизации текста, а семантически важная вещь.
Но определенная озабоченность в отношении его доступности все же имеется. Проблема заключается в дефолтных настройках большинства программ для чтения с экрана, в которых использование HTML-тега mark не установлено. Но существует и способ обойти эту проблему. Для этого можно использовать псевдоэлементы.
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;
}Как в таком случае поведет себя программа чтения с экрана? Когда она дойдет до текста с оберткой из HTML-тега mark, она объявит о «начале выделения». Затем последует чтение текста внутри тега, а потом — объявление о «конце выделения».
Но злоупотреблять этим тегом тоже не стоит. Большое количество подобных «объявлений», которые могут быть очень подробными, зачастую несут раздражающую и ненужную пользователю информацию. Из-за этого некоторые пользователи отключают эту функцию.
Не стоит злоупотреблять подобными выделениями. Лучше использовать их только тогда, когда выделяемый контент действительно несет важную для пользователя информацию.
Примеры использования mark
Какие существуют варианты применения этого тега?
Например, его стоит применять при выводе результатов поиска, выделяя информацию, которую искал пользователь. Еще один из вариантов использования mark — цитаты.
Поддержка HTML-тега mark браузерами
Поддержка браузерами HTML-тега mark на момент публикации статьи уже достаточно неплохая. Все основные браузеры поддерживают его, даже Internet Explorer, начиная с 9 версии.
