Devo usare i tag <section> all'interno di <aside>?

Question

Avere un markup come questo:

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

Quale tag è più appropriato qui: <div> o <section>?
La sezione deve essere utilizzata solo all'interno del tag <article> e mai all'interno di <aside>?

Answer 1

Le specifiche HTML 5 non vi impediscono di utilizzare l'elemento all'interno di un elemento aside. L'elemento aside può contenere contenuto di flusso all'interno e include l'elemento section.

Tuttavia, anche se l'elemento div è ora, in HTML5, si suppone che sia l'elemento di sezione di "ultima istanza", l'utilizzo di section in questo contesto va contro l'intento dell'elemento. Dallo spec. Vediamo:

Nota: l'elemento sezione non è un elemento contenitore generico. Quando un elemento è necessario solo per scopi di stile o per comodità di scripting, gli autori sono incoraggiati a utilizzare invece l'elemento div. Una regola generale è che l'elemento della sezione è appropriato solo se i contenuti dell'elemento vengono elencati esplicitamente nella struttura del documento.

Ora, piccoli "sezioni" di una parte non sono sicuramente qualcosa che appartengono nel panorama di tutto il documento, in modo che il breve risposta alla tua domanda è quello di utilizzare div. In alternativa, poiché la tua parte sembra che abbia quattro "elementi" all'interno, potresti prendere in considerazione uno ul con quattro li se poi stile con la regola aside ul li.

Answer 2

Sì, è possibile utilizzare section lì.

Quando si utilizzano le intestazioni, you have "implicit" sections anyway. Utilizzando section, è possibile renderli espliciti, ovvero encouraged (vedere l'ultimo preventivo).

Questi frammenti sono semanticamente equivalenti (hanno lo stesso 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> 

Nota: se non si fornire un titolo del aside, il contorno del documento sarà diverso quando section si usa. Quale non è una cosa cattiva; Immagino che lo schema sia quello che in genere vuoi comunque. Puoi giocare con lo online outliner di gsnedders.

Naturalmente si può avere anche altri elementi di sezionamento, invece di section all'interno della aside (ad esempio nav per la navigazione di quel aside, o article per un elenco di post correlati, etc.).

---

Nota a margine: Nel tuo caso, si potrebbe considerare l'utilizzo di diversi elementi aside invece. Questo non può essere risolto in generale, dipende dal contenuto, ma una regola empirica potrebbe essere: utilizzare uno sections/intestazioni all'interno di uno sections/intestazioni, se tutte le sezioni sono correlate in qualche modo (cioè se si può trovare un'intestazione che descrive tutte queste sezioni). Utilizzare più aside, in caso contrario.

Così il vostro esempio potrebbe apparire come:

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

(e utilizzare un contenitore div per questi, se ne avrete bisogno.)