Создание разделов
Элемент 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, и до последовательной реализации в основных браузерах эта удобная функция должна использоваться с осторожностью.
