Семантический HTML может помочь веб-дизайнерам и разработчикам передать смысл не только на представленной странице, но также с помощью тегов и элементов, используемых для кодирования этой страницы, потенциально улучшая доступность, индексацию в поисковых системах и даже понимание человеком.
Как термин, семантика или семантика относится к значению в языке. Если что-то более семантическое, оно по определению более значимо. Семантический HTML — это просто разметка, которая более эффективна для передачи некоторого предполагаемого значения.
Семантический HTML передает больше смысла
Рассмотрим в качестве примера разницу между элементом <div><header> Первый описывает общую группу блочного контента в документе HTML, тогда как последний более конкретно обозначает блок вводного контента, возможно, включающий элементы навигации.
<div id="top">Welcome</div>
<header>Welcome</header>
В браузере таблица стилей позволяет одинаково представлять элементы <div><header> Но в тот момент, когда бот поисковой системы или программа чтения с экрана разбирает код, семантика становится существенной, поскольку эти инструменты могут по-разному обрабатывать два тега, включая присвоение разного веса или значения содержимому одного над другим.
Семантика становится более важной, когда различие в значении является тонким или когда использование тега определенно подразумевает значение.
Элемент <s>
Элемент <s> представляет контент, который больше не является релевантным, точным или неприменимым. Может отображаться изменение цены на сайте электронной торговли, распроданный товар в меню или более не релевантное объявление.
<h1>Widget for Sale</h1>
<p><s>Reg. Price $19.99</s> Now $9.99</p>
<s>Grilled Cheese Sandwich</s> Sold Out
<s>Three Bedroom Apartment $1,000 Monthly</s>
Элемент <s> <s>
<ins><del>
Элементы <ins> и <del> работают вместе, чтобы описать вставки и удаления в HTML-документ. Каждый элемент поддерживает два атрибута. Атрибут cite Атрибут datetime
По умолчанию содержимое <del><ins>
<h1>Meeting Agenda</h1>
<ul>
<li>Discuss Sales Plan</li>
<li><del timestamp="2014-10-12T18/02-17/00">Review Q3 Marketing</del></li>
<li><ins cite="//sitepoint.com/change.html">Review Q3 Marketing</ins></li>
</ul>
<p>The meeting will be on <del>Thursday</del> <ins>Friday</ins> afternoon.</p>
Элемент <cite>
Не путать с атрибутами cite<ins><del>элемент <cite> является самостоятельным тегом, представляющим ссылку на некоторые творческие работы, такие как статья, книга, комикс, картинка , стихотворение, песня, видео или подобное.
Содержимое элемента <cite>
<p>I really like Armando’s article,
<cite>An Introduction to HTML Imports</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>
В приведенном выше примере браузеры, поисковые роботы и люди, просматривающие разметку, распознают, что «Интернет-корпорация по присвоению имен и номеров» — это определяемая фраза, а «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> Когда теги <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">eleven</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>
У Аурелио есть все подробности об элементе <time> в его недавнем сообщении SitePoint.
Элементы <ruby><rt><rp>
Рубиновые аннотации — это краткие текстовые фрагменты, которые обычно используются в качестве руководства по произношению для таких языков, как японский, корейский или китайский.
Элемент <ruby> — это способ добавления аннотаций Ruby в HTML. Часто эти вспомогательные средства для произношения отображаются как верхний индекс над соответствующим символом.
Элемент <ruby>элементом <rt> , который описывает произношение отдельного символа в аннотации Ruby, и элементом <rp> , который создает запасную пунктуацию для браузеров, которые не поддерживают аннотации Ruby.
Рабочая группа по технологии веб-гипертекстовых приложений (WHATWG) имеет несколько отличных примеров аннотаций Ruby, включая следующие.
<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>
は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
Чтобы лучше понять пример, рассмотрим только первую аннотацию Ruby.
<ruby>君<rt>くん</ruby>
При правильном отображении символы после <rt>くん君
Если кто-то обеспокоен совместимостью со старыми браузерами, элемент <rp>
<ruby>君<rp>(</rp><rt>くん </rt><rp>)</rp></ruby>
В приведенном выше примере браузеры, которые не поддерживают аннотации Ruby, отображают произношение в скобках, 君(くん )
Элементы <sup><sub>
Представляя надстрочный и подстрочный индексы, соответственно, элементы <sup><sub> обозначают «типографские соглашения» и не должны использоваться просто для надстрочного и подписного копирования, что в противном случае может быть сделано только с помощью CSS и общего <span>
Возможно, наиболее распространенными примерами использования этих тегов являются определенные французские сокращения, которые обычно включают верхний индекс. В частности, французское слово compagnie , которое по-английски означает «компания», часто сокращается до C ie .
<span lang="fr"><abbr>C<sup>ie</sup></abbr></span>
Элемент <mark>
Если бы у HTML была большая желтая подсветка, это был бы элемент <mark> . Этот тег выделяет контент из-за его особой актуальности в некотором контексте. Например, если кто-то хочет показать конкретное ключевое слово в некотором разделе копии, которое соответствует поисковому запросу, элемент <mark> В приведенном ниже примере был выполнен поиск по слову «аудио».
<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 буквы: humuhumunukunukuapua`a . Используя <wbr>
humu<wbr>humu<wbr>nuku<wbr>nuku<wbr>a<wbr>pua`a
Вывод
HTML предлагает множество отличных семантических тегов, предоставляя разработчикам веб-сайтов возможность напрямую связывать смысл с элементами
Не у всех этих элементов есть доступность или другие преимущества, но, если не сказать больше, они могут облегчить чтение кода с точки зрения разработчика.
Считаете ли вы эти элементы полезными? Поделитесь своими мыслями в комментариях.
Обновление редактора: мы поместили все примеры кода в демонстрационную версию CodePen ниже. Они показывают стиль по умолчанию с Normalize.css: