Sono entrambi dei contenitori, ma hanno delle leggere differenze nel linguaggio HTML, parliamo degli elementi section e div. Diamo un’occhiata più da vicino alla differenza tra questi due elementi molto utilizzati dai web designer.
Innanzitutto, qual è la differenza tra div e sezione in HTML5?
Sono entrambi usati per dividere una pagina web in sezioni. Ma il div è un elemento semanticamente neutro, mentre l’elemento della sezione non lo è. E questo cosa significa? In pratica, un div non ci da nessuna informazione su ciò che contiene. Altri elementi come l’articolo, la navigazione, l’intestazione e il piè di pagina descrivono chiaramente il contenuto e sono noti come elementi semantici. Anche l’elemento sezione è considerato semantico perché rappresenta una parte di un documento che è correlata allo stesso concetto generale.
Poiché un div non ha significato semantico, è chiamato elemento contenitore generico e dovrebbe essere utilizzato solo per raggruppare elementi insieme ai fini stilistici. Altrimenti, bisognerebbe usare una sezione, o un altro elemento semantico, per spiegare meglio di cosa tratta quella parte della pagina ai motori di ricerca e ai browser. Ciò renderà il tuo codice più accessibile e più facile da mantenere.
Come utilizzare section in HTML
Per utilizzare le sezioni in HTML, raggruppa gli elementi correlati che desideri raggruppare nei tag di sezione. La maggior parte delle sezioni dovrebbe contenere un’intestazione. Ecco un esempio pratico:
<h1>Homepage</h1>
<section>
<h2>Su di noi</h2>
<p>Testo di esempio. </p>
</section>
Nell’esempio che abbiamo appena visto, il corpo del documento HTML è suddiviso in una sezione che contiene un’intestazione e un paragrafo.
E’ possibile anche nascondere agli utenti una sezione HTML!
Piuttosto che eliminare definitivamente una sezione del tuo sito, potresti essere interessato a nasconderla. In questo modo, se cambi idea, non devi ricrearla da zero. Ci sono due opzioni per nascondere una sezione (o qualsiasi elemento) in HTML. Se desideri che la pagina venga visualizzata come se l’elemento della sezione non fosse presente, utilizza la proprietà display e impostala su “none”. Se invece desideri nascondere la sezione ma fare in modo che occupi lo stesso spazio nel layout, utilizza la proprietà di visibility e impostala su “hidden”.