Добавление основных заголовков
Элемент h1 представляет собой заголовок. HTML определяет иерархию элементов заголовков, в которой h1 является самым главным. Другие элементы заголовков – это h2, h3 и так до h6. В таблице 10-2 представлены элементы h1-h6.
Таблица 10-2: Элементыh1–h6
| Элемент | h1–h6 |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Элемент hgroup или любой элемент, который может содержать потоковый контент. Эти элементы не могут быть потомками элемента address. |
| Локальные атрибуты | Нет |
| Содержание | Фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | См. таблицу 10-3 |
Заголовки одинакового ранга используются для того, чтобы разбить содержание таким образом, что каждая тема находилась бы в своем собственном разделе. Заголовки меньшего ранга, как правило, используются для представления различных аспектов одной и той же темы. Дополнительным преимуществом этих элементов является то, что они создают структуру документа, когда пользователь может понять общий характер и природу документа, просто посмотрев на заголовки, и быстрее перейти к интересующему разделу, следуя иерархии заголовков. В листинге 10-1 показано, как используются элементы h1-h3.
Листинг 10-1: Использование элементовh1–h3
<!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: Соглашение по стилям для элементовh1–h6
h1 |
|
h2 |
|
h3 |
|
h4 |
|
h5 |
|
h6 |
|
Вы не обязательно должны уважать иерархию элементов h1-h6, но вы рискуете ввести в заблуждение пользователя, если отклонитесь от нее. Иерархия заголовков настолько распространена, что пользователи довольно четко представляют себе, как это все работает.
