Las innovaciones de la especificación HTML5 son numerosas y muchas de ellas ya son compatibles con la mayor parte del panorama del navegador; a continuación, quiero resaltar un cambio interesante en las reglas para anidar elementos. HTML siempre ha distinguido entre elementos de bloque y en línea. La definición de tipo de documento de HTML4, por ejemplo, nombra h1, p y div como elementos de bloque y a, span, img como elementos en línea.
Este concepto ahora se ha abandonado (por buenas razones). En algunos casos de uso, muchos diseñadores web ignoraron la exactitud de dicha regla de anidamiento de que no se pueden ubicar elementos de bloque dentro de elementos en línea o el comportamiento estándar usando reglas CSS como display: inline; o mostrar: bloquear; (que a menudo conducía a un código no válido) sin más preámbulos.
HTML5 ahora suaviza esta distinción e incluso nombra 9 categorías diferentes a las que puede pertenecer un elemento, por lo que un elemento puede estar en varias categorías. La antigua distinción entre elementos de bloque y en línea se tira por la borda y se tienen en cuenta la multitud de significados de las etiquetas en la web. En particular, esto tiene la consecuencia de que las siguientes construcciones representan código válido:
<a href="#">
<div>
<h1>Yeah</h1>
<p>
Der ganze Block ist verlinkt.
</p>
</div>
</a>
Un contenedor completo que contiene más elementos de bloque anteriormente solo era posible (con código válido) usando trucos (por ejemplo, mediante el posicionamiento absoluto de una capa de superposición vinculada). Alternativamente, vinculó el encabezado y el párrafo; esto a su vez generó redundancia y no se puede hacer clic en el contenedor. Con la bienvenida adición a HTML5, esto ya no es un problema.