Soll ich <section> Tags innerhalb <aside> verwenden?

Question

eine Auszeichnungs wie diese zu haben:

<aside> 
    <div class="widget"> 
     <h2>Latest news</h2> 
     <ul>...</ul> 
     <a>more news</a> 
    </div> 
    <div class="widget"> 
     <h2>Choose site theme</h2> 
     <input type="select" /> 
    </div> 
    <div class="widget"> 
     <h2>Newsletter subscription</h2> 
     <form>...</form> 
    </div> 
    <div class="widget"> 
     <h2>Related articles</h2> 
     <ul>...</ul> 
    </div> 
</aside> 

Welche Tag besser geeignet ist hier: <div> oder <section>?
Soll der Abschnitt nur innerhalb von <article> Tags verwendet werden und niemals innerhalb von <aside>?

Answer 1

Die HTML 5-Spezifikation verbietet Ihnen nicht, das section Element innerhalb eines aside Elements zu verwenden. Das Element aside darf innerhalb des Elements einen Flussinhalt enthalten, einschließlich des Elements section.

Obwohl das Element div jetzt, in HTML5, das Schnittelement von "last resort" sein soll, geht die Verwendung von section in diesem Kontext gegen die Absicht des Elements. Aus der Spezifikation, die wir sehen:

Hinweis: Das Abschnitt Element ist kein generisches Container-Element. Wenn ein Element nur für Styling-Zwecke oder zum Zweck der Skripterstellung benötigt wird, sollten Autoren stattdessen das Element div verwenden. Eine allgemeine Regel ist, dass das section-Element nur dann geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt würde.

Nun wenig „Abschnitte“ eines sind beiseite definitiv nicht etwas, das in der Gliederung des gesamten Dokuments gehört, so die kurze Antwort auf Ihre Frage ist div zu verwenden. Alternativ, weil Ihre Seite scheint, dass es vier "Elemente" innerhalb hat, könnten Sie eine ul mit vier li s betrachten und dann mit der Regel aside ul li style.

Answer 2

Ja, Sie können section dort verwenden.

Wenn Sie Überschriften verwenden, you have "implicit" sections anyway. Mit section können Sie sie explizit machen, das ist encouraged (siehe letztes Zitat).

Diese Schnipsel sind semantisch äquivalent (sie haben die gleiche 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> 

Hinweis: wenn Sie das tun nicht eine Überschrift sorgen für die aside, wird das Dokument Umriss anders sein, wenn section wird eingesetzt. Was nicht schlimm ist; Ich nehme an, dass diese Skizze das ist, was du normalerweise willst. Sie können mit gsnedders online outliner spielen.

Natürlich können Sie auch andere sectioning Elemente anstelle von section innerhalb des aside (z nav für die Navigation des aside oder article für eine Liste von verwandten Beiträge, etc.).

---

Randbemerkung: In Ihrem Fall können Sie stattdessen mit mehreren aside Elemente in Betracht ziehen. Dies kann nicht allgemein beantwortet werden, es hängt vom Inhalt ab, aber eine Faustregel könnte sein: Benutze einen aside mit mehreren sections/Überschriften darin, wenn alle diese Abschnitte irgendwie zusammenhängen (dh wenn du eine Überschrift findest, die beschreibt all diese Abschnitte). Verwenden Sie mehrere aside, wenn nicht.

So könnte Ihr Beispiel wie folgt aussehen:

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

(und einen Behälter div für diese verwenden, wenn man einen braucht.)