В формате разметки HTML5 появились новые элементы, которые служат заменой для обычных блочных элементов с атрибутами class и id, например <div class="article"> или <div id="page">.

Рассмотрим три элемента, которые легко можно спутать друг с другом:

• div — «базовый контейнер», который мы все знаем и любим. Это обычный блочный элемент без какого-либо семантического значения.
• section — «документ или раздел приложения». Обычно содержит верхний (header) и нижний (footer) колонтитулы. Это несколько схожих по смыслу статей, подраздел одной большой статьи, главная часть страницы (например, раздел новостей) или страница интерфейса с закладками.
• article — «независимая часть документа или сайта». Эта часть должна иметь смысл вне зависимости от остального содержания. Например, это может быть статья в блоге или форуме, комментарий. Так же как и section внутри этого тега могут размещать верхний и нижний колонтитулы.

Описание на whatwg.org

Разница между 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).

Чтобы определиться, какой из элементов выбрать, можно использовать алгоритм:

1. Будет ли содержимое иметь осмысленное значение само по себе, например, при публикации в RSS-потоке? Если да, то выбираем article
2. Если части содержимого объединены общим значением, то выбираем section
3. Наконец, если нет никакого семантического значения, то выбираем div

Элемент section, за редким исключением, не должен использоваться, если у него нет заголовка. Если при автоматическом построении содержания документа будут встречаться не именованные разделы, то, вероятно, разметка сделана не верно. Однако наличие не именованных элементов nav и aside может быть вполне типичным явлением.

Итак, элемент section не стоит использовать если:

1. требуется блочный элемент для декорирования. Это функция элемента div
2. в этом месте для разметки содержимого больше по смыслу подходят элементы article, aside или nav
3. у раздела нет естественного заголовка

Элементы 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/