Блог. Семантика шапки

Любое информационное издание начинается с обложки или титульного листа. В нашем случае, это шапка, верхняя часть страницы — слой с идентификатором 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>

Комментарии

Ваши комментарии (2)

  1. ha at Июль 02, 2008, 12:51 says:

    UL — Unordered list

  2. vlad at Сентябрь 23, 2011, 10:39 says:

    картинку не видно

Оставить комментарий

Add comment





(можно использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>)