Нам кажется, что пришло время разведать эти новые элементы, и узнать, для чего же мы используем эти элементы. Данная статья – это лишь часть из нашей серии статей, посвященной новым захватывающим свойствам HTML5.
Элемент (тэг) «header»
Новые HTML5-элементы, к счастью, имеет вполне логичные названия и, если следовать спецификации, элемент header – это «группа вводных и навигационных элементов». (Лично мы считаем, что лучше использовать описания из официальных и достоверных источников, так как зачастую значения могут искажать).
Следуя описанию выше, мы можем сделать вывод о том, что элемент header предназначен не только для того, чтобы служить шапкой страницы. Элемент header также можно использовать для определения части (вверху страницы), которая представляет раздел, который следует далее.
К примеру, в следующем отрывке кода, мы поместили элемент header в самый верх контента, чтобы обернуть им заголовок и meta-данные к записи:
<header>
<h1>This is the Title of the Content</h1>
<div class="post-meta">
<p>By Author</a> <span class="category">Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id
felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue
ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa.
Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>
Так как заголовок и мета-данные, в данном примере, размещены в самом верху и служат в качестве введения к содержимому записи, мы можем обернуть их в элемент header.
Элемент (тэг) «nav»
Элемент nav отвечает за навигацию. Следуя спецификации, этот элемент представляет собой «раздел страницы, где расположены ссылки на другие страницы и части сайта, - раздел с навигационными ссылками».
Хотя этот элемент определенно использован для навигации, его использование не ограничено только лишь основной навигацией, размещенной в самом верху страницы. Из официального описания, приведенного выше, мы можем сделать вывод, что элемент nav также может быть использован в любой части страницы, которая выступает в качестве навигации. Посмотрим пример:
<h4>Table of Content</h4>
<nav>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#history">History</a></li>
<li><a href="#development">Development</a></li>
<ul>
</nav>
В данном примере мы использовали элемент nav для того, чтобы обернуть Table of Content (Содержание), где ссылки ведут на ту же страницу.
Элемент (тэг) «footer»
Еще один широко применимый элемент – footer. В основном, мы расцениваем footer как раздел, расположенный в самом низу страницы, но давайте взглянем на официальную спецификацию с описанием элемента: «Элемент footer представляет собой подвал ближайшего раздела с контентом. Footer содержит информацию о данном разделе: автора контента, ссылки на сопроводительные документы, авторское право и прочее».
Это немного смущает, поэтому давайте упростим немного.
Подвал, следуя логике, должен быть расположен в самом низу. Но так как спецификация не указала нам, что этот элемент должен использоваться только в качестве подвала, мы можем предположить, что мы можем использовать элемент footer и в конце каждого раздела. Давайте посмотрим на примере:
<div>
<header>
<h1>This is the Title of the Content</h1>
<div class="post-meta">
<p>By Author</a> <span class="category">Filed in Web 2.0</span></p>
</div>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id
felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue
ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa.
Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>
<footer>
<div class="tags">
<span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a>
</div>
<div class="facebook-like">
<div>10 likes</div> <!-- let's pretend it to be the facebook like -->
</div>
</footer>
</div>
В данном примере мы задали нашей записи дополнительный элемент footer, который содержит тэги к записи и метки «Мне нравится».
Подытожим
header, nav и footer, возможно, и не выполняют всяких интересных штук, как это делают другие новые HTML5-элементы, однако эти элементы разработаны специально для того, чтобы мы могли делать более логически структурированные сайты, понятные как браузерам, так и людям. Именно этого и хотел добиться первооткрыватель WWW, Тим Бернерс-Ли.