L'elemento SECTION è definito come una sezione semantica di una pagina web o di un sito che non è un altro tipo più specifico come ARTICLE o ASIDE. I designer usano spesso questo elemento quando contrassegnano una sezione distinta della pagina, un'intera sezione che potrebbe essere spostata e utilizzata su altre pagine o parti del sito. È un contenuto distinto.
Al contrario, l'elemento DIV è appropriato per parti della pagina che si desidera suddividere per scopi diversi da semantica. Ad esempio, potresti racchiudere del contenuto in un DIV per dargli un "gancio" per lo stile con CSS. Potrebbe non essere semanticamente una sezione distinta del contenuto, ma è separata in modo da poter ottenere il layout o la sensazione desiderati.
È tutta una questione di semantica
L'unica differenza tra gli elementi DIV e SECTION è la semantica: il senso del contenuto che stai dividendo.
Qualsiasi contenuto contenuto in un elemento DIV non ha alcun significato intrinseco. È meglio utilizzato per cose come:
- Stili CSS e hook per gli stili CSS
- Contenitori di layout
- Hook JavaScript
- Divisioni che facilitano la lettura del contenuto o dell'HTML
L'elemento DIV era l'unico elemento disponibile per aggiungere hook a documenti di stile e layout. Prima di HTML5, la tipica pagina web era piena di elementi DIV. In effetti, alcuni editor WYSIWYG utilizzavano esclusivamente l'elemento DIV, a volte al posto dei paragrafi.
HTML5 ha introdotto elementi di sezionamento che hanno creato documenti più semanticamente descrittivi e hanno contribuito a definire gli stili su tali elementi.
E l'elemento SPAN?
Un altro elemento comune non semantico è SPAN. È usato in linea per aggiungere hook per stili e script attorno a blocchi di contenuto (di solito testo). In questo senso, è esattamente come il DIV, ma non è un elemento di blocco. Pensa al DIV come a uno SPAN a livello di blocco e utilizzalo allo stesso modo, ma per interi blocchi di contenuto HTML.
L'HTML non ha un elemento di sezionamento in linea comparabile.
Per le versioni precedenti di Internet Explorer
Anche se stai supportando versioni notevolmente precedenti di Internet Explorer di Microsoft che non riconoscono in modo affidabile HTML5, dovresti utilizzare tag HTML semanticamente corretti. La semantica aiuterà te e il tuo team a gestire la pagina in futuro. Le ultime versioni di Internet Explorer, così come il suo sostituto, Microsoft Edge, riconoscono HTML5.
Utilizzo di elementi DIV e SECTION
Puoi utilizzare entrambi gli elementi DIV e SECTION insieme in un documento HTML5 valido—SECTION, per definire porzioni semanticamente discrete del contenuto e DIV, per definire hook per CSS, JavaScript e layout scopi.
Articolo originale di Jennifer Krynin. Modificato da Jeremy Girard il 15/03/17.