HTML5 элементы для лучшей семантики текста

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




Рекомендуем также посмотреть:

Семантика в HTML передаёт больше информации и смысла

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

1
2
<div id="top">Привет</div>
<header>Привет</header>

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

С годами семантика стала на много сложнее, и поисковые системы её всё лучше и лучше понимают.

Тег <s>

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

1
2
3
4
<h1>Продажа</h1>
<p><s>Старая цена $19.99</s> Новая цена $9.99</p>
<s>Бутерброд</s> Продано

Тег <s> не используется для обозначений изменений в тексте. По умолчанию тег зачёркивает текст.

Элементы <Ins> и <Del>

Эти теги обычно работают вместе и не используются раздельно. Они обозначают когда и какие изменения были сделаны в документе. Данные теги используются с атрибутом cite указывая на объяснения изменения, и атрибут 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"> Q3 Маркетинг</del></li>
<li><ins cite="//sitepoint.com/change.html"> Q3 Маркетинг</ins></li>
</ul>
<p>Митинг будет проводиться в <del>Среду</del> <ins>Пятницу</ins> после обеда.</p>

Тег <cite> не нужно путать с такими тегами как <Ins>, <Del> и так далее. Обычно в данный тег помещают авторские тексты, цитаты, или же ссылки на источники и авторские работы.

1
2
<p>Мне очень понравились его работы,
<cite>Вот ссылка на Его</cite>.</p>

Тег <q>

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




1
2
<p>Какой нибудь текст на Вашем сайте <cite>Саша Пушкин</cite>,
<q cite="#">Цитата</q>.</p>

Теги <abbr> и <dfn>

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

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

Теперь поисковые системы и люди будут видеть, что это аббревиатура.

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




Тег <samp>

Выводит текст который был создан или сгенерирован с помощью скрипта или компьютерной программы.

<p>Если произойдёт сбой, тогда система уведомит пользователя о том, что
<samp>файл не был загружен</samp>.</p>

Тег <kbd>

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

1
2
<p>Чтобы сделать снимок экрана на Macbook, одновременно нажмите
<kbd>Shift</kbd>+<kbd>Control</kbd>+<kbd>Command</kbd>+<kbd>3</kbd>.</p>

Тег <var>

Выводит переменные компьютерный программ и скриптов.

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

<p>Вторая переменная, <var>pad</var>, присваивается объекту .jQuery</p>

Тег <time>

В это тег обычно пишутся дата и время, например постов на блоге

1
2
<p>Она родилась в день рождения своего дедушки,
<time datetime="2014-10-22 19:00">22 Октября, 2014 года</time>.</p>

Теги <sup> and <sub>

<sup> — обозначает верхний индекс, <sub> — обозначает нижний индекс. Самые распространённые теги в написании, например, уравнений.

Тег <mark>

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