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

Ответ 1

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

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

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

Теперь маленькие "секции" в стороне, безусловно, не являются чем-то, что относится к контуру всего документа, поэтому короткий ответ на ваш вопрос - использовать div. В качестве альтернативы, потому что ваш взгляд выглядит так, как будто у него есть четыре "элемента" внутри, вы можете рассмотреть ul с четырьмя li, а затем стиль с правилом aside ul li.

Ответ 2

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

Когда вы используете заголовки, у вас есть "неявные" разделы в любом случае. Используя section, вы можете сделать их явными, что рекомендуется (см. Последнюю цитату).

Эти фрагменты семантически эквивалентны (они имеют одинаковые 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 онлайн-outliner.

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

Боковое примечание. В вашем случае вы можете использовать несколько элементов 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, если он вам нужен.)