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

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

Термин “семантика” связан с пониманием языка. Если что-то более семантично - по определению, оно несёт больший смысл. Семантичный HTML - это разметка, которая более эффективна как средство коммуникации, так как она лучше передаёт намерения.

Семантичный HTML передаёт больше смысла

Рассмотрим в качестве примера разницу между элементами <div> и <header>. Первый описывает общую группу блочного содержимого в HTML документе, тогда как второй конкретизирует, что данный блок несёт в себе вводное содержимое, и возможно включает в себя элементы навигации.

<div id="top">Добро пожаловать</div>
<header>Добро пожаловать</header>

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

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

Элемент <s>

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

<h1>Распродажа</h1>
<p><s>Обычная цена $19.99</s> Сейчас $9.99</p>

<s>Сэндвич с жареным сыром</s> Распродан

<s>Номер с тремя спальнями $1,000 в месяц</s>

Элемент <s> не должен использоваться для указания правок в документе, вроде удалённого текста. Элемент <s> перечёркивает текст по умолчанию.

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

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

По умолчанию содержимое тега <del> будет выводиться перечёркнутым, тогда как содержимое текста <ins> помечается подчёркиванием.

<h1>Повестка дня</h1>

<ul>
    <li>Обсудить планы продаж</li>
    <li><del timestamp="2014-10-12T18/02-17/00">Обозреть Q3 Маркетинг</del></li>
    <li><ins cite="//sitepoint.com/change.html">Обозреть Q3 Маркетинг</ins></li>
</ul>

<p>Собрание будет вечером в <del>Четверг</del> <ins>Пятницу</ins>.</p>

Элемент <cite>

Кроме атрибутов cite у вышеперечисленных тегов <ins> и <del>, элемент <cite> является самостоятельным тегом, представляющим отсылку на чью-то работу или статью, книгу, комикс, рисунок, стих, песню, видеоролик или подобное.

Содержимое элемента <cite> должно быть названием работы, на которую ссылается этот элемент, имя автора или художника, или URI на соответствующую работу.

<p>Мне действительно нравится статья Армандо,
<cite>Введение в импорт HTML</cite>.</p>

Элемент <q>

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

<p>I had not been aware, but according to <cite>Richard Kerr</cite>,
<q cite="//www.sciencemag.org/content/340/6136/1031">Most robotic
missions to Mars have failed</q>.</p>

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

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

<p>The <dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn>
is an international, not-for-profit organization responsible for managing web addresses.</p>

В приведённом примере браузеры, поисковые роботы и люди, глядя на разметку распознают, что “Internet Corporation for Assigned Names and Numbers” - это определяемая фраза, а “ICANN” - это акроним к этой фразе. Также, согласно стандарту, параграф, список или раздел, включающий тег <dfn> также должны включать и связанное определение.

Элемент <code>

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

<p>In jQuery, <code>.attr()</code> retrieves the value of an attribute of the
first element in the matching set of elements.</p>

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

<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();
}
</code></pre>

Элемент <samp>

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

<p>If the upload fails, the system will notify the users that
<samp>the file was not uploaded</samp>.</p>

Элемент <kbd>

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

<p>To capture an image of the screen on a Macbook, simultaneously press
<kbd>Shift</kbd>+<kbd>Control</kbd>+<kbd>Command</kbd>+<kbd>3</kbd>.</p>

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

Элемент <var>

Элемент <var> представляет переменную в контексте математического выражения или программного кода.

<p><var>x</var> = 13</p>

<p>A second variable, <var>pad</var>, is assigned to the pad element object.
jQuery allows for this sort of concatenated selector.</p>

Элемент <data>

Этот HTML, элемент, наряду с атрибутом value, ассоциирует некое содержимое с машинно-читаемым переводом этого содержимого. Элемент <data> предназначен для использования в сочетании со скриптами.

Вот очень простой пример, указывается числовое представление слова “одиннадцать”.

<data value="11">одиннадцать</data>

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

<ul>
    <li><data value="978-0987467423">Jump Start Rails</data></li>
    <li><data value="978-0992279455 ">AngularJS: Novice to Ninja </data></li>
</ul>

Элемент <time>

Похожий на элемент <data>, элемент <time> может быть использован для указания машинно-читаемой информации о дате и времени.

<p>She was born on her grandpa's birthday,
<time datetime="2014-10-22 19:00">October 22, 2014</time>.</p>

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

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

Элемент <ruby> в HTML - это способ добавить Ruby-аннотацию. Зачастую такие подсказки к произношению отображаются в виде надстрочного текста над соответствующим символом.

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

У рабочей группы, занимающейся развитием веб-технологий, основанных на гипертекстовых приложениях (WHATWG), есть несколько великолепных примеров Ruby-аннотаций, включая и следующий:

<ruby>?<rt>??</ruby><ruby>?<rt>?</ruby>
?<ruby>?<rt>?</ruby>??<ruby>?<rt>??</ruby>???

Чтобы лучше понять пример, рассмотрим первую аннотацию:

<ruby>?<rt>??</ruby>

При правильном отображении, символы после тега <rt> (??), будут отображены над символом ?.

Если кто-то захочет позаботиться о совместимости со старыми браузерами, с помощью элемента <rp> можно добавить запасной вариант отображения.

<ruby>?<rp>(</rp><rt>?? </rt><rp>)</rp></ruby>

В данном примере браузеры, которые не поддерживают Ruby-аннотации, отобразят произношение символа в скобках, ?(?? )

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

Представляющие надстрочное и подстрочное написание элементы <sup> и <sub> обозначают “типографские соглашения”, и не должны использоваться просто как копия соответствующих CSS правил.

Возможно, наиболее распространённый пример использования этих тегов - французские сокращения, в которых обычно используются надстрочное начертание. Конкретно, французское слово compagnie (компания), зачастую представляется следующим сокращением: C^ie

<span lang="fr"><abbr>C<sup>ie</sup></abbr></span>

Элемент <mark>

Если бы в HTML был инструмент, подсвечивающий текст жёлтым цветом - это был бы элемент <mark>. Этот тег подсвечивает содержимое, указывая на его особое значение в определённом контексте. Например, если кто-то хочет выделить ключевое слово в разделе, которое подходит под поисковой запрос, то было бы разумным воспользоваться тегом <mark>. В нижеприведённом примере искали слово “audio”.

<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>

В блочной цитате элемент <mark> может быть использован для добавления акцента на текст, не найденный в оригинальном контексте.

<blockquote>I included the jQuery JavaScript library via Google’s content delivery network. <mark>jQuery is in no way required</mark> for the Web Audio API, but its powerful selectors will make it a lot easier to interact with the HTML pads. I am also linking to a local JavaScript file that will contain the code for working with the Web Audio API.</blockquote>

Элемент <wbr>

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

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

В США, например, гавайское имя углохвостого спинорога состоит из 21 буквы: humuhumunukunuku?pua?a. С помощью тега <wbr> мы можем подсказать браузеру, как разбить слово на соответствующие слоги.

humu<wbr>humu<wbr>nuku<wbr>nuku<wbr>a<wbr>pua`a

Заключение

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

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

Были ли вам полезны эти элементы? Поделитесь своими мыслями в комментариях.