-
1
Дефолтные стили HTML-тега mark -
2
Кастомные стили с помощью CSS -
3
Отличия mark от других подобных HTML-тегов -
4
Почему mark имеет семантическую важность -
5
Семантическая разметка HTML5 и SEO -
6
Проблемы доступности -
7
Примеры использования mark -
8
Поддержка HTML-тега mark браузерами
В большинстве случаев мы используем тег span для выделения нужных слов или частей текста, присваивая ему необходимые CSS стили. Но не все знают, что для подобных случаев потребуется использование специального HTML-тега mark.
Он представляет собой аналог желтого маркера и является семантически более правильным вариантом для создания визуальных акцентов в тексте. Этот тег появился после выхода HTML5 и обладает более широкими возможностями.
По умолчанию он окрашивает фон текста в желтый цвет.
<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 версии.
The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosing context.
Try it
Attributes
This element only includes the global attributes.
Usage notes
Typical use cases for <mark> include:
- When used in a quotation (
<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn’t think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest. - Otherwise,
<mark>indicates a portion of the document’s content which is likely to be relevant to the user’s current activity. This might be used, for example, to indicate the words that matched a search operation. - Don’t use
<mark>for syntax highlighting purposes; instead, use the<span>element with appropriate CSS applied to it.
Note: Don’t confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance.
Examples
Marking text of interest
In this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user.
<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>
The resulting output looks like this:
Identifying context-sensitive passages
This example demonstrates using <mark> to mark search results within a passage.
<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>
To help distinguish the use of <mark> for search results from other potential usage, this example applies the custom class "match" to each match.
The results look like this:
Accessibility concerns
The presence of the mark element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.
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] ";
}
Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding.
- Short note on making your mark (more accessible) | The Paciello Group
- Tweaking Text Level Styles | Adrian Roselli
Technical summary
| Content categories |
Flow content, phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement |
Specifications
| Specification |
|---|
| HTML Standard # the-mark-element |
Browser compatibility
BCD tables only load in the browser
От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли?
|
<p> <mark>Highlight</mark> text with HTML <mark> tag </p> |
Стиль mark по умолчанию
Цвет фона mark по умолчанию — желтый.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
|
<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 и CSS3
Узнать подробнее
Вот что я понял из этой фразы. Независимо от того, используете ли вы теги HTML5, это не повлияет на ваше ранжирование в результатах поиска Google. Однако означает ли это, что вы не должны использовать теги HTML5. Вовсе нет! Преимущества доступности все еще актуальны. А некоторые теги HTML5 имеют очень интересное поведение в браузерах, и это предоставляет вашему пользователю более продвинутый функционал, чем раньше.
Проблемы доступности
Хорошо, надеюсь, я донес до вас важность семантических тегов HTML. И теперь вы можете понять, что mark не просто стилизует текст, но это семантически полезная вещь.
Но! Есть некоторые проблемы с доступностью. К сожалению, использование тега mark не объявляется большинством программ чтения с экрана в настройках по умолчанию. Но хорошие новости — есть способ обойти это. Вы можете использовать свойство CSS content и псевдо-элемент, чтобы создать объявление.
|
mark::before { content: » [highlight start] «; }mark::after { content: » [highlight end] «; }/* 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
Источник: //medium.com
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!
Смотреть