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

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

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

Адам Фриман

10.1. Добавление основных заголовков

Элемент h1 представляет собой заголовок. HTML определяет иерархию элементов заголовков, в которой h1 является самым главным. Другие элементы заголовков – это h2, h3 и так до h6. В таблице 10-2 представлены элементы h1-h6.

Таблица 10-2: Элементы h1h6
Элемент h1h6
Тип элемента Потоковый
Разрешенные родительские элементы Элемент hgroup или любой элемент, который может содержать потоковый контент. Эти элементы не могут быть потомками элемента address.
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет
Соглашение по стилям См. таблицу 10-3

Заголовки одинакового ранга используются для того, чтобы разбить содержание таким образом, что каждая тема находилась бы в своем собственном разделе. Заголовки меньшего ранга, как правило, используются для представления различных аспектов одной и той же темы. Дополнительным преимуществом этих элементов является то, что они создают структуру документа, когда пользователь может понять общий характер и природу документа, просто посмотрев на заголовки, и быстрее перейти к интересующему разделу, следуя иерархии заголовков. В листинге 10-1 показано, как используются элементы h1-h3.

Листинг 10-1: Использование элементов h1h3
<!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" />
</head>
<body>
	<h1>Fruits I like</h1>
	I like apples and oranges.
	<h2>Additional fruits</h2>
	I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	<h3>More information</h3>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
	<h1>Activities I like</h1>
	<p>
		I like to swim, cycle and run. I am in training for my first triathlon,
	but it is hard work.
	</p>
	<h2>Kinds of Triathlon</h2>
	There are different kinds of triathlon - sprint, Olympic and so on.
	<h3>The kind of triathlon I am aiming for</h3>
	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>
</body>
</html>

В листинге я показал только заголовки h1, h2 и h3, потому что довольно редко можно встретить контент, которому требуется дополнительная глубина заголовков. Исключением может быть технический и очень точный контент, например, контракты и спецификации. Для большей части контента требуются заголовки второго или третьего уровня, не более. Например, в моих книгах Apress я использую три уровня заголовков. Несмотря на то, что шаблон Apress определяет пять уровней заголовков, редакторы испытывают неудобство, если я использую четвертый и пятый уровни.

На рисунке 10-1 видно, как браузер отображает элементы h1, h2 и h3 из листинга.

Рисунок 10-1: Отображение элементов h1, h2 и h3 с использованием стилей по умолчанию

Как вы видите на рисунке, для каждого уровня заголовков есть свое соглашение по стилям. В таблице 10-3 показаны соглашения по стилям для каждого элемента заголовка.

Таблица 10-3: Соглашение по стилям для элементов h1h6
h1
h1 { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em;
margin-start: 0; margin-end: 0; font-weight: bold; }
h2
h2 { display: block; font-size: 1.5em; margin-before: 0.83em; margin-after: 0.83em;
margin-start: 0; margin-end: 0; font-weight: bold; }
h3
h3 { display: block; font-size: 1.17em; margin-before: 1em; margin-after: 1em;
margin-start: 0; margin-end: 0; font-weight: bold; }
h4
h4 { display: block; margin-before: 1.33em; margin-after: 1.33em; margin-start: 0;
margin-end: 0; font-weight: bold; }
h5
h5 { display: block; font-size: .83em; margin-before: 1.67em; margin-after: 1.67em;
margin-start: 0; margin-end: 0; font-weight: bold; }
h6
h6 { display: block; font-size: .67em; margin-before: 2.33em; margin-after: 2.33em;
margin-start: 0; margin-end: 0; font-weight: bold; }

Вы не обязательно должны уважать иерархию элементов h1-h6, но вы рискуете ввести в заблуждение пользователя, если отклонитесь от нее. Иерархия заголовков настолько распространена, что пользователи довольно четко представляют себе, как это все работает.