Структурная разметка с HTML5. Часть 2.

В этой статье познакомимся с еще тремя новыми семантическими тегами HTML5: <header>, <footer> и <nav>.

header

Определяет элементы, которые относятся к заголовку веб страницы в целом или конкретного раздела на ней. Обычно содержит элементы заголовков <h1>-<h6>, <hgroup>. Но это не обязательно. <header> может в себе содержать практически любые другие теги: <div>, <table>, <section> и т.д.

Первым, напрашивается применение этого тега для шапки сайта:

<header>
	<a href="/"><img src="logo.png" alt="mpbox.ru" width="100" height="70" /></a>
	<ul>
		[ссылки навигации]
	</ul>	
	[форма поиска]
</header>

Элемент не ограничивается применением только для шапки сайта: <section>, <article>, <aside> и думаю даже <nav> (в особо извращенных случаях) так же могут содержать <header>. В этом случае заголовок будет относится к своему родителю секционному элементу. Например, в следующем примере <header> будет являться заголовком статьи (<article>):

<article>
	<header>
		<h1>Заголовок статьи</h1>
		<time>21.02.10</time>
	</header>
	[контент статьи]
</article>

Следует помнить, что <header> служит для группировки элементов заголовка. Если у статьи есть только название, тогда <header> будет излишеством:

<article>
	<header>
		<h1>Заголовок статьи</h1>
	</header>
	[контент статьи]
</article>

В таком случае достаточно одного элемента заголовка <h1>:

<article>
	<h1>Заголовок статьи</h1>
	[контент статьи]
</article>

footer

Определяет колонтитул веб страницы или раздела:

<footer>
	<p id="copyright">&copy; 2011 Mozilla Developer Network</p>
	<p>Content is available under <a href="#">these licenses</a> | <a href="#">About MDN</a> | <a href="/#">Help</a></p>
</footer>

В подвале (нижнем колонтитуле) обычно находится информация о разделе или сайте в целом: кто его автор, ссылки на поясняющие ресурсы, копирайты, ссылка на страницу с информацией об авторе и тому подобное. Поэтому обращу внимание, что применение <footer> не ограничивается только подвалом сайта, он так же может относится к любой секции (разделу) на странице. И более того, он необязательно должен находится внизу. Например, код статьи может быть таким:

<article>
	<header>
		<h1>Заголовок статьи</h1>
		<time>21.02.10</time>
	</header>
	<footer>
		<div class="autor">Евгений Рыжков</div>
		<a href="#">об авторе</a> | <a href="#">написать личное сообщение</a>
	</footer>
	[контент статьи]
</article>

nav

Определяет основные навигационные блоки на странице. Это может быть как навигация между страницами сайта, так и ссылки-якоря по текущей.

<header>
	<a href="/"><img src="logo.png" alt="mpbox.ru" width="100" height="70" /></a>
	<nav>
	<ul>
		[ссылки навигации]
	</ul>	
	</nav>
	[форма поиска]
</header>

Элемент <nav> определяет полноценную секцию на странице и эта секция может иметь достаточно сложную структуру, а не просто содержать список ссылок:

<nav>
	<a href="">xml декларация</a>
	<section>
		<h1>HTML теги</h1>
		<ul>
		<li><a href="">a</a></li>
		[...]
		</ul>
	</section>
	<section>
		<h1>мета теги</h1>
		<ul>
		<li><a href="">Cache-Control</a></li>
		</ul>
	</section>
</nav>

Обращу дополнительно внимание на, то что <nav> предназначен для обозначения только основной навигации на странице. Вспомогательные навигации, типа фильтров, дублирующей навигации, дополнительных ссылок в подвале не должны быть размечены <nav>. Например, если на mpbox.ru посмотреть на страницу HTML справочника, то на ней <nav> следует разметить основную навигацию сайта (ссылки в шапке) и основную навигацию раздела (сайдбар). А вот дублирующую навигацию по сайту в подвале заключить в <nav> будет ошибкой.

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

По теме

• Структурная разметка с HTML5. Часть 1.