От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли?
<p> <mark>Highlight</mark> text with HTML <mark> tag </p>
Стиль mark по умолчанию
Цвет фона mark по умолчанию — желтый.
<p> <mark>Default Yellow Highlight</mark> </p>
Пользовательские стили с помощью CSS
Конечно, как и любой текстовый тег HTML, вы может быть стилизован с помощью CSS. Вы можете представить это так же, как вы бы стилизовали тег <p>.
mark { background: red; color: white;
}
mark в сравнении с другими текстовыми тегами HTML
strong
strong используется для обозначения текста, который имеет более важное значение, чем окружающий текст, например, предупреждение или ошибка. Семантически это — важность. Отображается жирным.
b
b очень похож на strong, так как он также отображается жирным шрифтом. Однако, в отличие от него, он не обозначает важность, и это скорее стилистическая вещь, чем семантика.
em
em используется, чтобы акцентировать конкретное слова. Отображается курсивом.
mark
mark просто подчеркивает актуальность определенного фрагмента текста. До существования этого тега многие использовали em или strong для придания выделенному контенту некоторого семантического значения. Ну, больше можно этого не делать! Если вам нужно выделить текст, используйте этот тег.
Почему семантический HTML-тег важен
Причина, по которой вы не просто используете везде теги div, заключается в том, что они не являются семантическими. Возможно, вы похожи на меня, когда я впервые начал изучать программирование — кому нужна семантика? Неправильно. На самом деле, она нужна поисковым системам, таким как Google! Потому что семантика передает смысл о вашем сайте. Когда поисковые роботы просматривают сайт, благодаря ей, они узнают, что здесь происходит. Другими словами, это важно для SEO или поисковой оптимизации.
Другая причина, по которой семантика важна — это доступность. Многие инструменты специальных возможностей полагаются на семантику тегов, чтобы представить ваш сайт для пользователя, использующего его, например, с помощью программы чтения с экрана. Вот аналогия. Помните, те времена, когда появился компьютер, читающий текст с сайта. Это звучало супер странно. Без правильной семантики это так. Это работает, конечно — но опыт прослушивания ужасен. Однако, когда вы используете правильную семантику, это все равно что слушать Siri. Это звучит гораздо более по-человечески, потому что у нее в речи есть разные переходы, изменения высоты голоса, и она даже знает, когда нужно остановиться. И это тот же самый тип улучшения, которого вы можете достичь, используя семантически правильные теги HTML.
Теги HTML5 и SEO
Я хочу отметить еще одну вещь. Джон Мюллер из Google упомянул это в своем ответе в Twitter: Конечно, имеет смысл использовать HTML5 правильно, если вы можете, это точно не повредит SEO 
.
Вот что я понял из этой фразы. Независимо от того, используете ли вы теги HTML5, это не повлияет на ваше ранжирование в результатах поиска Google. Однако означает ли это, что вы не должны использовать теги HTML5. Вовсе нет! Преимущества доступности все еще актуальны. А некоторые теги HTML5 имеют очень интересное поведение в браузерах, и это предоставляет вашему пользователю более продвинутый функционал, чем раньше.
Проблемы доступности
Хорошо, надеюсь, я донес до вас важность семантических тегов HTML. И теперь вы можете понять, что mark не просто стилизует текст, но это семантически полезная вещь.
Но! Есть некоторые проблемы с доступностью. К сожалению, использование тега mark не объявляется большинством программ чтения с экрана в настройках по умолчанию. Но хорошие новости — есть способ обойти это. Вы можете использовать свойство CSS content и псевдо-элемент, чтобы создать объявление.
mark::before { content: " ";
}mark::after { content: " ";
}/* Hide the text created in the CSS content property */
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, он объявит «highlight start», затем зачитает текст внутри тега. А затем объявит «highlight end».
Но…
Обратите внимание: если у вас много таких «объявлений», они могут быть очень многословными и могут добавлять иногда раздражающую ненужную информацию. Что может заставить некоторых пользователей программы чтения с экрана отключать эту функцию. Итак, вывод такой. «С большой силой приходит большая ответственность». Не злоупотребляйте этой техникой и применяйте ее ТОЛЬКО в тех случаях, когда НЕзнание выделенного содержимого может отрицательно повлиять на понимание пользователя.
Примеры использования mark
Сейчас самое интересное! Давайте рассмотрим некоторые варианты использования для mark:
Вариант использования: Результат поиска
Вот популярный случай. Вы можете использовать тег, чтобы выделить термин, который искал пользователь.
<p>Search Result for "Vue"</p> <hr> <p><mark>Vue</mark> is an awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark></p>
Вариант использования: Цитаты
Здорово предоставлять подсветку для quotation (<q>) и block quote (<blockquote>).
<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>
Автор: Samantha Ming
Источник: https://medium.com
Редакция: Команда webformyself.