Структура HTML5 - <article>, <section>и <div>использование

Question

Добрый день,

Я только начал изучать HTML5 - нет проблем, все идет отлично.

У меня только один маленький вопрос о семантическом использовании тегов <article>, <section> и <div>.

Я знаю, что элемент <div> не имеет семантического значения - в HTML5 его следует использовать в основном для сценариев / стилей. Здесь все для меня понятно. Я нашел много полезной информации в вопросе SO: HTML5 имеет новые теги article, section и aside. Когда я должен использовать тег div? .

Однако у меня есть некоторые проблемы с использованием <article> и <section>. Спецификация W3C HTML5 гласит, что <article> tag

Определяет независимый, автономный контент, может быть новостной статьей, публикацией в блоге, публикацией на форуме или другими статьями, которые могут распространяться независимо от остальной части сайта.

где следует использовать тег <section>

Для раздела в документе. Например, главы, верхние и нижние колонтитулы или любые другие разделы документа.

В теории все понятно. Тем не менее, при подготовке кода для моего первого веб-сайта HTML5 мне было трудно его отличить.

Позвольте мне объяснить структуру моего сайта:

1. Фон добавляется в элемент body. Работает отлично.
2. Я использую сеточную систему 960.gs в каждом своем проекте HTML / CSS. На этот раз я тоже этим пользуюсь. Как вы наверняка знаете, он требует добавления контейнера (с классом: container_12 в моем случае).

В заключение объяснения моей структуры:

1. В качестве основного контейнера я использовал <div class="container_12">
2. Первый элемент в моем документе - <header>. Он содержит несколько элементов: слайдер и верхнюю панель. Верхний бар - <section>. Он имеет два дочерних элемента: номер телефона слева и список языков справа. Для этих элементов я также использовал <section>. Для ползунка (или для краткого слогана на внутренних страницах) я использовал тег <section>, который содержит два тега <section>: левый и правый столбец.
3. В качестве основной оболочки контента для домашней страницы я решил использовать элемент <section>. Для внутренних страниц я использую <article> для таких страниц, как О нас и т. Д. Для списка блогов я использую <section> со списком <article> тегов внутри. Для одного поста я использую элемент <article>.
4. Очевидно, что для нижнего колонтитула я использую элемент <footer> с тремя <section> элементами в качестве оберток для столбцов.

Мой макет перед преобразованием в HTML5:

<div class="container_12">
    <div class="grid_12 header">
        <div class="bar grid_12 alpha omega">
            <div class="grid_6 alpha">
                Phone number
            </div>
            <div class="grid_6 omega">
                German - English - French
            </div>
        </div>
        <div class="grid_6 alpha">
            LOGOTYPE
        </div>
        <div class="grid_6 omega">
            <ul>
                navigation
            </ul>
        </div>
        <div class="grid_12 alpha omega">
            <div class="grid_6 alpha">
                Slider I col
            </div>
            <div class="grid_6 omega">
                Slider II col
            </div>
        </div>
    </div>
    <div class="grid_12 content">

    </div>
    <div class="grid_12 footer">
        <div class="grid_4 alpha">
            Footer I col
        </div>
        <div class="grid_4">
            Footer II col
        </div>
        <div class="grid_4 omega">
            Footer III col
        </div>
    </div>
</div>

Вот мой код после преобразования его в HTML5:

<div class="container_12">
    <header class="grid_12">
        <section class="bar grid_12 alpha omega">
            <section class="grid_6 alpha">
                Phone number
            </section>
            <section class="grid_6 omega">
                German - English - French
            </section>
        </section>
        <section class="grid_6 alpha">
            LOGOTYPE
        </section>
        <nav class="grid_6 omega">
            <ul>
                navigation
            </ul>
        </nav>
        <section class="grid_12 alpha omega">
            <section class="grid_6 alpha">
                Slider I col
            </section>
            <section class="grid_6 omega">
                Slider II col
            </section>
        </section>
    </header>

    <section class="grid_12 content">

    </section>
    <footer class="grid_12">
        <section class="grid_4 alpha">
            Footer I col
        </section>
        <section class="grid_4">
            Footer II col
        </section>
        <section class="grid_4 omega">
            Footer III col
        </section>
    </footer>
</div>

Мой подход правильный? Не могли бы вы добавить или исправить что-то?

Чтобы избежать каких-либо вопросов: я знаю, что <section> не является заменой для <div>.

Answer 1

Ну, один из способов ответить на это - взглянуть на схему документа, используя инструмент, подобный http://gsnedders.html5.org/outliner/.. Вы заметите, что для каждого раздела нужен заголовок, чтобы иметь смысл, поэтому без некоторого содержаниятяжело сказать.Если в каждом разделе есть H!тег, который имеет смысл, то обычно это правильно.Если разделу не нужен h1, то это обычно неправильно.

Разделы должны иметь смысл сами по себе, без контекста.Простой способ понять это - подумать о канале RSS - каждая запись в канале похожа на раздел.Если вы добавите его в канал RSS (или это будет иметь смысл в этом контексте), то это, вероятно, раздел.Если это просто столбец в нижнем колонтитуле, то вы бы не поместили его в канал RSS, поэтому, вероятно, это не раздел.

Исходя из этого, я бы, вероятно, сделал что-то подобное (основываясь на моемпредположение о том, что вы вкладываете в каждый бит).Я также добавляю основные роли WAI-ARIA, поскольку они просты и имеют большое значение при использовании программы чтения с экрана.

<div class="container_12">
    <header class="grid_12" role="banner">
        <div class="bar grid_12 alpha omega">
            <div class="grid_6 alpha">
                Phone number
            </div>
            <div class="grid_6 omega">
                German - English - French
            </div>
        </div>
        <div class="grid_6 alpha">
            LOGOTYPE
        </div>
        <nav class="grid_6 omega" role="navigation">
            <ul>
                navigation
            </ul>
        </nav>
        <div class="grid_12 alpha omega">
            <div class="grid_6 alpha">
                Slider I col
            </div>
            <div class="grid_6 omega">
                Slider II col
            </div>
        </div>
    </header>

    <section class="grid_12 content" role="main">
          <!-- Not sure what goes in here? Let's assume it's the main content. -->
    </section>
    <footer class="grid_12">
        <div class="grid_4 alpha">
            Footer I col
        </div>
        <div class="grid_4">
            Footer II col
        </div>
        <div class="grid_4 omega">
            Footer III col
        </div>
    </footer>
</div>