От автора: Семантический HTML может помочь веб-дизайнерам и разработчикам передавать значения (смысл) не только в наглядном виде на странице, но еще и с помощью тегов и элементов, использованных для написания кода для данной страницы, тем самым улучшая доступность веб-ресурса, индексирование в поисковых системах и даже человеческое восприятие.
Как термин, семантика может обозначать науку, занимающуюся изучением значений (смыслов) в языке, или непосредственно сами языковые значения (смыслы). Если что-то является семантическим, то оно уже, по определению, обладает определенным значением (смыслом). Семантический HTML — это просто разметка, которая является более эффективной для передачи какого-то определенного значения (смысла).
Семантический HTML передает больше значения
Давайте в качестве примера рассмотрим разницу между элементом div и элементом header. Первый из них описывает универсальную группу блоков с контентом в HTML документе, в то время как последний более точно указывает на блок, который содержит вступительную информацию на странице и также может включать в себя элементы навигации.
|
1 2 |
<div id="top">Добро пожаловать</div> <header>Добро пожаловать</header> |
В браузере, с помощью таблицы стилей, есть возможность сделать данные элементы абсолютно идентичными внешне. Но когда на страницу зайдет поисковый робот или ее будет сканировать экранный диктор, то значимость семантики значительно повышается, поскольку и поисковый робот, и экранный диктор могут по-разному воспринимать эти два тега, определяя их весомость и ценность контента, содержащегося в них.
Важность применения семантики становится очевидной в случаях, когда разница в значении неочевидна или, когда использование какого-то тега должно содержать в себе определенное значение.
Элемент <s>
Элемент <s> создан для выделения контента, который больше не является релевантным, правильным или актуальным. Его можно использовать для отображения измененной цены товара/услуги на сайте, который занимается электронной коммерцией, или товара, не имеющегося в наличии, или просроченного/неактуального рекламного объявления.
|
1 2 3 4 5 6 |
<h1>Товар на продажу</h1> <p><s>Обычная цена $19.99</s> И только сейчас $9.99</p> <s>Поджаренный сэндвич с сыром</s> Нет в наличии (Распродан) <s>Трехспальные апартаменты за 1,000$ в месяц</s> |
Элемент <s> не следует использовать для выделения правок в документе, например, для выделения удаленного текста. По умолчанию контент, находящийся в элементе <s>, пересекает горизонтальная линия (перечеркивание).
Элементы <ins> и <del>
Элементы <ins> и <del> работают в паре, чтобы указывать на вставленные и удаленные текстовые элементы в HTML документе. Каждый из элементов имеет по два атрибута. Атрибут cite содержит в себе URL, указывающий на объяснение причины, по которой было произведено изменение. Атрибут datetime указывает на то, когда это изменение было произведено. По умолчанию, содержимое элемента del будет перечеркнуто, а у элемента ins — подчеркнуто.
|
1 2 3 4 5 6 7 8 9 |
<h1>Повестка дня</h1> <ul> <li>Обсуждение плана продаж</li> <li><del timestamp="2014-10-12T18/02-17/00">Обзор маркетинга за третий квартал</del></li> <li><ins cite="//sitepoint.com/change.html">Обзор маркетинга за третий квартал</ins></li> </ul> <p>Собрание состоится в <del>Четверг</del> <ins>Пятницу</ins> после обеда.</p> |
Элемент <cite>
Не стоит путать данный элемент с одноименным атрибутом для других тегов (например, ins и del). Элемент cite является самостоятельным тегом, представляющим ссылку (упоминание) на какую-нибудь творческую работу, например, статью, книгу, комикс, картину, стих, песню, видео или нечто похожее. Содержимым элемента cite должно быть название работы, на которую ссылается данный элемент, имя автора или художника, или URI на упомянутую работу.
|
1 2 |
<p>Мне действительно нравится статья Армандо <cite>Знакомство с импортом в HTML</cite>.</p> |
Элемент <q>
Указывает на короткий вставленный цитируемый материал. Элемент <q> включает одновременно необходимую пунктуацию (кавычки) и атрибут cite для указания URL. Важно запомнить, что тег <q> используется для цитат, вставленных прямо в текст, а элемент blockquote больше подходит для больших цитат, которые размещаются отдельно.
|
1 2 |
<p>Я был не в курсе этого, но согласно <cite>Ричарду Керру</cite>, <q cite="//www.sciencemag.org/content/340/6136/1031"> большинство миссий по отправке роботов на Марс были провалены</q>.</p> |
Элементы <abbr> и <dfn>
HTML элементы аббревиатура и определение часто используются вместе для отображения аббревиатуры или акронима, особенно, когда данная аббревиатура или акроним используется в длинном сложном техническом описании.
|
1 2 |
<p><dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn> — это международная некоммерческая организация, отвечающая за управления веб-адресами.</p> |
Когда браузеры, поисковые роботы или пользователи, которые решили посмотреть исходный код, увидят вышеприведенный пример, им станет понятно, что словосочетание «Internet Corporation for Assigned Names and Numbers» является расшифровкой акронима «ICANN». Также, в рамках стандарта, абзац, список или раздел, внутри которого расположен тег dfn, должен содержать соответствующее определение.
Элемент <code>
Элемент code предназначен для отображения отрывков компьютерного кода, который не должен быть выполнен, а скорее должен быть представлен в читабельном виде.
|
1 |
<p>В jQuery свойство <code>.attr()</code> возвращает значение атрибута, полученное от первого попадающего под условие элемента.</p> |
Элемент code также может быть использован вместе с элементом pre для оформления блоков с кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<pre><code> function loadAudio( object, url) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.responseType = 'arraybuffer'; request.onload = function() { context.decodeAudioData(request.response, function(buffer) { object.buffer = buffer; }); } request.send(); } |
Элемент <samp>
Используется для отображения отрывка текста, являющегося результатом вывода компьютерной системы, приложения или чего-то похожего. В качестве содержимого тега samp следует использовать цитату, полученную в результате взаимодействия с компьютером.
|
1 |
<p>Если загрузка прерывается, система выдает пользователям сообщение о том, что <samp>файл не был загружен</samp>.</p> |
Элемент <kbd>
Если дизайнер или разработчик хотят показать, что пользователю следует или следовало бы вводить на клавиатуре, то элемент kbd как раз явно (семантически) укажет на это. Например, элемент kbd можно использовать для описания нажатия определенной комбинации клавиш. Вложенные теги kbd характеризуют отдельную клавишу или элемент.
|
1 2 |
<p>Для того чтобы сделать скриншот на Macbook, одновременно нажмите <kbd>Shift</kbd>+<kbd>Control</kbd>+<kbd>Command</kbd>+<kbd>3</kbd>.</p> |
Элемент kbd также может быть использован для ввода с некоторых альтернатив клавиатуры, например, голосового ввода на мобильном устройстве.
Элемент <var>
Элемент var представляет переменную в контексте математики или компьютерного программирования.
|
1 2 3 4 |
<p><var>x</var> = 13</p> <p>Вторая переменная <var>pad</var> присвоена объекту pad. jQuery позволяет использовать подобный составной селектор.</p> |
Элемент <data>
Данный HTML элемент, вместе с атрибутом value, связывает некий контент с машинным представлением данного контента. В сущности, было бы хорошо использовать элемент data в связке со скриптом. Самый простой пример — это передача числового значения слова «одиннадцать».
|
1 |
<data value="11">одиннадцать</data> |
Также этот тег можно использовать и для более сложных ситуаций. В следующем примере стандартный международный номер книги (англ. International Standard Book Number, ISBN) ассоциирован с каждым названием книги.
|
1 2 3 4 |
<ul> <li><data value="978-0987467423">Быстрый старт в Rails</data></li> <li><data value="978-0992279455 ">AngularJS: от новичка до профи</data></li> </ul> |
Элемент <time>
Также, как и элемент data, элемент time можно использовать для передачи даты и времени, переведенных в машинное представление, и связанного с ними контента.
|
1 2 |
<p>Она родилась в День Рождения своей бабушки, <time datetime="2014-10-22 19:00">22 октября 2014 года</time>.</p> |
Аурелио (Aurelio) подробно рассматривает элемент time в своей статье (перевод статьи) на сайте SitePoint.
Элементы <ruby>, <rt> и <rp>
«Рубиновые» аннотации (прим. пер.: «рубин» — небольшой шрифт в издательском деле) — это короткие отрывки текста, служащие подсказкой по произношению для таких языков, как японский, корейский или китайский.
В HTML именно элемент ruby позволяет добавлять «рубиновые» аннотации. Чаще всего эти фонетические подсказки отображаются в виде надстрочного индекса над соответствующим символом (иероглифом).
Элемент ruby часто используют вместе с элементом rt, который описывает произношение отдельного символа в «рубиновой» аннотации, а также с элементом rp, который используется для отображения пунктуации в браузерах, не поддерживающих «рубиновые» аннотации.
Сообщество WHATWG (англ. The Web Hypertext Application Technology Working Group — рабочая группа по технологиям гипертекстовых веб-приложений) приводит несколько замечательных примеров использования «рубиновых» аннотаций, включая следующий:
|
1 2 |
<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby> は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。 |
Чтобы лучше понять данный пример, рассмотрите первую «рубиновую» аннотацию.
|
1 |
<ruby>君<rt>くん</ruby> |
Если все будет правильно отображено, то символы, идущие после тега rt, くん, должны появиться в виде надстрочного индекса над иероглифом 君. Если бы потребовалось обеспечить совместимость со старыми версиями браузеров, то элемент rp обеспечил бы дополнительную пунктуацию.
|
1 |
<ruby>君<rp>(</rp><rt>くん </rt><rp>)</rp></ruby> |
В данном примере браузеры, не поддерживающие «рубиновые» аннотации отобразят произношение иероглифа в скобках, т.е. вот так: 君(くん ).
Элементы <sup> и <sub>
Элементы sup и sub, отвечающие соответственно за надстрочный и подстрочный индексы, созданы в соответствии с «типографскими традициями», и их не следует использовать просто для создания надстрочного или подстрочного эффекта, который можно также создать с помощью CSS и тега span.
Пожалуй, самыми распространенными примерами использования данных тегов являются французские аббревиатуры, в которых обычно используется надстрочный индекс. В частности, французское слово «компания» (фр. compagnie, англ. company) очень часто сокращается до вида Cie.
|
1 |
<span lang="fr"><abbr>C<sup>ie</sup></abbr></span> |
Элемент <mark>
Если бы в HTML был большой желтый маркер, то им бы стал элемент mark. Данный тег выделяет (подсвечивает) контент, который имеет значимость в определенном контексте. Например, если бы нужно было в какой-то части документа показать определенное ключевое слово, соответствующее поисковому запросу, то использование элемента mark было бы правильным решением в данном случае. В следующем примере производился поиск слова «audio» в исходном тексте.
|
1 2 3 4 5 6 7 |
<p>Web <mark>Audio</mark> uses an <mark>Audio</mark>Context interface to represent <mark>Audio</mark>Nodes. Within the <mark>Audio</mark>Context an <mark>audio</mark> file, as an example, is connected to a processing node, which in turn, is connected to a destination like the speakers on your laptop. Each node in the <mark>Audio</mark>Context is modular so that a web developer can plug (or unplug) nodes like a toddler snapping Lego blocks in place to build relatively more complicated structures.</p> |
В элементе blockquote, элемент mark можно использовать для добавления акцента, отсутствующего в исходном контексте.
|
1 |
<blockquote>Я включил в проект JavaScript библиотеку jQuery, используя сеть доставки контента от Google. <mark>jQuery ни в коем случае не является необходимой</mark> для инструмента Web Audio API, но мощные селекторы данной библиотеки значительно упростят взаимодействие с HMTL. Я также подключаю локальный JavaScript файл, в котором содержится код для работы с Web Audio API.</blockquote> |
Элемент <wbr>
Браузеры (на компьютерах или на смартфонах) имеют определенный набор правил, чтобы определять где и когда добавлять разрыв строки в документе. Эти правила особенно важны в отзывчивом дизайне, поскольку ширина заданного элемента на странице может очень сильно меняться в зависимости от контекста.
Тег wbr описывает перенос слов или разрыв строки там, где обычно браузер не предпримет никаких действий. Эта возможность может быть очень полезной для очень длинных слов, URL-адресов или блоков с кодом. Подобные длинные элементы, которые обычно не разбиваются на части, могут повлиять на разметку страницы.
В США, имя углохвостого спинорога на гавайском языке состоит из 21 буквы: humuhumunukunukuapua`a. Используя тег wbr, мы бы могли сообщить браузеру, как разбить данное слово по слогам.
|
1 |
humu<wbr>humu<wbr>nuku<wbr>nuku<wbr>a<wbr>pua`a |
Заключение
HTML имеет в своем арсенале много замечательных семантических тегов, предоставляя веб-разработчикам возможность передавать значения (смысл) прямо в самих элементах. Не все элементы обладают доступностью и другими преимуществами, но даже и без этого они могут сделать код более читабельным с точки зрения разработчика. Считаете ли вы полезными данные элементы? Поделитесь своими мыслями в комментариях.
Примечание редактора: мы собрали все вышеприведенные отрывки кода в один демо-пример на сайте CodePen. В демо-примере используются исходные стили, содержащиеся в инструменте Normalize.css:
