Секции и структура документа в HTML5

Дата публикации: 03.03.2011

Последнее обновление: 19.04.2011

В данной статье пойдет речь о способах построения семантической структуры документа (не путать с деревом документа или DOM). Для начала рассмотрим как строится структура документа в HTML4.

Структура документа в HTML4

В HTML4 создать логическую структуру документа можно было только одним путем — это использование заголовков <h1>-<h6>. Например следующий код:

<div class="section" id="forest-elephants">
	<h1>Forest elephants</h1>
	<p>In this section, we discuss the lesser known forest elephants.
	...this section continues...
	<div class="subsection" id="forest-habitat">
		<h2>Habitat</h2>
		<p>Forest elephants do not live in trees but among them.
		...this subsection continues...
	</div>
</div>

строит следующую структуру:

1. Forest elephants
   1.1 Habitat

Замечу, что ни <div> ни какие-либо другие теги кроме заголовков не имеют влияния на структуру. Поэтому следующий код построит структуру идентичную предыдущей:

<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...

В HTML4, можно сказать, критически важным было соблюдение правильной вложенности заголовков (если, конечно, тебе не «по барабану» была грамотно построенная структура).

Семантические недостатки HTML4

Использование <div> для разметки семантических блоков делает практически невозможным чтение структуры документа в автоматическом режиме. Особенно это важно для вспомогательных технологий вроде голосовых браузеров.
Не удобно и временами трудоемко объединять HTML документы: после объединения нужно проверить и при необходимости изменить уровни заголовков, чтобы соблюсти правильную вложенность.
Нет возможности использования альтернативного или вспомогательного заголовка, т.к. каждый заголовок создает подраздел. Пример из жизни, есть основной заголовок сайта — «mpbox.ru». И есть вспомогательный (слоган) — «Основы и секреты front-end разработки». Если сделать следующую разметку:
```
<h1>mpbox.ru</h1>
<h2>Основы и секреты front-end разработки</h2>
```
получим структуру:
```
1. mpbox.ru
	1.1 Основы и секреты front-end разработки
```
В данном случае получилась ложная ветка в структуре, поэтому, что избежать таковой, часто в разметке для слоганов используется нейтральный элемент:
```
<h1>mpbox.ru</h1>
<div class="slogan">Основы и секреты front-end разработки<div>
```
Нет возможности выделить подразделы, которые не имеют отношения к данному материалу. В HTML4 каждый подраздел является частью раздела, в котором он находится. Но все подразделы имеют прямое отношение к текущему содержимому. Например, рекламный блок в статье.
Так же сюда можно отнести и общую информацию о сайте, которая не имеет никакого отношения к текущему материалу, но является частью общей страницы. Например, логотип mpbox.ru, форма поиска и копирайты никак не связаны со статьей, которую ты сейчас читаешь.

HTML5 решает данные проблемы введением новых семантических тегов. Разметка на основании которых будет более понятной и предсказуемой для любых пользовательских агентов.

Алгоритм построения структуры в HTML5

Определение секций в HTML5

В HTML5 для формирования секций используются следующие элементы: <body>, <section>, <article>, <aside>, ~~<footer>, <header>~~ и <nav>. Тег <body> формирует корневую секцию. Пример:

<section>
	<h1>Forest elephants</h1>
	<section>
		<h2>Introduction</h2>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h2>Habitat</h2>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</section>
</footer>

Данный код формирует две секции верхнего уровня:

<section>
	<h1>Forest elephants</h1>
	<section>
		<h2>Introduction</h2>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h2>Habitat</h2>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</section>
</footer>

Первая секция имеет три подуровня:

<section>
	<h1>Forest elephants</h1>
	<section>
		<h2>Introduction</h2>
		<p>In this section, we discuss the lesser known forest elephants
	</section>
	<section>
		<h2>Habitat</h2>
		<p>Forest elephants do not live in trees but among them.
	</section>
	<aside>
		<p>advertising block
	</aside>
</section>
<footer>
<section>
	<p>(c) 2010 The Example company
</footer>
</section>

В итоге получаем такую структуру документа:

1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section

Данный способ получил название явное секционирование. Есть еще неявное, с помощью элементов <h1>-<h6>.

Пример по «живому»

Попробуем разбить на основные секции не сложный сайт на примере mpbox.ru. Начнем с шапки:

Исходя из этих соображений получаем такой код:

<header>
	<hgroup>
		<h1>mpbox.ru</h1>
		<h2>Основы и секреты front-end разработки</h2>
	</hgroup>
	<section>
		<form action="">
		[содержимое формы]
		</form>
	</section>
	<nav>
	<ul>
	[содержимое меню]
	</ul>
	</nav>
	<a href="">twitter</a>
	<a href="">RSS</a>
	<a href="">email</a>
	<aside>
		[рекламный банер]
	</aside>
</header>

О заголовках и в часности о <hgroup> читай в «Заголовки в HTML5 — неявное секционирование» (скоро будет). Далее рассмотрим среднюю часть сайта:

Получаем код:

<article>
	[анонс 1]
</article>
<article>
	[анонс 2]
</article>
<div class="sideBar">
	<aside>
		<h1>Книги веб разработчикам</h1>
		<ul>
		[список книг]
		</ul>
	</aside>
	<aside>
		[гугл адсенс]
	</aside>
</div>

<div> тут не создает никакой семантики, он используется исключительно в оформительных целях — формирует колонку сайдбара. И напоследок разберем подвал:

Код для подвала:

<footer>
	<section>
		<h1>Инфо</h1>
		<ul>
		[ссылки]
		</ul>
	</section>
	<section>
		<h1>Разделы</h1>
		<ul>
		[ссылки]
		</ul>
	</section>
	<div class="copy">[копирайты + сеотекст]</div>
</footer>

Роль div в HTML5

Тег <div> в HTML5 не будет таким популярным как в HTML4. Он будет служит только для привязки оформления и сценариев к определенным участкам. На семантику кода он никак не влияет и может располагаться где угодно. Например, можно обернуть весь код общим дивом для выравнивания сайта по середине окна браузера, чтобы не выравнивать каждую основную секцию (шапку, подвал, контент) отдельно.

Подводя итоги

Семантические теги делают разметку куда читабильней и понятней даже для автоматического разбора. Что не может не радовать, так это добавка творчества в нашу работу (ура!): теперь вместо механической расстановки дивов, нужно будет хотя бы немного подумать какой структурой лучше представить свой документ. Один и то же макет можно будет сверстать используя разную структурную разметку. Даже такой простой пример кода как рассмотренный выше для mpbox.ru, может вызвать споры. Например, каждый анонс может выступать отдельным <article>, блок со списком анонсов стал бы <section>, сайдбар можно представить одним тегом <aside> и т.д. Это остается на усмотрение front-end разработчика.

Материалы

MDN :: Sections and outlines of an HTML5 document

По теме

Теги: семантический HTML, HTML5, HTML теги

Показать комментарии