Adieu Block & Inline - Willkommen HTML5

Die Neuerungen der HTML5-Spezifikation sind zahlreich und viele davon werden bereits vom Gros der Browserlandschaft unterstützt – nachfolgend will ich eine interessante Änderung an den Regeln zur Verschachtelung von Elementen beleuchten. HTML unterscheidet seit jeher zwischen Block- und Inline-Elementen. Die Document Type Definition von HTML4 nennt beispielsweise h1, p, und div als Block- sowie a, span, img als Inline-Elemente.


Von diesem Konzept hat man sich nun (aus guten Gründen) verabschiedet. Viele Webdesigner ignorierten in manchen Anwendungsfällen die Korrektheit der besagten Verschachtelungsregel, dass sich innerhalb von Inline-Elementen keine Block-Elemente befinden dürfen oder funktionierten das Standardverhalten durch CSS-Regeln wie display:inline; bzw. display:block; (was oftmals zu invalidem Code führte) kurzerhand um.

HTML5 weicht nun diese Unterscheidung auf und nennt sogar 9 verschiedene Kategorien, denen ein Element angehören kann, wobei ein Element durchaus in mehreren Kategorien sein darf. Dabei wird die alte Unterscheidung nach Block- und Inline-Elementen über Bord geworfen und der Vielzahl an Bedeutungen von Tags im Web Rechnung getragen. Das hat insbesondere die Folge, dass durchaus folgende Konstrukte validen Code darstellen:

<a href="#">
   <div>
      <h1>Yeah</h1>
      <p>
         Der ganze Block ist verlinkt.
      </p>
   </div>
</a>

Einen ganzen Container, der weitere Block-Elemente enthielt, war vorher (mit validem Code) nur durch Tricks möglich (beispielsweise durch absolute Positionierung einer verlinkten Overlay-Ebene). Alternativ verlinkte man die Überschrift und den Paragraphen – das wiederum führte zu Redundanz und der Container ist nicht anklickbar. Durch die begrüßenswerte Erweiterung von HTML5 ist das nun kein Problem mehr.

Zurück