АРТЕМ ЧЕРТОВ

Любое информационное издание начинается с обложки или титульного листа. В нашем случае, это шапка, верхняя часть страницы — слой с идентификатором header. Я думаю, что каждый верстальщик знает ее ориентировочные составляющие и может без труда их перечислить.

В статье я хочу представить и в дальнейшем, обсудить некий семантический шаблон кода шапки блога. Именно блога, потому что на сайтах такого типа, состав страницы, практически, не меняется. Этим мы и воспользуемся.

Данные в шапке

• «Skip links» — якорные ссылки на основные элементы страницы. Использование — одно из обязательных условий соблюдения стандартов доступности WAI. Обычно, выводят только «Skip to main content» (перейти к основному содержанию) и «Skip to navigation» (перейти к навигации), хотя могут быть и другие вариации: «to search», «to contact» etc.
• Название блога — заглавие блога. В качаестве названия может быть имя и фамилия автора.
• Эпиграф
  — описание тематики блога или цитата-вступление от автора. Думаю,
  удобнее прочитать о чем тот или иной блог сразу, нежели догадываться об
  этом, читая контент.
• Навигация — основное меню блога.

Реализации семантики

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

Принципы построения верной системы

1. Якорные ссылки должны стоять первыми для логически верного отображения на screen reader’ах и мобильных телефонах.
2. Если якорных ссылок несколько — это список. Делать его нужно соответственно :). Поскольку их тип одинаков, используем universal list
3. Заглавие
   блога — основной заголовок не только страницы, но и сайта, в целом.
   Логически и с точки зрения иерархии, обрамлять нужно заголовком
   перового уровня h1.
4. Обычно, заголовок страницы — это неизменяемая часть заглавия сайта. То есть, тег title должен, хотя бы частично, совпадать с h1 в header.
5. Большинство
   поисковых систем пользуется разметкой уровней заголовков на странице
   для релевантной выдачи поискового запроса. Строя иерархию заголовков,
   это нам «на руку».
6. Эпиграф — это, в первую очередь, цитата. Обрамляем в blockquote.
7. Логично было бы вместо кавычек в цитате использовать тег q, но поскольку WinIE с ним не дружит, можно обойтись и без него.
8. Порой,
   в качестве вступления, или просто после заглавия должен быть слоган
   (или очень значимая фраза). В этом случае, в цитате, вместо параграфа (p), используем заголовок второго уровня (h2), дабы сохранить правильную последовательность заголовков.
9. Если на странице отстутствует meta description, основная масса поисковых систем, в качестве описания сайта, берет текст эпиграфа.
10. По спецификации WAI, перед навигацией должен стоять заголовок второго уровня, объявляющий, что далее следует навигация.
11. Само меню это, как правило, тоже список — оформляем соответственно :). Cписок, кстати тут может быть и порядковый.
12. Результат отображения, естественно, тоже плюс, но в последнюю очередь.

Результат построения

<a href="#content">Skip to content</a>
<h1>Title</h1>
<blockquote><p><q>Description</q></p></blockquote>

<h2>Navigation</h2>
<ul>
  <li><a href="[link to home page]" rel="home">Home</a></li>
  <li><a href="[link to page with archives]" rel="archive">Archive</a></li>

  <li><a href="[link to blog introduce]" rel="about">About</a></li>
</ul>