Главная страница   /   10.4. Добавление верхних и нижних колонтитулов (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

10.4. Добавление верхних и нижних колонтитулов

Элемент header обозначает верхний колонтитул раздела. Он может содержать любой контент, который вы хотите обозначить как верхний колонтитул, в том числе название или логотип. Что касается других элементов, элемент header обычно содержит один элемент h1-h6 или элемент hgroup, также он может также содержать элементы навигации по разделу. Вы можете больше узнать об элементе nav (обсуждаемом в предстоящем разделе «Добавление навигационных блоков»), чтобы получить более подробную информацию о навигации. В таблице 10-6 представлен элемент header.

Таблица 10-6: Элемент header
Элемент header
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы. header не может быть потомком элемента address или элемента footer, а также потомком другого элемента header
Локальные атрибуты Нет
Содержание Потоковый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям header { display: block; }

Элемент footer является парой элемента header и представляет собой нижний колонтитул раздела. Элемент footer обычно содержит краткую информацию о разделе и может включать в себя сведения об авторе, информацию о правах, ссылки на связанный контент, логотипы и так далее. В таблице 10-7 представлен элемент footer.

Таблица 10-7: Элемент footer
Элемент footer
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы. footer не может быть потомком элемента address или элемента header, а также потомком другого элемента footer
Локальные атрибуты Нет
Содержание Потоковый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Да
Изменения в HTML5 N/A
Соглашение по стилям footer { display: block; }

В листинге 10-5 представлены элементы header и footer.

Листинг 10-5: Использование элементов header и footer
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		h1, h2, h3 {
			background: grey;
			color: white;
		}

		hgroup > h1 {
			margin-bottom: 0;
			margin-top: 0;
		}

		hgroup > h2 {
			background: grey;
			color: white;
			font-size: 1em;
			margin-top: 0px;
			margin-bottom: 2px;
		}

		body > header *, footer > * {
			background: transparent;
			color: black;
		}

		body > section, body > section > section,
		body > section > section > section {
			margin-left: 10px;
		}

		body > header, body > footer {
			border: medium solid black;
			padding-left: 5px;
			margin: 10px 0 10px 0;
		}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Things I like</h1>
			<h2>by Adam Freeman</h2>
		</hgroup>
	</header>
	<section>
		<header>
			<hgroup>
				<h1>Fruits I Like</h1>
				<h2>How I Learned to Love Citrus</h2>
			</hgroup>
		</header>
		I like apples and oranges.
		<section>
			<h1>Additional fruits</h1>
			I also like bananas, mangoes, cherries, apricots, plums,
	peaches and grapes.
			<section>
				<h1>More information</h1>
				You can see other fruits I like <a href="fruitlist.html">here</a>.
			</section>
		</section>
	</section>
	<section>
		<header>
			<h1>Activities I like</h1>
		</header>
		<section>
			<p>
				I like to swim, cycle and run. I am in training for my first
	triathlon, but it is hard work.
			</p>
			<h1>Kinds of Triathlon</h1>
			There are different kinds of triathlon - sprint, Olympic and so on.
			<section>
				<h1>The kind of triathlon I am aiming for</h1>
				I am aiming for Olympic, which consists of the following:
				<ol>
					<li>1.5km swim</li>
					<li>40km cycle</li>
					<li>10km run</li>
				</ol>
			</section>
		</section>
	</section>
	<footer id="mainFooter">
		&#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
	</footer>
</body>
</html>

В этом примере я определил три элемента header. Если верхний колонтитул является дочерним элементом элемента body, то считается, что это верхний колонтитул (header) для всего документа (но будьте осторожны, это не то же самое, что элемент head, который я описал в главе 7). Если элемент header является частью раздела (подразумеваемого или определенного явно с помощью элемента section), то это верхний колонтитул (header) этого раздела. Я добавил в документ некоторые стили, чтобы было проще увидеть иерархические отношения между различными разделами и колонтитулами. Все это показано на рисунке 10-6.

Обратите внимание на размеры шрифтов. Предположительно поэтому Google Chrome и Firefox переопределяют элементы h1-h6, когда они находятся в элементе section. Это делается для того, чтобы можно было отличить заголовки верхнего уровня h1 от тех, которые вложены в разделы. Это не может служить оправданием беспричинному переопределению стилей, но это имеет место быть.

Рисунок 10-6: Использование элемента header

Результат использования элемента footer можно увидеть на рисунке 10-7.

Рисунок 10-7: Добавление элемента footer