Innovationerna i HTML5-specifikationen är många och många av dem stöds redan av majoriteten av webbläsarlandskapet - nedan skulle jag vilja lyfta fram en intressant förändring av reglerna för kapslingselement. HTML har alltid skiljt mellan block och inline-element. HTML4:s Document Type Definition listar till exempel h1, p och div som blockelement och a, span och img som inline-element.
Detta koncept har nu övergivits (av goda skäl). I vissa användningsfall ignorerade många webbdesigners riktigheten i nämnda kapslingsregel att inga blockelement får placeras inom inlineelement eller standardbeteendet med hjälp av CSS-regler som display: inline; eller display: block; (vilket ofta ledde till ogiltig kod) utan vidare.
HTML5 mjukar nu upp skillnaden och nämner till och med 9 olika kategorier som ett element kan tillhöra, varigenom ett element kan finnas i flera kategorier. Den gamla åtskillnaden mellan block- och inbyggnadselement kastas överbord och mångfalden av taggar på webben tas med i beräkningen. I synnerhet har detta som konsekvens att följande konstruktioner representerar giltig kod:
<a href="#">
<div>
<h1>Yeah</h1>
<p>
Der ganze Block ist verlinkt.
</p>
</div>
</a>
Att länka en hel behållare som innehöll ytterligare blockelement var tidigare endast möjligt (med giltig kod) med hjälp av trick (t.ex. genom absolut positionering av ett länkat överlagringsskikt). Alternativt var rubriken och stycket länkade - detta ledde i sin tur till redundans och behållaren var inte klickbar. Tack vare den välkomnande förlängningen av HTML5 är detta inte längre ett problem.