Семантика

Семантический код - рекомендация с большими выгодами

MUST READ

Семантическая вёрстка. Часть первая

Семантическая вёрстка. Часть вторая

abbreviation

heading

paragraph

definition list

unordered list

ordered list

division

italic

bold

Семантика — совокупность смысловых отношений.

<dl>
    <dt>Семантика</dt>
    <dd>совокупность смысловых отношений.</dd>
</dl>

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

Уровни семантики

Применение HTML-элементов
Именование элементов
Комбинация именованных элементов*

Применение HTML-элементов

особенности применения элемента и смысловые связи, которые образует с остальными элементами, расписаны в спецификации, остаётся только научиться использовать эту информацию

Подобное использование HTML-элементов по их назначению, получило название POSH (Plain Old Semantic HTML) — проще говоря, «старый добрый семантический HTML»

Именование элементов

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

What Makes For a Semantic Class Name?

Id vs. Class

О классах и ID

Id используются на странице 1 раз	Class можно задавать много раз
Id у элемента только один	у одного элемента может быть несколько классовб возможны комбинации
у id бОльший вес для CSS

Class для CSS

ID для JavaScript

Комбинация именованных элементов

создание смысловых связей между семантическими единицами в документе

Пример: микроформаты

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

<div>
    <div>Василий Пупкин</div>
    <div>Рога и Копыта</div>
    <div>495-564-1234</div>
    <a href="http://example.com/">
        Мой сайт</a>
</div>

<div class="vcard">
    <div class="fn">Василий Пупкин</div>
    <div class="org">Рога и Копыта</div>
    <div class="tel">
        <span class="type">Work</span>
        <span class="value">495-564-1234</span>
    </div>
    <a class="url" href="http://example.com/">Мой сайт</a>
</div>

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

чистый код — семантический HTML код чище и меньше по объему, чем не семантический. А чем меньше кода, тем проще найти нужный участок или локализовать ошибку, с ним проще работать.
понятный (читаемый) код — осмысленные имена классов и идентификаторов дают представление о структуре кода тому кто его читает. Это имеет важное значение, когда над сайтом работает команда разработчиков. Это опять же сокращение времени разработки.

Семантический код для пользователей

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

Семантический HTML для машин

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

HTML5 Semantics

HTML5 Semantic Elements

An Overview of HTML5 Semantics

Интересный факт: семантичные теги HTML5, такие как header, footer, nav, section появились после анализа Google миллиарда страниц: было исследовано как авторы описывают свои html элементы

Semantics

By Maria Putyrskaya