Главная страница   /   10.3. Создание разделов (Руководство по HTML5

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

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

Адам Фриман

10.3. Создание разделов

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