HTML5, <section> nell'elenco non ordinato

Question

Posso usare il tag <section> all'interno dell'elenco non ordinato?

Lo so, che <section> rappresenta una sezione generica del documento. Di solito troviamo la voce all'interno.

Quindi ... Ho una lista di prodotti. Di solito circa 20 per pagina. Ogni elemento ha:

• voce,

• breve descrizione (max 255 caratteri),

• miniature, alcuni dettagli, pulsante.

Quindi ogni voce di elenco è qualcosa di simile alla sezione, "is a thematic grouping of content, typically with a heading".

Ovviamente non lo uso, <section> per lo styling.

Penso che <section> potrebbe anche essere qui un wrapper per un elenco e ogni elemento dell'elenco <article>.

Qual è la tua opinione?

Answer 1

A Elenco DO ...

UTILIZZARE sezione per ogni singola sezione di un selettore di schede o cursore contenuto (se un elenco non ordinato senza)
USARE sezione per dividere un termini lunghi” e le condizioni”(o simili) pagina in sezioni numerate
dO elementi della sezione nido, se necessario (come si potrebbe fare con i‘termini e condizioni pagina’)

Un elenco di cosa non fare ...

NON utilizzare la sezione per dividere il contenuto dall'intestazione e dal piè di pagina; utilizzare invece div (vedere il medico)
NON usare la sezione per avvolgere un selettore di tabulazioni per manipolazione o styling DOM
NON utilizzare la sezione per la barra laterale o altre caselle di contenuto relative alla tangenza; usa invece invece
NON usare la sezione solo per aggiungere un bordo o rilasciare ombra attorno a qualcosa; utilizzare invece div
NON utilizzare la sezione per il wrapper quando si implementano le colonne faux; di nuovo, usa div invece
NON usare la sezione per nidificare gli elementi quando si cerca di evitare il bug a doppio margine float di IE6 (o un problema simile al layout); di nuovo, usa div
NON usare la sezione per tenere un singolo autore bio su un post di un blog o su un articolo di notizie; utilizzare parte invece

rubato da When to Use the HTML5 “section” Element

Answer 2

Utilizzo di un tag all'interno di un <section><li> Convalida dei tag (si può provare questo utilizzando l'opzione “Campo di testo” on http://html5.validator.nu/), e la specifica non sembra suggerire shouldn usarlo in questo modo (vedi http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element), quindi mi sembra soddisfacente.

Il tag <article> è inteso per “self-contained compositions”. Non sono mai stato del tutto chiaro cosa significhi al di fuori di diversi post di blog elencati in una singola pagina, ma ritengo che i riepiloghi dei prodotti siano adatti anche a questo. Quindi la tua seconda idea di un <section> contenente l'intero elenco e un <article> per ciascun prodotto, probabilmente suona meglio.