20 HTML элементов, улучшающих семантику текста

20 HTML элементов, улучшающих семантику текста

От автора: Семантический HTML может помочь веб-дизайнерам и разработчикам передавать значения (смысл) не только в наглядном виде на странице, но еще и с помощью тегов и элементов, использованных для написания кода для данной страницы, тем самым улучшая доступность веб-ресурса, индексирование в поисковых системах и даже человеческое восприятие.

Как термин, семантика может обозначать науку, занимающуюся изучением значений (смыслов) в языке, или непосредственно сами языковые значения (смыслы). Если что-то является семантическим, то оно уже, по определению, обладает определенным значением (смыслом). Семантический HTML — это просто разметка, которая является более эффективной для передачи какого-то определенного значения (смысла).

Семантический HTML передает больше значения

Давайте в качестве примера рассмотрим разницу между элементом div и элементом header. Первый из них описывает универсальную группу блоков с контентом в HTML документе, в то время как последний более точно указывает на блок, который содержит вступительную информацию на странице и также может включать в себя элементы навигации.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Важность применения семантики становится очевидной в случаях, когда разница в значении неочевидна или, когда использование какого-то тега должно содержать в себе определенное значение.

Элемент <s>

Элемент <s> создан для выделения контента, который больше не является релевантным, правильным или актуальным. Его можно использовать для отображения измененной цены товара/услуги на сайте, который занимается электронной коммерцией, или товара, не имеющегося в наличии, или просроченного/неактуального рекламного объявления.

Элемент <s> не следует использовать для выделения правок в документе, например, для выделения удаленного текста. По умолчанию контент, находящийся в элементе <s>, пересекает горизонтальная линия (перечеркивание).

Элементы <ins> и <del>

Элементы <ins> и <del> работают в паре, чтобы указывать на вставленные и удаленные текстовые элементы в HTML документе. Каждый из элементов имеет по два атрибута. Атрибут cite содержит в себе URL, указывающий на объяснение причины, по которой было произведено изменение. Атрибут datetime указывает на то, когда это изменение было произведено. По умолчанию, содержимое элемента del будет перечеркнуто, а у элемента ins — подчеркнуто.

Элемент <cite>

Не стоит путать данный элемент с одноименным атрибутом для других тегов (например, ins и del). Элемент cite является самостоятельным тегом, представляющим ссылку (упоминание) на какую-нибудь творческую работу, например, статью, книгу, комикс, картину, стих, песню, видео или нечто похожее. Содержимым элемента cite должно быть название работы, на которую ссылается данный элемент, имя автора или художника, или URI на упомянутую работу.

Элемент <q>

Указывает на короткий вставленный цитируемый материал. Элемент <q> включает одновременно необходимую пунктуацию (кавычки) и атрибут cite для указания URL. Важно запомнить, что тег <q> используется для цитат, вставленных прямо в текст, а элемент blockquote больше подходит для больших цитат, которые размещаются отдельно.

Элементы <abbr> и <dfn>

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

Когда браузеры, поисковые роботы или пользователи, которые решили посмотреть исходный код, увидят вышеприведенный пример, им станет понятно, что словосочетание «Internet Corporation for Assigned Names and Numbers» является расшифровкой акронима «ICANN». Также, в рамках стандарта, абзац, список или раздел, внутри которого расположен тег dfn, должен содержать соответствующее определение.

Элемент <code>

Элемент code предназначен для отображения отрывков компьютерного кода, который не должен быть выполнен, а скорее должен быть представлен в читабельном виде.

Элемент code также может быть использован вместе с элементом pre для оформления блоков с кодом.

Элемент <samp>

Используется для отображения отрывка текста, являющегося результатом вывода компьютерной системы, приложения или чего-то похожего. В качестве содержимого тега samp следует использовать цитату, полученную в результате взаимодействия с компьютером.

Элемент <kbd>

Если дизайнер или разработчик хотят показать, что пользователю следует или следовало бы вводить на клавиатуре, то элемент kbd как раз явно (семантически) укажет на это. Например, элемент kbd можно использовать для описания нажатия определенной комбинации клавиш. Вложенные теги kbd характеризуют отдельную клавишу или элемент.

Элемент kbd также может быть использован для ввода с некоторых альтернатив клавиатуры, например, голосового ввода на мобильном устройстве.

Элемент <var>

Элемент var представляет переменную в контексте математики или компьютерного программирования.

Элемент <data>

Данный HTML элемент, вместе с атрибутом value, связывает некий контент с машинным представлением данного контента. В сущности, было бы хорошо использовать элемент data в связке со скриптом. Самый простой пример — это передача числового значения слова «одиннадцать».

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Также этот тег можно использовать и для более сложных ситуаций. В следующем примере стандартный международный номер книги (англ. International Standard Book Number, ISBN) ассоциирован с каждым названием книги.

Элемент <time>

Также, как и элемент data, элемент time можно использовать для передачи даты и времени, переведенных в машинное представление, и связанного с ними контента.

Аурелио (Aurelio) подробно рассматривает элемент time в своей статье (перевод статьи) на сайте SitePoint.

Элементы <ruby>, <rt> и <rp>

«Рубиновые» аннотации (прим. пер.: «рубин» — небольшой шрифт в издательском деле) — это короткие отрывки текста, служащие подсказкой по произношению для таких языков, как японский, корейский или китайский.

В HTML именно элемент ruby позволяет добавлять «рубиновые» аннотации. Чаще всего эти фонетические подсказки отображаются в виде надстрочного индекса над соответствующим символом (иероглифом).

Элемент ruby часто используют вместе с элементом rt, который описывает произношение отдельного символа в «рубиновой» аннотации, а также с элементом rp, который используется для отображения пунктуации в браузерах, не поддерживающих «рубиновые» аннотации.

Сообщество WHATWG (англ. The Web Hypertext Application Technology Working Group — рабочая группа по технологиям гипертекстовых веб-приложений) приводит несколько замечательных примеров использования «рубиновых» аннотаций, включая следующий:

Чтобы лучше понять данный пример, рассмотрите первую «рубиновую» аннотацию.

Если все будет правильно отображено, то символы, идущие после тега rt, くん, должны появиться в виде надстрочного индекса над иероглифом 君. Если бы потребовалось обеспечить совместимость со старыми версиями браузеров, то элемент rp обеспечил бы дополнительную пунктуацию.

В данном примере браузеры, не поддерживающие «рубиновые» аннотации отобразят произношение иероглифа в скобках, т.е. вот так: 君(くん ).

Элементы <sup> и <sub>

Элементы sup и sub, отвечающие соответственно за надстрочный и подстрочный индексы, созданы в соответствии с «типографскими традициями», и их не следует использовать просто для создания надстрочного или подстрочного эффекта, который можно также создать с помощью CSS и тега span.

Пожалуй, самыми распространенными примерами использования данных тегов являются французские аббревиатуры, в которых обычно используется надстрочный индекс. В частности, французское слово «компания» (фр. compagnie, англ. company) очень часто сокращается до вида Cie.

Элемент <mark>

Если бы в HTML был большой желтый маркер, то им бы стал элемент mark. Данный тег выделяет (подсвечивает) контент, который имеет значимость в определенном контексте. Например, если бы нужно было в какой-то части документа показать определенное ключевое слово, соответствующее поисковому запросу, то использование элемента mark было бы правильным решением в данном случае. В следующем примере производился поиск слова «audio» в исходном тексте.

В элементе blockquote, элемент mark можно использовать для добавления акцента, отсутствующего в исходном контексте.

Элемент <wbr>

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

Тег wbr описывает перенос слов или разрыв строки там, где обычно браузер не предпримет никаких действий. Эта возможность может быть очень полезной для очень длинных слов, URL-адресов или блоков с кодом. Подобные длинные элементы, которые обычно не разбиваются на части, могут повлиять на разметку страницы.

В США, имя углохвостого спинорога на гавайском языке состоит из 21 буквы: humuhumunukunukuapua`a. Используя тег wbr, мы бы могли сообщить браузеру, как разбить данное слово по слогам.

Заключение

HTML имеет в своем арсенале много замечательных семантических тегов, предоставляя веб-разработчикам возможность передавать значения (смысл) прямо в самих элементах. Не все элементы обладают доступностью и другими преимуществами, но даже и без этого они могут сделать код более читабельным с точки зрения разработчика. Считаете ли вы полезными данные элементы? Поделитесь своими мыслями в комментариях.

Примечание редактора: мы собрали все вышеприведенные отрывки кода в один демо-пример на сайте CodePen. В демо-примере используются исходные стили, содержащиеся в инструменте Normalize.css:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree