Quando utilizzare l'elemento SECTION HTML5

click fraud protection

Il nuovo HTML5 sezione elemento può creare confusione. Se hai creato documenti HTML prima di HTML5, è probabile che tu stia già utilizzando l'elemento per creare divisioni strutturali all'interno delle tue pagine e quindi modellare le pagine con esse. Quindi potrebbe sembrare una cosa naturale sostituire semplicemente il tuo esistente DIV elementi con sezione elementi. Ma questo è tecnicamente scorretto.

L'elemento 'sezione' è un elemento semantico

Il SEZIONE l'elemento è a semantico elemento; fornisce significato sia agli interpreti che agli umani su cosa sia il contenuto allegato, in particolare una sezione del documento.

Questa può sembrare una descrizione molto generica, ed è perché lo è. Ci sono altri Elementi HTML5 che forniscono più distinzioni semantiche al tuo contenuto che dovresti usare prima di usare il sezione elemento:

  • Articolo
  • A parte
  • Navigazione

Quando utilizzare l'elemento 'sezione'?

Usa il articolo elemento quando il contenuto è una parte indipendente del sito che può stare in piedi da solo ed essere sindacato come un articolo o un post di blog. Usa il

instagram viewer
a parte elemento quando il contenuto è tangenzialmente correlato al contenuto della pagina o al sito stesso, come barre laterali, annotazioni, note a piè di pagina o informazioni sul sito associate. Usa il navigazione elemento per il contenuto che supporta la navigazione nel sito.

Il sezione elemento è un elemento semantico generico. Usalo quando nessuno degli altri elementi del contenitore semantico è appropriato. Combina parti del tuo documento in unità discrete che puoi descrivere come correlate in qualche modo. Se non riesci a descrivere gli elementi nella sezione in una o due frasi, probabilmente non dovresti usare l'elemento.

Invece, dovresti usare il DIV elemento. Il DIV elemento in HTML5 è un elemento contenitore non semantico. Se il contenuto che stai cercando di combinare non ha un significato semantico, ma devi comunque combinarlo per lo stile, allora il DIV element è l'elemento appropriato da usare.

Come funziona l'elemento 'sezione'

Una sezione del documento può apparire come contenitore esterno per articoli e a parte elementi. Può anche contenere contenuti che non fanno parte di un articolo o a parte. UN sezione l'elemento si trova anche all'interno di an articolo, navigazione, o a parte. Puoi anche nidificare le sezioni per indicare che un gruppo di contenuti è una sezione di un altro gruppo di contenuti che è una sezione di un articolo o la pagina nel suo insieme.

Il sezione elemento crea elementi all'interno di una struttura del documento. E come tale, dovresti sempre avere un elemento di intestazione (H1 attraverso H6) come parte della sezione. Se non riesci a trovare un titolo per la sezione, il DIV elemento è probabilmente più appropriato.

Se non vuoi che il titolo della sezione appaia nella pagina, puoi sempre mascherarlo con i CSS.

Quando non usare l'elemento 'sezione'

C'è uno scopo per il quale non dovresti usare il sezione elemento: solo per stile.

In altre parole, se l'unico motivo per cui stai mettendo un elemento in quel posto è allegare Stile CSS proprietà, non dovresti usare a sezione elemento. Trova un elemento semantico oppure usa il DIV elemento invece.

Alla fine potrebbe non avere importanza

Una difficoltà nello scrivere HTML semantico è che ciò che è semantico per il browser potrebbe essere una totale assurdità per te. Se ritieni di poter giustificare l'uso di sezione elemento nei tuoi documenti, allora dovresti usarlo. Alla maggior parte degli interpreti non interessa e mostrerà la pagina come ci si potrebbe aspettare se si disegna a DIV o un sezione.

Per i designer che amano essere semanticamente corretti, utilizzando il sezione elemento in modo semanticamente valido è importante. Per i designer che vogliono solo che le loro pagine funzionino, questo non è così importante. Scrivere HTML semanticamente valido è una buona pratica e mantiene le pagine più a prova di futuro. Ma alla fine, tocca a te.

instagram story viewer