Структура HTML5 — div, section и article
В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например <div class="article"> или <div id="page">.
Рассмотрим три элемента, которые легко можно спутать друг с другом:
- div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
- section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
- article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.
Разница между div, section и article
В HTML4 div использовался как базовый элемент разметки. Он не имел особого семантического значения. Так же не было особых требований на его содержимое и взаимоотношение между ним внутри блока.
Элемент section
Новый элемент section очень похож на div, т.к. используется как контейнер, но он уже имеет особое семантическое значение — объекты, которые располагаются внутри него, объединены общим смыслом.
Так же этот элемент служит для разбивки текста на разделы.
Элемент article
Новый элемент article — это специальный вид section, который обозначает независимую и самодостаточную часть страницы. На его месте можно использовать section, но article добавляет больше семантического значения.
Что выбрать?
Если проводить аналогию с HTML4, то можно сравнить эти теги с p и blockquote. Оба тега — блочные элементы, но blockquote, как разновидность p, имеет значение «блок цитируемого текста». То же самое и с section и article: тег section обозначает близкий по смыслу текст, а тег article обозначает осмысленную часть этого текста.
Смущающим обстоятельством является то, что section может быть использована для различных частей страницы (главная колонка, раздел новостей и т.п. на одной странице) и содержать article, а так же для дробления большого article (т.е. использоваться внутри article).
Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:
- Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
- Если части содержимого объединены общим значением, то выбираем section
- Наконец, если нет никакого семантического значения, то выбираем div
Элемент section, за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.
Итак, элемент section не стоит использовать если:
- требуется блочный элемент для декорирования. Это функция элемента div
- в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
- у раздела нет естественного заголовка
Элементы section и article используются аналогично div в HTML4. Они не должны встречаться внутри p, blockquote или address.
Пример использования
<header>
<h1>Название сайта</h1>
<nav>
<ul>
<li><a href=”page1.html”>Страница 1</a></li>
<li><a href=”page2.html”>Страница 2</a></li>
<li><a href=”page3.html”>Страница 3</a></li>
</ul>
</nav>
</header>
<section>
<h2>Свежие статьи</h2>
<article>
<h2>Заголовок статьи 1<h2>
<p>Текст статьи</p>
</article>
<article>
<h2>Заголовок статьи 2<h2>
<p>Текст статьи</p>
<aside>Дополнительная информация, относящаяся к статье 2</aside>
</article>
</section>
<aside>
<section>
<h3>Blogroll</h3>
</section>
<section>
<h3>Реклама</h3>
</section>
</aside>
<footer>
<p>Копирайты<p>
</footer>
По мотивам http://oli.jp/2009/html5-structure1/
