Quando HTML5 ritorna sulla scena un certo numero di anni fa, ha aggiunto una serie di nuovi elementi di sezione alla lingua, tra cui ilSEZIONE elemento. La maggior parte dei nuovi elementi introdotti da HTML5 ha usi chiari. Ad esempio, l'elemento viene utilizzato per definire gli articoli e le parti principali di una pagina Web, l'elemento viene utilizzato per definire il contenuto correlato che non è critico per il resto della pagina e intestazione, nav e footer sono piuttosto auto-esplicativi. Il nuovo aggiuntoSEZIONE l'elemento, tuttavia, è un po 'meno chiaro.
Molte persone credono che gli elementi HTML SEZIONE e sono davvero la stessa cosa: elementi generici del contenitore usati per contenere il contenuto di una pagina web. La realtà, tuttavia, è che questi due elementi, pur essendo entrambi elementi contenitori, sono tutt'altro che generici. Ci sono motivi specifici per utilizzare entrambi i SEZIONE elemento e il DIV elemento - e questo articolo spiegherà queste differenze.
Sezioni e Div
Il SEZIONE elemento è definito come una sezione semantica di una pagina web o di un sito che non è un altro tipo più specifico (come l'articolo o parte). Tendo ad usare questo elemento quando segnalo una sezione distinta della pagina: una sezione che potrebbe essere spostata e utilizzata in altre pagine o parti del sito. È un pezzo di contenuto distinto, o una "sezione" di contenuti, se vuoi.
Al contrario, usi il DIV elemento per parti della pagina che vuoi dividere, ma per scopi diversi dalla semantica. Vorrei avvolgere un'area di contenuto in una divisione se lo faccio puramente per darmi un "gancio" da usare con i CSS. Potrebbe non essere una sezione distinta di contenuti basati sulla semantica, ma è qualcosa che sto dettando per ottenere il layout che desidero per la mia pagina.
È tutta una questione di semantica
Questo è un concetto difficile da capire, ma l'unica differenza tra il DIV elemento e il SEZIONE l'elemento è semantica. In altre parole, è il senso della sezione di codice che stai dividendo.
Qualsiasi contenuto contenuto in a DIV l'elemento non ha alcun significato intrinseco. È meglio usato per cose come:
- Stili CSS e ganci per stili CSS
- Contenitori di layout
- Ganci JavaScript
- Divisioni per l'HTML per renderlo più facile da leggere
Il DIV l'elemento era l'unico elemento che avevamo per aggiungere ganci allo stile dei nostri documenti e creare colonne e layout fantasiosi. Per questo motivo, abbiamo finito con l'HTML che è stato crivellato DIV elementi - ciò che i web designer chiamano "divitis". C'erano persino gli editor WYSIWYG che usavano il DIV elemento esclusivamente. In realtà ho incontrato HTML che utilizza il DIV elemento invece di paragrafi!
Con HTML5, possiamo iniziare ad usare elementi di sezione per creare documenti semanticamente descrittivi (usando per la navigazione e per figure descrittive e così via) e anche definire gli stili su quegli elementi.
Che dire dell'elemento SPAN?
L'altro elemento a cui la maggior parte della gente pensa quando pensa al DIV elemento è l'elemento. Questo elemento, come DIV, non è un elemento semantico. È un elemento in linea che puoi usare per aggiungere ganci per stili e script attorno a blocchi di contenuto in linea (di solito testo). In questo senso è esattamente come il DIV elemento, solo inline piuttosto che un elemento di blocco. In qualche modo, potrebbe essere più facile pensare al DIV a livello di blocco SPAN elemento e usarlo come faresti tu SPAN solo per interi blocchi di contenuti HTML.
Non c'è alcun elemento di sezione inline comparabile in HTML5.
Per versioni precedenti di Internet Explorer
Anche se stai supportando le versioni più vecchie di IE (come IE 8 e precedenti) che non riconoscono in modo affidabile HTML5, non dovresti aver paura di usare tag HTML semanticamente corretti. La semantica aiuterà te e il tuo team a gestire la pagina in futuro (perché saprete che quella sezione è l'articolo se è circondata dal ARTICOLO elemento). Inoltre, i browser che riconoscono tali tag li sosterranno meglio.
È ancora possibile utilizzare elementi di sezione semantica HTML5 con Internet Explorer, è sufficiente aggiungere script e possibilmente alcuni ambienti DIV elementi per convincerli a riconoscere i tag come HTML.
Utilizzo degli elementi DIV e SECTION
Se li stai utilizzando correttamente, puoi utilizzare entrambi DIV e SEZIONE elementi insieme in un documento HTML5 valido. Come hai visto qui in questo articolo, usi il SEZIONE elemento per definire porzioni semanticamente discrete del contenuto, e tu usi il DIV elemento come hook per CSS e JavaScript e per definire il layout che non ha un significato semantico.
Articolo originale di Jennifer Krynin. Modificato da Jeremy Girard il 15/03/17
