Adieu Block & Inline - Welcome HTML5

The new features of the HTML5 specification are numerous and many of them are already supported by the majority of the browser landscape - in the following I will highlight an interesting change to the rules for nesting elements. HTML has always distinguished between block and inline elements. For example, the Document Type Definition of HTML4 names h1, p, and div as block elements and a, span, img as inline elements.


This concept has now been abandoned (for good reasons). In some use cases, many web designers ignored the correctness of the said nesting rule that no block elements may be located within inline elements, or the standard behavior using CSS rules such as display: inline; or display: block; (which often led to invalid code) without further ado.

HTML5 now blurs this distinction and even names 9 different categories to which an element can belong, whereby an element can be in several categories. The old distinction between block and inline elements is thrown overboard and the multitude of meanings of tags on the web is taken into account. This has the consequence that the following constructs in particular represent valid code:

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

A whole container containing further block elements was previously only possible (with valid code) using tricks (for example, by absolute positioning of a linked overlay layer). Alternatively, you linked the heading and the paragraph - this in turn led to redundancy and the container is not clickable. With the welcome addition to HTML5, this is no longer a problem.

Back