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

Question

Я настраиваю свои боковые панели 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 id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

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

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

Answer 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

Answer 2

Не верно.Вероятно, вы должны использовать DIV для обоих.<aside> предназначен не для боковых панелей, а для раздела соответствующего содержимого (например, глоссария терминов или дополнительных примечаний по теме).

См. Также: http://html5doctor.com/understanding-aside/

Обновление: Как отметил ниже Джордан, эта статья была обновлена ​​и на нее следует ссылаться, а не на ту, которую я первоначально разместил.И как всегда, если есть сомнения, обратитесь к спецификации!

http://html5doctor.com/aside-revisited/

Обновление от 17.0727: Как этоответ с наибольшим количеством голосов, я должен обновить его, чтобы включить текущую информацию локально (со ссылками на ссылки).

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

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

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

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

...

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

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

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

References

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/

Answer 3

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

. Это ясно, что в настоящее время (октябрь 2012 г.) рекомендуется группировать виджеты внутри * 1006.* элементы.Затем каждый виджет - это то, что лучше всего его представляет: nav, серия blockquotes и т. Д.

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

<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's 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>

Answer 4

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

<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 :

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

Answer 5

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

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

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

Answer 6

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

HTML5 Doctor имеет отличную запись здесь: http://html5doctor.com/aside-revisited/

Отрывок:

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