Структура HTML5 — div, section и article :: Хранитель заметок



Поиск среди заметок:

Найти

Структура HTML5 — div, section и article :: Хранитель заметок

Персональный журнал для заметок Владимира Кузнецова
ЗаметкиВёрстка › Структура HTML5 — div, section и article

Структура HTML5 div, section и article

В формате разметки 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/

Коментарии к заметке
  1. Александр,

    22 мар 2013

    Хорошая, годная статья. Спасибо!

  2. Липсум,

    07 авг 2013

    Спасибо, давно хотелось прочесть столь вменяемый и хороший текст по обозначенной теме. Всех благ автору!

  3. Константин,

    17 авг 2013

    Чётко и по делу. Что, когда и где применять. лучше не нашёл, везде инфа или неполная, или неточная. Сайт в закладках полюбому.

  4. дмитрий,

    07 окт 2013

    Спасибо, интересно и помогло, как раз разбираюсь с семантикой html 5

  5. Виталий,

    11 ноя 2013

    Больше нечего добавить. Спасибо!

  6. Сергей,

    17 янв 2014

    Отличная статья, особенно пример мне очень помог. Спасибо.

  7. Данил,

    23 апр 2014

    Спасибо наконец разобрался что, к чему.

  8. nikman,

    11 май 2014

    Коротко и ясно 🙂

  9. alex,

    12 июл 2014

    Полный бред, не нашел ни единственной причины, чтобы использовать section или article, вместо всеми любимого div’а. Это тоже самое, что утверждать, что для звонка нужно использовать iPhone 6, а не старенький самсунг, хотя в плане совершения звонка самсунг уже всем полюбился и нет нужды его чем то заменять.

  10. Профессионалы применяют эти теги не из-за того, что они модные. Они нужны, чтобы наполнить разметку смыслом для вспомогательных технрологий, поисковиков, роботов и т.п. Вы можете верстать одними div-ами и вообще никакие другие теги кроме него не использовать. И это не шутка.

  11. Максим,

    29 май 2015

    Я так и не понял про отличие article от section.

    Ваш пример:

    <aside>
        <section>
            <h3>Blogroll</h3>
        </section>
        <section>
            <h3>Реклама</h3>
        </section>
    </aside>
    
    

    Но ведь можно вместо section написать article? Реклама это же самодостаточный раздел? он не зависит ни от чего другого… контент может быть один, а реклама вообще на другую тему…

    короче бредятина это все с этими элементами, только запутывает больше…

    дальше:

    <section>
        <h2>Свежие статьи</h2>
        <article>
            <h2>Заголовок статьи 1</h2>
            <p>Текст статьи</p>
        </article>
        <article>
            <h2>Заголовок статьи 2</h2>
            <p>Текст статьи</p>
            <aside>Дополнительная информация, относящаяся к статье 2</aside>
        </article>
    </section>
    
    

    Из статьи про section — «…объекты, которые располагаются внутри него, объединены общим смыслом

    Разве в примере в section объекты объединены общим смыслом?

    Свежие статьи

    "Заголовок статьи 1" = Автоваз выпускает новый автомобиль

    "Заголовок статьи 2" = Сборная России выиграла чемпионат мира

    и где тут общий смысл внутри section не пойму?

  12. Спасибо за вопросы.

    <article> подразумевает, что внутри блока будет много текста. Если у вас блок с рекламой состоит из пары картинок, то это, увы, не тянет на «много текста» и, соответственно, на тег article. И под «много текста» я подразумеваю хотя бы несколько полноценных предложений. При выборе тегов стоит опираться на их содержимое.

    и где тут общий смысл внутри section не пойму?

    Вы сами его процитировали: Свежие статьи

    Про объединение нескольких статей тегом <section> всё очень просто. Статьи выводятся списком. Раз они попали в список, то у этого списка есть заголовок. Он и отражает их общий смысл. Если к блоку section вы не можете придумать заголовок, то это используйте div.

    В вашем примере статьи связывает только то, что они были недавно опубликованы. Если вы посмотрите на список статей в какой-либо категории, то их общий смысл станет более очевидным.

Добавить комментарий
Ваше имя

Email

Сайт, если есть

Комментарий

В комментариях можно использовать Markdown.

Отправить комментарий

© 2009–2015 Владимир Кузнецов.

Все права защищены и принадлежат их владельцам.

Копирование материалов данного блога допускается только с разрешения автора.

Обслуживание 1С, Москва Компания "Пять с плюсом".


http://noteskeeper.ru/54/

Губарь Маргарита Александровна