Руководство по HTML5
Адам Фриман
Создание разделов
Элемент section
является новым в HTML5 и, как и предполагает его название, обозначает раздел документа. При использовании элементов заголовка, вы создаете подразумеваемые разделы, а этот элемент позволяет сделать их явными, а также позволяет вам освободить разделы вашего документа от элементов h1
-h6
. Нет жестких правил о том, когда должен быть использован элемент section
, но, в принципе, элемент section
используется для того, чтобы содержать контент, который будет перечислен в структуре документа или оглавлении. Элементы разделов обычно содержат один или несколько абзацев и заголовок, хотя заголовок не является обязательным. В таблице 10-5 представлен элемент section
.
Таблица 10-5: Элемент section
Элемент | section |
Тип элемента | Потоковый |
Разрешенные родительские элементы | Любой элемент, который может содержать потоковые элементы. section не может быть дочерним элементом элемента address |
Локальные атрибуты | Нет |
Содержание | Элементы style и потоковый контент |
Стиль тегов | Открывающий и закрывающий теги |
Новый в HTML5 | Да |
Изменения в HTML5 | N/A |
Соглашение по стилям | section { display: block; } |
В листинге 10-4 показано, как используется элемент section
.
Листинг 10-4: Использование элемента section
<!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: 0px;
}
hgroup > h2 {
background: grey;
color: white;
font-size: 1em;
margin-top: 0px;
}
</style>
</head>
<body>
<section>
<hgroup>
<h1>Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
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>
<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>
В этом листинге я определил три элемента section
, один из которых вложен в другой. Обратите внимание, что элементом заголовка в каждом из них является h1
. При использовании элемента section
браузер несет ответственность за выяснение иерархии элементов заголовка, избавляя вас от необходимости определять и поддерживать соответствующую последовательность элементов h1
-h6
, по крайней мере, таков принцип. Фактическая реализация у разных браузеров незначительно различается. Google Chrome, Internet Explorer 9 (IE9) и Firefox способны различить иерархию и указать позицию для каждого элемента h1
, как показано на рисунке 10-3.
Рисунок 10-3: Как выглядит элементsection
со вложеннымиh1
в Chrome
Все это хорошо, но если вы наблюдательны, вы заметили, что шрифт, используемый для отображения элемента h1
, содержимым которого является Fruits I Like, меньше, чем шрифт, используемый для другого элемента h1
того же уровня, содержимым которого является Activities I like. Это произошло потому, что некоторые браузеры (включая Chrome и Firefox) применяют различные стили для элементов h1
(h2
-h6
), когда они находятся внутри элементов section
, article
, aside
и nav
. (Последние три описаны далее в этой главе). Этот новый стиль такой же, как и стиль по умолчанию для элемента h2
. Как показано на рисунке 10-4, IE9 не применяет специальный стиль. И это правильное поведение.
Рисунок 10-4: Как выглядит элементsection
со вложеннымиh1
в Internet Explorer
Кроме того, не все браузеры правильно поддерживают создание подразумеваемой иерархии вложенных элементов заголовка одинакового типа. На рисунке 10-5 вы можете увидеть, как с такими элементами работает Opera. Safari таким же образом работает с этими элементами, то есть просто игнорирует иерархию, созданную элементами section
.
Рисунок 10-5: Как выглядит элементsection
со вложеннымиh1
в Opera
Вы можете переделать тот стиль, который применяют Chrome и Firefox, путем создания собственных стилей, ведь они имеют приоритет над стилями, определенными в браузере (как я объяснил в главе 4). Internet Explorer работает с обычными стилями. Но вы ничего не можете сделать с Opera и Safari, и до последовательной реализации в основных браузерах эта удобная функция должна использоваться с осторожностью.