Bestes HTML5-Markup für die Seitenleiste

Question 1

Ich richte meine WordPress-Seitenleisten für ein HTML5-Design ein und möchte es wirklich verwenden before_widget und after_widget Rechts.

Meine Frage lautet also: Welches der beiden Markup-Muster ist besser geeignet? Der folgende Code ist komplett außerhalb der <article> Element.

Option 1: Beiseite mit Abschnitten

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

Option 2: Div mit Nebenbemerkungen

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

Ich nehme an, die Hilfsfrage ist dann, welche Überschrift für jeden Widget-Titel verwendet werden soll. Wenn ich jedes Widget in eine <section> dann <h1> scheint am geeignetsten. Wenn ich benutze <aside>Ich bin mir nicht sicher.

Alle Meinungen willkommen. Devil’s Advocate ermutigt.

Question 2

Zuerst von allen ASIDE soll nur verwendet werden, um verwandte Inhalte zum Hauptinhalt zu kennzeichnen, nicht für eine generische Seitenleiste. Zweitenur eine für jede Seitenleiste

Sie haben nur eine Seite für jede Seitenleiste. Elemente einer Seitenleiste sind Divs oder Abschnitte innerhalb einer Seitenleiste.

Ich würde mit gehen Option 1: Beiseite mit Abschnitten

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

Hier ist die Spezifikation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Verwenden Sie den Abschnitt erneut nur, wenn Sie einen haben Header oder Fusszeile in ihnen, verwenden Sie andernfalls ein einfaches div.

Question 3

Update 17.07.27: Da dies die Antwort mit den meisten Stimmen ist, sollte ich diese aktualisieren, um aktuelle Informationen vor Ort aufzunehmen (mit Links zu den Referenzen).

Von der spez ^[1]:

Das aside-Element stellt einen Abschnitt einer Seite dar, der aus Inhalt besteht, der tangential mit dem Inhalt des übergeordneten Abschnittsinhalts zusammenhängt und der als von diesem Inhalt getrennt betrachtet werden könnte. Solche Abschnitte werden in der gedruckten Typografie oft als Seitenleisten dargestellt.

Groß! Genau das, was wir suchen. Darüber hinaus ist es am besten zu überprüfen <section> auch.

Das Abschnittselement repräsentiert einen generischen Abschnitt eines Dokuments oder einer Anwendung. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten. Jeder Abschnitt sollte identifiziert werden, in der Regel durch Einfügen einer Überschrift (h1-h6-Element) als untergeordnetes Element des Abschnittselements.

…

Als allgemeine Regel gilt, dass das Abschnittselement nur dann angemessen ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wäre.

Exzellent. Genau das, wonach wir suchen. Im Gegensatz zu <article> ^[2] was für “in sich geschlossene” Inhalte ist, <section> ermöglicht verwandte Inhalte, die nicht eigenständig oder generisch genug für a sind <div> Element.

Daher scheint die Spezifikation darauf hinzudeuten, dass Option 1 verwendet wird, <aside> mit <section> Kinder ist Best Practice.

Verweise

https://www.w3.org/TR/html51/sections.html#the-aside-element

Question 4

Betrachten Sie das folgende Beispiel aus der HTML5-Spezifikation über aside.

Es macht deutlich, dass derzeit (Oktober 2012) empfohlen wird, Widgets darin zu gruppieren aside Elemente. Dann ist jedes Widget das, was es am besten repräsentiert, a naveine Reihe von blockquotesetc

Der folgende Auszug zeigt, wie aside für Blogrolls und andere Nebeninhalte auf einem Blog verwendet werden kann:

<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="http://stackoverflow.com/last-post">My last post</a>
    <li><a href="http://stackoverflow.com/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="http://stackoverflow.com/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="http://stackoverflow.com/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="http://stackoverflow.com/archives">Archives</a> —
   <a href="http://stackoverflow.com/about">About me</a> —
   <a href="http://stackoverflow.com/copyright">Copyright</a>
  </nav>
 </footer>
</body>

Question 5

Basierend auf HTML5 Doctor-Diagrammdenke ich, dass dies das beste Markup sein könnte:

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

Ich denke das ist klar <aside> ist das entsprechende Element, solange es ist außen die wichtigsten <article> Element.

Nun, das denke ich <article> ist auch für jedes Widget im Anhang angebracht. Im die Worte des W3C:

Das Artikelelement stellt eine eigenständige Zusammenstellung in einem Dokument, einer Seite, einer Anwendung oder einer Website dar und ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z. B. in Syndication. Dabei kann es sich um einen Forumsbeitrag, einen Zeitschriften- oder Zeitungsartikel, einen Blogeintrag, einen von einem Benutzer eingereichten Kommentar, ein interaktives Widget oder Gadget oder einen beliebigen anderen unabhängigen Inhalt handeln.

Question 6

Das Buch HTML5-Richtlinien für Webentwickler: Struktur und Semantik für Dokumente auf diese Weise vorgeschlagen (Option 1):

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

Es weist auch darauf hin, dass Sie Abschnitte in der Fußzeile verwenden können. Der Abschnitt kann also außerhalb des eigentlichen Seiteninhalts verwendet werden.

Question 7

Ich bin überrascht, dass keine der obigen Antworten responsives Design berücksichtigt.

Ich kann gültig sein beiseite Elemente wie eine Schlagwortwolke, Links zum Weiterlesen usw. werden nacheinander in meiner Seitenleiste angezeigt, wenn meine Seite auf einem Desktop-Gerät angezeigt wird. Wenn meine Seite jedoch auf einem mobilen Gerät auf eine einzelne Spalte reduziert wird, trenne ich diese Elemente. Mein Navigationselement befindet sich zwischen meiner Kopfzeile und den Hauptinhaltselementen, und Links zum Weiterlesen befinden sich unter dem Hauptinhaltselement und über der Fußzeile.

Da sich der semantische Inhalt dieser Elemente nicht mit der Breite des Anzeigefensters ändert, müssen sie einzeln als gekennzeichnet werden beiseite Elemente. Daraus folgt, dass die Seitenleiste selbst nicht als gekennzeichnet werden sollte beiseite -Element, auch wenn es nur Inhalte eines Typs enthält. Dies bedeutet wiederum, dass Option 1 in der ursprünglichen Frage unerwünscht (falsch?) sein muss und Option 2 die bessere Antwort sein sollte.

Question 8

Die ASIDE wurde seitdem so modifiziert, dass sie auch sekundäre Inhalte enthält.

HTML5 Doctor hat hier eine großartige Beschreibung dazu:
http://html5doctor.com/aside-revisited/

Auszug:

Bei der neuen Definition von beiseite ist es entscheidend, sich des Kontextes bewusst zu bleiben. >Bei Verwendung innerhalb eines Artikel-Elements sollten die Inhalte einen >spezifischen Bezug zu diesem Artikel haben (z. B. ein Glossar). Wenn sie außerhalb eines Artikelelements verwendet werden, sollten die >Inhalte einen Bezug zur Website haben (z. B. eine Blogroll, Gruppen zusätzlicher >Navigation und sogar Werbung, wenn sich dieser Inhalt auf die Seite bezieht).