Las innovaciones de la especificación HTML5 son numerosas y muchas de ellas ya son compatibles con la mayoría del panorama de navegadores; a continuación me gustaría destacar un cambio interesante en las reglas para anidar elementos. HTML siempre ha distinguido entre elementos en bloque y en línea. Por ejemplo, la Definición de tipo de documento de HTML4 enumera h1, p y div como elementos de bloque y a, span e 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>
Anteriormente, vincular un contenedor completo que contenía elementos de bloque adicionales solo era posible (con código válido) mediante trucos (por ejemplo, mediante el posicionamiento absoluto de una capa superpuesta vinculada). Alternativamente, el encabezado y el párrafo estaban vinculados, lo que a su vez generaba redundancia y no se podía hacer clic en el contenedor. Gracias a la extensión de bienvenida de HTML5, esto ya no es un problema.