Block- und Inline-Elemente in HTML

Einen ganz wichtigen Punkt bei der Erstellung von Websites stellt die Unterscheidung zwischen Block- und Inline-Elementen dar. Jedes HTML-Element zählt zu einem dieser beiden Elemente. Das ist einerseits wichtig für das Verständnis über das Verhalten der Elemente. Andererseits ist das wichtig, damit man validen HTML-Code erstellt.

Der grundsätzliche Unterschied zwischen den beiden Elementen ist, dass Block-Elemente standardmäßig mit einer neuen Zeile beginnen, einen Zeilenumbruch danach haben und sich über die gesamte verfügbare Breite erstrecken. Das hat zur Folge, dass wenn man nacheinander mehrere Block-Elemente erstellt, diese untereinander angeordnet werden. Inline-Elemente erzeugen nicht automatisch eine neue Zeile. Sie unterbrechen somit den Textfluss nicht.

Typische Blockelemente sind z.B. die Überschriften (H1- bis H6-Tags) oder Absätze (P-Tag). Ein typisches Inline-Element ist z.B. der STRONG-Tag, mit dem Texte als wichtig gekennzeichnet und in Fettschrift dargestellt werden. Ein Beispielcode.

<h1>Überschrift</h1>
<p>Absatz mit einem <strong>Inline-Element</strong> im Textfluss.</p>

Die Überschrift, der Absatz und der Text im STRONG-Tag würden im verfügbaren Bereich ihre Plätze wie folgt einnehmen.

Verhalten von Block- und Inline-Elementen ändern

Das beschriebene Verhalten ist das Standardverhalten von Inline- und Block-Elementen. Mittels CSS kann das Verhalten geändert werden. Den Block-Elementen kann "beigebracht" werden, sich wie eine Inline-Element zu verhalten und den Inline-Elementen kann beigebracht werden, sich wie ein Block-Element zu verhalten. Ein Beispielcode in CSS.

h1 {
  display: inline;

   }
   
p {
  display: inline;

  }
  
strong {
  display: block;

  }

Der CSS-Code würde dafür sorgen, dass die Überschrift und der Absatz sich wie ein Inline-Element verhalten und der Text im STRONG-Tag wie ein Block-Element. Im verfügbaren Bereich würden sie ihre Position wie abgebildet einnehmen.

Verhalten von Block- und Inline-Elementen geändert

Der CSS-Code veranlasst nur dazu, das Verhalten der Elemente zu ändern. Ein Block-Element bleibt ein Block-Element und ein Inline-Element bleibt es ebenfalls. Ein typischer Anwendungsfall für das Ändern des Verhaltens ist z.B. bei Websites mit responsive Webdesign. Ist genügend Platz vorhanden, können Texte und Bilder nebeneinander positioniert werden. Ist der Platz jedoch zu klein, kann man sie untereinander positionieren. Ein einfaches Umschalten auf display: block; in den CSS-Regeln reicht hierfür aus.

Syntax zwischen Inline- und Block-Elementen

Beim Verschachteln von HTML-Code muss folgendes beachtet werden.

Block-Elemente dürfen andere Block-Elemente enthalten.
Block-Elemente dürfen Inline-Elemente enthalten.
Inline-Elemente dürfen keine Block-Elemente enthalten.
Inline-Elemente dürfen andere Inline-Elemente enthalten.

Demzufolge wäre der folgende Code nicht valide.

<strong><p>Wichtiger Text</p></strong>

Der STRONG-Tag ist ein Inline-Element, der P-Tag ein Block-Element. Da Inline-Elemente nicht in Block-Elemente platziert werden dürfen, wäre der Code nicht valide. Das kann auch nicht mit CSS-Einstellungen geändert werden. Den Code könnte man wie folgt ändert, damit es valide ist.

<p><strong>Wichtiger Text</strong></p>

Block-Elemente

Die folgenden Tags zählen zu den Block-Elementen.

<address>
<blockquote>
<dd>
<div>
<dl>
<fieldset>
<form>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<hr>
<noscript>
<ol>
<p>
<pre>
<table>
<tfoot>
<ul>

Ab HTML5

<article>
<aside>
<audio>
<canvas>
<figcaption>
<figure>
<footer>
<header>
<hgroup>
<main>
<nav>
<output>
<section>
<video>

Inline-Elemente

Die folgenden Tags zählen zu den Inline-Elementen.

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<input>
<img>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<tt>
<var>
<textarea>