web-dev-qa-db-de.com

Bestes HTML5-Markup für die Seitenleiste

Ich richte meine WordPress Sidebars für ein HTML5-Thema ein und möchte wirklich before_widget Und after_widget Richtig verwenden.

Meine Frage lautet also: Welches der beiden Markup-Muster ist geeigneter? Der folgende Code befindet sich vollständig außerhalb des Elements <article>.

Option 1: Abgesehen von Abschnitten

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

Option 2: Div with Asides

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

Ich nehme an, die Zusatzfrage lautet dann, welche Überschrift für jeden Widget-Titel verwendet werden soll. Wenn ich jedes Widget mit einem <section> Umhülle, ist <h1> Am besten geeignet. Wenn ich <aside> Verwende, bin ich mir nicht sicher.

Alle Meinungen sind willkommen. Devil's Advocates ermutigt.

61
mrwweb

Als erstes darf ASIDE nur verwendet werden, um verwandte Inhalte mit Hauptinhalten zu kennzeichnen, nicht für eine allgemeine Seitenleiste. Zweitens , eine Seite nur für jede Seitenleiste

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

Ich würde mit Option 1 gehen: Neben 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 section erneut nur, wenn sie einen header oder footer haben, andernfalls verwenden Sie ein einfaches div.

54
aWebDeveloper

Update 17/07/27: Da dies die am häufigsten gewählte Antwort ist, sollte ich diese aktualisieren, um aktuelle Informationen vor Ort aufzunehmen (mit Links zu den Referenzen) .

Aus der Spezifikation [1]:

Das aside-Element stellt einen Abschnitt einer Seite dar, der aus Inhalten besteht, die tangential mit dem Inhalt des übergeordneten Abschnittsinhalts in Beziehung stehen und von diesem Inhalt getrennt betrachtet werden können. Solche Abschnitte werden in der gedruckten Typografie häufig als Seitenleisten dargestellt.

Groß! Genau das, wonach wir suchen. Außerdem ist es am besten, auch <section> Zu überprüfen.

Das section-Element repräsentiert einen allgemeinen Abschnitt eines Dokuments oder einer Anwendung. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten. Jeder Abschnitt sollte identifiziert werden, indem normalerweise eine Überschrift (h1-h6-Element) als untergeordnetes Element des Abschnittselements eingefügt wird.

...

Eine allgemeine Regel lautet, dass das Abschnittselement nur geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird.

Ausgezeichnet. Genau das, wonach wir suchen. Im Gegensatz zu <article> [2] Für "in sich abgeschlossene" Inhalte ermöglicht <section> verwandte Inhalte, die nicht eigenständig oder generisch genug für ein <div> - Element sind.

Die Spezifikation scheint daher darauf hinzudeuten, dass die Verwendung von Option 1, <aside> Mit <section> - Kindern die beste Vorgehensweise ist.

Referenzen

  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/
24
David Bradbury

Schauen Sie sich das folgende Beispiel aus der HTML5-Spezifikation zu aside an.

Es wird deutlich, dass derzeit empfohlen wird (Oktober 2012), Widgets in aside -Elementen zu gruppieren. Dann ist jedes Widget das, was es am besten darstellt, ein nav, eine Serie von blockquotes usw

Der folgende Auszug zeigt, wie aside für Blogrolls und andere Nebeninhalte in 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="/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>
11

Basierend auf diesem HTML5-Doktordiagramm denke 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, es ist klar, dass <aside> Das geeignete Element ist, solange es außerhalb des Hauptelements <article> Liegt.

Jetzt denke ich, dass <article> Auch für jedes Widget in der Seite geeignet ist. In die Worte des W3C :

Das Artikelelement stellt eine in sich geschlossene Zusammensetzung in einem Dokument, einer Seite, einer Anwendung oder einer Site dar und ist im Prinzip unabhängig voneinander verteilbar oder wiederverwendbar, z. in syndication. Dies kann ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.

6
mrwweb

Das Buch HTML5-Richtlinien für Webentwickler: Struktur und Semantik von Dokumenten schlug folgendermaßen vor (Option 1) :

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

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

2
alds

Die ASIDE wurde seitdem geändert, um auch sekundäre Inhalte einzubeziehen.

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

Auszug:

Bei der Neudefinition von beiseite ist es entscheidend, sich des Kontexts bewusst zu sein. > Bei Verwendung in einem Artikelelement sollte der Inhalt speziell auf diesen Artikel bezogen sein (z. B. ein Glossar). Wenn der Inhalt außerhalb eines Artikelelements verwendet wird, sollte er sich auf die Site beziehen (z. B. ein Blogroll, Gruppen zusätzlicher Navigation und sogar Werbung, wenn dieser Inhalt sich auf die Seite bezieht).

0
Kray