HTML5 + Раздел или Див

Question

У меня очень специфический вопрос, и я надеюсь, что это нормально, задавая его здесь.

Что из следующего является правильным использованием:

1)

<div id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</div><!-- #more END -->

2)

<section id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</section><!-- #more END -->

3)

<section id="more">
    <section class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
</section><!-- #more END -->

Примечание: фрагмент кода размещен внизу сайта и содержит ссылки на партнерские сайты, ссылки на другие страницы, а также инсайтссылки, ссылающиеся на другую категорию / страницу.

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

А в случае 3)лучше всего: чем я должен также изменить h4 на h1 и поместить их в header?

Answer 1

Ничего из вышеперечисленного.

Раздел определен: «Для раздела в документе. Например, главы, верхние и нижние колонтитулы или любые другие разделы документа».Многие элементы HTML5, такие как section, не предлагают новую функциональность, но вместо этого семантику документа (как вы пометили :).Section и div могут показаться похожими;section - это на самом деле div, который сам по себе содержит метаинформацию.

Для секции есть 3 общих правила:

- Не используйте его просто как ловушку для стилизации или написания сценариев;это div

- Не используйте его, если более подходящим является article, aside или nav

- Не используйте его, если в начале раздела не существует заголовка

Так что это действительно зависит от структуры вашего документа.В HTML «больше» содержит раздел гиперссылок.Вы должны выбрать 2) и изменить элемент section на nav-element.

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

Answer 2

Я думаю, что 3 - это, вероятно, лучшая из перечисленных вами версий, хотя вы, возможно, захотите один раз повторить спецификацию и посмотреть, как описанное использование соответствует тому, что вы ' делаешь Одна вещь, которую я добавлю, состоит в том, что, если она не является частью более крупной группы контента, вы можете рассмотреть возможность использования тега <aside> для переноса ссылок, поскольку этот контент отделен от остальной части страницы. Однако, если он является частью боковой панели или нижнего колонтитула, тег <section> будет работать нормально.

Что касается вопроса <h4> против <h1>, я не уверен на 100%, но это, вероятно, не повредит. W3C предлагает использовать теги иерархически, поэтому я бы сказал, что если у вас нет раздела ссылок внутри другого раздела, использующего <h1>, то это будет правильным решением.