Как правильно использовать семантику html5?

Question

[nepster-web]

Хочу попробовать начать верстать сайты используя все инструменты html5, включая четкую и правильную семантику. Я прочитал про новые теги, но все-же у меня возникли вопросы касательно семантики.

К примеру есть вот такой макет:


Я сделал следующую разметку:

<div class="section-top">
    языковая панель
</div>
<header class="header">
    <nav class="navbar-collapse collapse">
     навигация 
    </nav>
</header>
<section class="project-present pattern-overlay-ex1">
    <div class="pager">
        <a href="" class="previous"></a>
        <div class="info">
            <h2 id="project-present-title">...</h2>
            <mark id="project-present-description">...</mark>
        </div>
        <a href="" class="next"></a>
    </div>
    <div class="content">
        <div id="project-present-image">
            ...
        </div>
        <figure class="group sm">
            <aside>
                ...
            </aside>
            <aside>
                ...
            </aside>
            <aside>
                ...
            </aside>
        </figure>
        <figure class="group">
            <aside>
                ...
            </aside>
            <aside>
                ...
            </aside>
            <aside>
                ...
            </aside>
        </figure>
        <div class="clearfix"></div>
    </div>
</section>
<section class="project-about pattern-overlay-ex2">
    <article class="content">
    ...
    </article>
</section>
<section class="project-screenshots">
    <article class="content">
    ...
    </article>
</section>
<section class="project-team pattern-overlay-ex2">
    <article class="content">
    ...
    </article>
</section>

Собственно первый вопрос такой:
Правильно ли я понял значение html5 тегов?

И если проверить верстку html валидатором, то там есть несколько предупреждений касательно тега section, а именно:

Предупреждение: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

и таких вот предупреждений несколько, на каждую секцию. Насколько это плохо?

Answer 1

[bromzh]

Всё очень плохо.
figure - для группировки картинки и подписи. Что там делают несколько aside - непонятно.
aside - для бокового блока, который содержит информацию, косвенно относящуюся к содержимому article. Если aside вне article - то это обычно просто сайдбар или что-то похожее.
Зачем article оборачивать в section?
Языковую панель в принципе можно сделать в виде menu.
Секции нужны для замены h1-h6 в иерархии документа (где-то натыкался на грамотное объяснение, но можно посмотреть и тут). Собственно поэтому в каждой секции должен быть как минимум один h. Если несколько h - объединяй в hgroup. Если нужен h и ещё что-нибудь (p, span, etc), не относящееся к непосредственно основной инфе - объединяй в header.

Comments

[Андрей Самойленко]

"вне article - то это обычно просто сайдбар или что-то похожее."
использовать aside для создание сайдбара - неправильно! логичнее для этой цели section.
aside - дополнение к статье (выноска, цитата, "по теме")

Answer 2

[uranus235]

Как я понял, предупреждение означает, что к каждому section нужно добавлять заголовки h2-h6

Comments

[nepster-web]

я в курсе, но мне не нужны заголовки в секциях в данном случае. Тоесть является ли это проблемой ? И правильна вообще организована семантика ?

[uranus235]

@nepster09 нет, это не критично. А насчет семантики, думаю есть ошибки.
Тег <article> используется для разметки статей, в остальном все нормально. Хотя думаю, вместо многих <aside> можно было бы сделать один большой <aside> и множество <div> внутри него, но тут уже дело вкуса.