Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ What Does It All Mean/ Подвалы. HTML5. Up and Running. Марк Пилгрим

Подвалы

Дата публикации: 12.03.2011

Вот мы и добрались до самого низа HTML страницы. Напоследок я хочу затронуть тему подвалов (колонтитулов). Обычно подвал размечается примерно так:

<div id="footer">
	<p>§</p>
	<p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</div>

Тут, как бы, все правильно, но HTML5 вводит специальный элемент для колонтитулов — <footer>:

<footer>
	<p>§</p>
	<p>© 2001–9 <a href="#">Mark Pilgrim</a></p>
</footer>

Что же нужно обозначать, как footer? Сразу напрашивается ответ — то, что ты сейчас обозначаешь, как <div id=»footer»>, то есть подвал сайта. И это будет правильно. Спецификация HTML5 гласит:

Колонтитул обычно содержит информацию о разделе: кто его автор, ссылки на различные документы, копирайты, ссылка на страницу автора.

Глядя на многие популярные сайты, я вижу много потенциальных мест для <footer>:

  • Сайт CNN в подвале содержит копирайты, ссылки на переводы, условия обслуживания, конфиденциальности, «о нас&raquo и «помощь&raquo. Все полностью подходит под определение содержимого <footer>
  • Google внизу своих страниц содержит ссылки: «Рекламные программы», «Решения для предприятий», «Конфиденциальность», «Все о Google». Все это может быть заключено в <footer>.
  • mpbox.ru тоже не исключение — в подвале копирайты, ссылки «О проекте», «О материалах» и т.д. Все это напрашивается в <footer>.

«Жирные» подвалы сейчас тоже не редкость. Взять хотя бы подвал W3C. Он состоит из трех колонок помеченных «Navigation», «Contact W3C» и «W3C Updates». Код у них такой:

<div id="w3c_footer">
	<div class="w3c_footer-nav">
		<h3>Navigation</h3>
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/standards/">Standards</a></li>
			<li><a href="/participate/">Participate</a></li>
			<li><a href="/Consortium/membership">Membership</a></li>
			<li><a href="/Consortium/">About W3C</a></li>
		</ul>
	</div>
	<div class="w3c_footer-nav">
		<h3>Contact W3C</h3>
		<ul>
			<li><a href="/Consortium/contact">Contact</a></li>
			<li><a href="/Help/">Help and FAQ</a></li>
			<li><a href="/Consortium/sup">Donate</a></li>
			<li><a href="/Consortium/siteindex">Site Map</a></li>
		</ul>
	</div>
	<div class="w3c_footer-nav">
		<h3>W3C Updates</h3>
		<ul>
			<li><a href="http://twitter.com/W3C">Twitter</a></li>
			<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
		</ul>
	</div>
	<p class="copyright">Copyright © 2009 W3C</p>
</div>

Чтобы преобразовать его в HTML5, я сделаю несколько изменений:

  • преобразую <div id=»w3c_footer»> в элемент <footer>
  • преобразую первые два экземпляра <div class=»w3c_footer-nav»> в элементы <nav>, в третий – в <section>
  • преобразую <h3> в <h1>, т.к. каждый из заголовков будет находиться в своей секции: элемент <nav> создает раздел документа, так же как и <article>.

После этих преобразований получим код:

<footer>
	<nav>
		<h1>Navigation</h1>
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/standards/">Standards</a></li>
			<li><a href="/participate/">Participate</a></li>
			<li><a href="/Consortium/membership">Membership</a></li>
			<li><a href="/Consortium/">About W3C</a></li>
		</ul>
	</nav>
	<nav>
		<h1>Contact W3C</h1>
		<ul>
			<li><a href="/Consortium/contact">Contact</a></li>
			<li><a href="/Help/">Help and FAQ</a></li>
			<li><a href="/Consortium/sup">Donate</a></li>
			<li><a href="/Consortium/siteindex">Site Map</a></li>
		</ul>
	</nav>
	<section>
		<h1>W3C Updates</h1>
		<ul>
			<li><a href="http://twitter.com/W3C">Twitter</a></li>
			<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
		</ul>
	</section>
	<p class="copyright">Copyright © 2009 W3C</p>
</footer>

Заметка редакции: Несмотря на то ,что ранее упоминалось, что <nav> в большинстве случаев не следует заключать в </footer> в даном примере наблюдем исключение, т.к. на сайте W3C в подвале ссылки навигации не дублируют основную навигацию и поэтому вполне имеют право быть обрамленными <nav>.

Куда дальше

Теги: , , ,