Часть 2. Переходим на HTML5. Общая структура страницы.

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

<header>

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

Цитата из спецификации:

Элемент header представляет собой набор предварительных данных и навигационных средств… Обратите внимание: предполагается, что элемент header должен содержать заголовок раздела (элементы h1-h6 или hgroup), но это не обязательно. Элемент header может также использоваться для обрамления списка содержимого раздела, формы поиска или любых необходимых логотипов.

Проанализировав это описание, можно выделить следующую мысль: Значение header – объединять «предварительные данные и навигационные средства».

Жизненный пример:

1
2
3
4
5
6
7
<header>
<a href=”/”><img src=”logo.png” alt=”home”></a>
<hgroup>
<h1>Название сайта</h1>
<h2>Слоган сайта</h2>
</hgroup>
</header>

В случае, когда на сайте присутствует панель навигации в виде горизонтального меню, навигацию <nav> можно включить в шапку <header>, а можно вынести за ее пределы. Типичный пример, когда навигация вынесена за пределы <header> был показан на рис.2.

<nav>

Используется для создания панелей навигации, которые представляют собой списки ссылок, позволяющих перемещаться по странице или по сайту. Однако не любой набор ссылок является элементом <nav>. К навигации, например, не относится список спонсорских ссылок, список результатов поиска – это часть основного содержимого страницы.

Элементов <nav> может быть несколько. Например, главное меню в шапке, дополнительное меню в боковой колонке, дублированное меню в подвале.

Традиционно для навигации (меню, хлебных крошек и проч.) используются неупорядоченные списки ul. Помните, <nav> не заменяет элементы <ul> и <ol>, а обрамляет их. В этом случае старые браузеры, не распознающие новые элементы html5 , отобразят меню как обычный список.

Типичный пример:

1
2
3
4
5
6
7
8
9
<nav>
<h2>Меню</h2>
<ul>
<li><a href=»/»>Главная</a></li>
<li><a href=»/news»>Новости</a></li>
<li><a href=»/contacts»>Контакты</a></li>
<li><a href=»/about»>О нас</a></li>
</ul>
</nav>

<footer>

Используется для создания «футера для расположенного уровнем выше структурированного контента или структурированного корневого элемента» (цитата из спецификации). (Структурированный контент – это элементы article, aside, nav, section; структурированные корневые элементы – это blockquote, body, details, fieldset, td.)

Обычно содержит сведения о соответствующем разделе – информацию об авторе, ссылки на похожие документы, сведения об авторских правах и т.д.

<article>

Элемент <article> представляет собой самодостаточный компонент страницы, документа или приложения, предназначенный для многократного использования и свободного распространения.

Спецификация HTML5

Запись блога, руководство, заметка новостей, комикс или видеозапись полностью соответствуют этому определению.

<section>

Этот элемент, в отличии от <article>, не является «компонентом страницы», а служит для разделения страницы на несколько тематических областей или разделения статьи на разделы.

Обычно <section> начинается с заголовка, содержащего вводную информацию. Если же заголовок отсутствует или просто нужен элемент-контейнер для создания оформления, то лучше использовать <div>.

<aside>

Этот блок, как правило, называется «сайдбар» или «боковая панель». Он располагается сбоку от контента и содержит группы элементов <nav>, ссыли на архив, метки, рекламу и другую информацию, которая должна находиться отдельно от основного контента.

Внутри <article> элемент <aside> — отличное место для информации, имеющей косвенное отношение к статье, или цитат.