HTML5 non ha rinunciato agli elementi già presenti in XHTML e HTML 4, ma ha semplicemente reso obsoleti solo alcuni di loro. Tra questi non c'è certamente l'elemento div, che ora si trova a convivere con l'elemento section. Convivenza possibile? Certo, perchè i due elementi sono molto diversi tra loro. Scopriamo perchè.
Semantica
L'elemento section ha una forte connotazione semantica, mentre l'elemento div non ha alcuna connotazione semantica specifica, essendo di fatto un contenitore generico di blocco.
section serve a marcare una sezione del vostro documento ed ha una valenza fortemente orientata ai contenuti. div, al contrario, è per lo più utilizzato come elemento a cui assegnare degli stili CSS.
section può essere usato in questo modo:
<section class="chapter" id="chapter-1">
</section>
div, di contro, può essere utilizzato quando volete marcare un contenitore generico per un blocco di contenuti:
<div id="content">
<section class="chapter" id="chapter-1">
</section>
</div>
Si tratta, in altri termini, della stessa differenza semantica che avevamo in XHTML o HTML 4 tra div e p.
Valenza SEO
I motori di ricerca si stanno evolvendo verso una maggiore rivalutazione della semantica degli elementi. In questo senso section è il candidato ideale per questi futuri sviluppi SEO.
Avendo un peso semantico maggiore, è più probabile che questo elemento venga utilizzato in futuro come già avviene oggi per i paragrafi e le intestazioni. div, al contrario, non è mai stato preso in considerazione proprio per il suo scarso peso semantico.