Les innovations de la spécification HTML5 sont nombreuses et beaucoup d'entre elles sont déjà prises en charge par la majorité du paysage des navigateurs - ci-dessous, je tiens à souligner un changement intéressant des règles d'imbrication des éléments. HTML a toujours fait la distinction entre les éléments en bloc et en ligne. La définition du type de document HTML4, par exemple, nomme h1, p et div comme éléments de bloc et a, span, img comme éléments en ligne.
Ce concept est désormais abandonné (pour de bonnes raisons). Dans certains cas d'utilisation, de nombreux concepteurs Web ont ignoré l'exactitude de ladite règle d'imbrication selon laquelle aucun élément de bloc ne peut être situé dans des éléments en ligne, ou le comportement standard utilisant des règles CSS telles que display: inline; ou afficher: bloc; (ce qui a souvent conduit à un code invalide) sans plus tarder.
HTML5 adoucit maintenant cette distinction et nomme même 9 catégories différentes auxquelles un élément peut appartenir, dans lesquelles un élément peut être dans plusieurs catégories. La vieille distinction entre les éléments en bloc et en ligne est jetée par-dessus bord et la multitude de significations des balises sur le Web est prise en compte. En particulier, cela a pour conséquence que les constructions suivantes représentent du code valide:
<a href="#">
<div>
<h1>Yeah</h1>
<p>
Der ganze Block ist verlinkt.
</p>
</div>
</a>
Un conteneur entier contenant d'autres éléments de bloc n'était auparavant possible (avec un code valide) qu'en utilisant des astuces (par exemple, par le positionnement absolu d'un calque de superposition lié). Alternativement, vous avez lié l'en-tête et le paragraphe - cela a conduit à la redondance et le conteneur n'est pas cliquable. Avec l'ajout bienvenu à HTML5, ce n'est plus un problème.