Innovationerna i HTML5-specifikationen är många och många av dem stöds redan av majoriteten av webbläsarlandskapet - nedan vill jag lyfta fram en intressant förändring av reglerna för kapslingselement. HTML har alltid skiljt mellan block och inline-element. Dokumenttypdefinitionen av HTML4, till exempel, heter h1, p och div som blockelement och a, span, 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>
En hel behållare som innehöll ytterligare blockelement var tidigare endast möjlig (med giltig kod) med hjälp av knep (till exempel genom absolut positionering av ett länkat överläggsskikt). Alternativt länkade du rubriken och stycket - detta ledde i sin tur till redundans och behållaren är inte klickbar. Med det välkomna tillägget till HTML5 är detta inte längre ett problem.