Семантическая верстка

Цели создания семантичного кода
Для разработчика - Упрощение работы по созданию и ведению ресурса.
Для программ-обработчиков – извлечение информации из HTML-страницы

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

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

Программы-обработчики
Создатели адресных книг
Поисковые роботы
Программы для чтения RSS лент
Голосовые браузеры
Google Maps API
и др.

Уровни семантики
Применение HTML-элементов в точном соответствии со спецификацией
Именование элементов – классов, ID и др.
Создание смысловых связей между семантическими единицами в документе. Микроформаты.

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

Первый уровень семантики POSH
POSH (Plain Old Semantic HTML) — простой старый семантический HTML — использование HTML-элементов по их назначению
Все особенности применения элемента
и смысловые связи, которые образует с остальными элементами, расписаны
в спецификации.

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

Определения заголовков
в HTML DTD
headings from H1 (the most important) to H6 (the least important).--> headings from H1 (the most important) to H6 (the least important).-->

Пример – имя, адрес
Алексей Рыбаков,
[email protected]
Алексей Рыбаков
[email protected]
Алексей Рыбаков
[email protected]

Применение hCard
Алексей
Рыбаков
[email protected]

μF - базовая идея Semantic Web

Микроразметка
Микроразметка — разметка данных на странице и на сайте, которая используется для того, чтобы программы-обработчики
распознавали контент сайта;
правильно отображали страницы;
собирали информацию для
вывода на другие устройства ;
голосового воспроизведения ;
формирования анонсов, RSS ;
создания карт и других изображений;
формирования записных книжек («Контакты»)и др.

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

Цели и преимущества μF
Сделать контент более заметным и понятным для поисковых машин
извлекать и интерпретировать информацию из документа на основе формализованного синтаксиса.
использовать известные стандарты для передачи большего количества семантической информации. Чтобы создать блоки кода с определенной семантикой, используются существующие элементы XHTML: address, cite, blockquote… и атрибуты: rel, rev, title…
браузеры, плагины, веб-сервисы смогут ассоциировать семантически размеченные данные с различными приложениями.

Актуальные синтаксисы
Microdata
RDFa
JSON-LD

Microdata
впервые появился в HTML-5;
поисковые системы используют его для вывода контента сайта в результатах поиска;
синтаксис Microdata Google использует для создания словаря Schema.org.

Результат работы словаря Shema.org
и грамотной разметки

Это информационная статья
Микроразметка
Давайте поговорим о микроразметке
Представители SEO

RDFa
синтаксис разработали специалисты из W3C в 2004;
реже используется из-за сложности реализации;
чаще всего используется в словаре Open Graph.

Основные атрибуты словаря Open Graph
«og:locale» — указывает на язык контента и локацию сайта
«og:type» — указывает тип контента на странице (статья, новость, обзор и т.д.)
«og:title» — указывает метатег title
«og:description» — указывает метатег description
«og:url» — URL страницы
«og:image» — указываем изображение статьи, обзора и т.д.
«og:site_name» — имя сайта.

Ссылка в социальной сети
Выполнена средствами словаря OpenGraph

Разметки статьи в RDFa
RDFa
by
SEO-специлист
Эту статью твитнули 20 раз и откомментировало 10 человек