Лучшая разметка HTML5 для боковой панели

Я настраиваю боковые панели WordPress для темы HTML5 и действительно хочу правильно использовать before_widget и after_widget.

Итак, мой вопрос таков: какой из двух шаблонов разметки более уместен? Следующий код полностью находится вне элемента <article>.

Вариант 1: Помимо разделов

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Вариант 2: Div с Asides

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

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

Все мнения приветствуются. Адвокаты дьявола поощряются.

Ответы

Ответ 1

Первый из всех ASIDE должен использоваться только для обозначения связанного контента с основным контентом, а не для общей боковой панели. Второй, по одному для каждой боковой панели

У вас будет только одна сторона для каждой боковой панели. Элементы боковой панели - это элементы div или разделы внутри.

Я бы пошел с Вариант 1: Помимо разделов

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Вот спецификация https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Снова используйте раздел, только если в них есть верхний или нижний колонтитул, в противном случае используйте обычный div.

Ответ 2

Обновление 17/07/27: Поскольку это наиболее востребованный ответ, я должен обновить его, чтобы включить текущую информацию локально (со ссылками на ссылки).

Из спецификации [1]:

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

Большой! Именно то, что мы ищем. Кроме того, лучше также проверить <section>.

Элемент section представляет общий раздел документа или применение. В этом контексте раздел представляет собой тематическую группу содержание. Каждый раздел должен быть идентифицирован, как правило, путем включения заголовок (элемент h1-h6) как дочерний элемент элемента section.

...

Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элементов будет явно указано в схеме документов.

Отлично. Как раз то, что мы ищем. В отличие от <article> [2], который предназначен для "автономного" контента, <section> допускает связанный контент, который не является автономным или достаточно универсальным для элемента <div>.

Таким образом, спецификация предполагает, что использование варианта 1, <aside> с детьми <section> является наилучшей практикой.

Рекомендации

  1. https://www.w3.org/TR/html51/sections.html#the-aside-element
  2. https://www.w3.org/TR/html51/sections.html#elementdef-article
  3. http://html5doctor.com/aside-revisited/

Ответ 3

Посмотрите на следующий пример: спецификация HTML5 о aside.

В нем четко указано, что в настоящее время рекомендуется (октябрь 2012 г.) группировать виджеты внутри элементов aside. Затем каждый виджет является тем, что лучше всего представляет его, nav, серией blockquotes и т.д.

Следующий фрагмент показывает, как в стороне можно использовать для blogrolls и другое боковое содержимое в блоге:

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

Ответ 4

Основываясь на этой диаграмме HTML5 Doctor, я думаю, что это может быть лучшей разметкой:

<aside class="sidebar">
    <article id="widget_1" class="widget">...</article>
    <article id="widget_2" class="widget">...</article>
    <article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->

Я думаю, ясно, что <aside> является подходящим элементом, если он находится вне основного элемента <article>.

Теперь я думаю, что <article> также подходит для каждого виджета в стороне. В слова W3C:

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

Ответ 5

В книге "Руководства HTML5 для разработчиков веб-сайтов: структура и семантика для документов" предложен этот вариант (вариант 1):

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

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

Ответ 6

С тех пор ASIDE была изменена, чтобы включить в нее также и вторичный контент.

HTML5 У доктора есть отличная запись на нем здесь: http://html5doctor.com/aside-revisited/

Выдержки:

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