Должен ли я использовать <section> теги внутри <aside>?

Question

Имея разметку, как это:

<aside> 
    <div class="widget"> 
     <h2>Latest news</h2> 
     <ul>...</ul> 
     <a>more news</a> 
    </div> 
    <div class="widget"> 
     <h2>Choose site theme</h2> 
     <input type="select" /> 
    </div> 
    <div class="widget"> 
     <h2>Newsletter subscription</h2> 
     <form>...</form> 
    </div> 
    <div class="widget"> 
     <h2>Related articles</h2> 
     <ul>...</ul> 
    </div> 
</aside> 

Какой тег является более подходящим здесь: <div> или <section>?
Этот раздел должен использоваться только внутри <article> тег и никогда внутри <aside>?

Answer 1

Спецификация HTML 5 не запрещает вам использовать элемент section внутри элемента aside. Элементу aside разрешено иметь содержимое потока внутри, и оно включает элемент section.

Однако, несмотря на то, что элемент div в настоящее время, в HTML5, предположительно является элементом секционирования «последней инстанции», использование section в этом контексте противоречит намерению элемента. Из спецификации мы видим:

Примечание: Элемент сечения не является общим элементом контейнера. Когда элемент нужен только для стилизации или для удобства написания сценариев, авторам рекомендуется использовать элемент div. Общее правило состоит в том, что элемент раздела подходит только в том случае, если содержимое элемента будет явно указано в контуре документа.

Теперь маленькие «разделы» в стороне, безусловно, не то, что принадлежит в общих чертах всего документа, так что короткий ответ на ваш вопрос заключается в использовании div. В качестве альтернативы, потому что ваш взгляд выглядит так, как будто у него есть четыре «предмета» внутри, вы можете рассмотреть ul с четырьмя li s, а затем стиль с правилом aside ul li.

Answer 2

Да, вы можете использовать section.

Когда вы используете заголовки, you have "implicit" sections anyway. Используя section, вы можете сделать их явными, то есть encouraged (см. Последнюю цитату).

Эти фрагменты являются семантически эквивалентны (они имеют один и тот же outline):

<!-- using headings + div elements --> 
<aside class="example-1"> 
    <h1>Heading for this aside</h1> 
    <div> 
    <h2>Latest news</h2> 
    <p>…</p> 
    </div> 
    <div> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
    </div> 
</aside> 

<!-- using headings only --> 
<aside class="example-2"> 
    <h1>Heading for this aside</h1> 
    <h2>Latest news</h2> 
    <p>…</p> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
</aside> 

<!-- using section elements --> 
<aside class="example-3"> 
    <h1>Heading for this aside</h1> 
    <section> 
    <h2>Latest news</h2> 
    <p>…</p> 
    </section> 
    <section> 
    <h2>Choose site theme</h2> 
    <p>…</p> 
    </section> 
</aside> 

Примечание: если вы не обеспечить заголовок для aside, очертание документ будет отличаться при section используется. Это не плохо. Я предполагаю, что контур - это то, что вы обычно хотите. Вы можете играть с gsnedders 'online outliner.

Конечно, вы можете также иметь другие элементы секционирования вместо section внутри из aside (например, nav для навигации этого aside или article для списка соответствующих должностей и т.д.).

---

Side Примечание: В вашем случае, вы можете рассмотреть возможность использования нескольких aside элементов вместо этого. На это нельзя ответить в целом, это зависит от содержимого, но правило может быть: используйте один aside с несколькими sections/заголовками внутри, если все эти разделы связаны каким-то образом (т. Е. Если вы можете найти заголовок, который описывает все эти разделы). Используйте несколько aside, если нет.

Так что ваш пример может выглядеть следующим образом:

<aside class="widget"> 
    <h2>Latest news</h2> 
    <ul>…</ul> 
    <a>more news</a> 
</aside> 

<aside class="widget"> 
    <h2>Choose site theme</h2> 
    <input type="select" /> 
</aside> 

<aside class="widget"> 
    <h2>Newsletter subscription</h2> 
    <form>…</form> 
</aside> 

<aside class="widget"> 
    <h2>Related articles</h2> 
    <ul>…</ul> 
</aside> 

(и использовать контейнер div для них, если вам нужно.)