HTML Block- und Inline-Elemente

Jedes sichtbare HTML-Element wird vom Browser entweder als Block- oder als Inline-Box dargestellt. Block-Boxen stapeln sich vertikal und füllen die verfügbare Breite aus; Inline-Boxen fließen horizontal innerhalb einer Textzeile, ähnlich wie Wörter in einem Satz. Das Verständnis dieser Unterscheidung ist grundlegend für die Kontrolle des Seitenlayouts.

Es ist wichtig zu wissen, dass „Block" und „Inline" keine festen HTML-Kategorien sind — sie beschreiben, wie ein Element standardmäßig gerendert wird. Modernes HTML5 gruppiert Elemente nach Inhaltskategorien (Fließinhalt, Formulierungsinhalt usw.), während Block vs. Inline eigentlich ein CSS-Konzept ist, das durch die Eigenschaft display gesteuert wird. Das bedeutet, dass das Standardverhalten jedes Elements überschrieben werden kann: Ein <span> kann sich wie ein Block verhalten, und ein <div> wie ein Inline-Element.

Siehe auch: CSS-Eigenschaft display · Tag <div> · Tag <span>

Diese Seite erklärt, was Block-Elemente und Inline-Elemente sind, listet alle Elemente beider Typen auf, zeigt wie display das Standardverhalten ändern kann, erläutert die wichtige Verschachtelungsregel und erklärt, wann <div> und wann <span> einzusetzen ist.

Block-Elemente

Ein Block-Element ist ein HTML-Element, das in einer neuen Zeile beginnt und die gesamte verfügbare Breite des horizontalen Raums seines übergeordneten Elements einnimmt. Diese Art von Element erstellt Inhaltsblöcke (Absätze, Seitenabschnitte). Die Mehrheit der HTML-Elemente sind Block-Elemente.

Block-Elemente werden im body eines HTML-Dokuments verwendet und können Inline-Elemente oder andere Block-Elemente enthalten.

Beispiel für ein Block-Element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>This is a block-level element. It starts on a new line and takes up the full width.</div>
    <p>This is another block-level element. It also starts on a new line.</p>
  </body>
</html>

Probier es selbst »

Block-Elemente:
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Inline-Elemente

Anders als Block-Elemente beginnen Inline-Elemente nicht in einer neuen Zeile. Sie fließen innerhalb einer Zeile und nehmen nur so viel Breite ein, wie nötig ist. Inline-Elemente sind Teil des Haupttexts.

Inline-Elemente enthalten in der Regel andere Inline-Elemente oder können leer sein.

Beispiel für ein Inline-Element:

Hier befindet sich ein <img> neben einem Absatz, und ein Inline-<a>-Element fließt im Text, ohne die Zeile zu unterbrechen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Probier es selbst »

Um den Inline-Fluss deutlich zu sehen, platzieren Sie ein <span> mitten in einem Satz. Da <span> ein Inline-Element ist, läuft der Text in derselben Zeile weiter, und nur der Inhalt des Spans wird beeinflusst:

<p>The total price is
  <span style="color: red; font-weight: bold;">$49.99</span>
  including tax.</p>

Der formatierte Wert $49.99 verbleibt im laufenden Text — nichts bricht in eine neue Zeile um.

Inline-Elemente:
`<a>`
`<br>`
`<data>`
`<i>`
`<kbd>`
`<output>`
`<script>`
`<strong>`
`<time>`

Darstellung mit CSS ändern

Da Block und Inline Darstellungsverhalten sind, lässt sich beides mit der CSS-Eigenschaft display umschalten. Dies ist einer der häufigsten Gründe, display überhaupt einzusetzen.

Im folgenden Beispiel wird ein <span> gezwungen, als Block dargestellt zu werden (beginnt also in einer neuen Zeile und nimmt die volle Breite ein), und ein <div> wird gezwungen, als Inline-Element dargestellt zu werden (fließt also im Textfluss):

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.as-block {
        display: block;
        background: #e0f7fa;
      }
      div.as-inline {
        display: inline;
        background: #ffecb3;
      }
    </style>
  </head>
  <body>
    <span class="as-block">I am a span behaving like a block.</span>
    <p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
  </body>
</html>

display: inline-block

Es gibt einen nützlichen dritten Wert: display: inline-block. Er fließt wie ein Inline-Element neben anderen Inhalten, berücksichtigt dabei jedoch width, height sowie obere/untere margin/padding wie ein Block-Element — das Beste aus beiden Welten.

Ein klassischer Anwendungsfall ist eine horizontale Navigationsleiste oder eine Reihe von Schaltflächen, die eine feste Breite und Innenabstände benötigen, aber dennoch nebeneinander stehen sollen:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        display: inline-block;
        width: 120px;
        padding: 10px 0;
        margin: 4px;
        text-align: center;
        background: #2196f3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </body>
</html>

Jeder Link behält seine width und sein padding (Block-Verhalten) und ordnet sich dennoch horizontal an (Inline-Verhalten).

Verschachtelungsregel: Block innerhalb von Inline ist nicht erlaubt

Eine wichtige HTML-Regel: Ein Block-Element darf nicht in ein Inline-Element verschachtelt werden. Ein <span> (Inline) darf beispielsweise kein <div> (Block) umschließen. Dies führt zu ungültigem HTML, und Browser können das Markup auf unerwartete Weise „korrigieren".

Ungültig — ein Block-<div> innerhalb eines Inline-<span>:

<!-- Invalid: do not put a block element inside an inline element -->
<span>
  <div>This block must not be here.</div>
</span>

Gültig — das Inline-<span> innerhalb des Block-<div>:

<!-- Valid: an inline element nested inside a block element -->
<div>
  <span>This inline element belongs here.</span>
</div>

Die umgekehrte Richtung (Inline innerhalb von Block) ist immer zulässig. Wenn Sie einen Block-Container benötigen, verwenden Sie ein Block-Element wie <div> und nicht <span>. Hinweis: Links sind ein Sonderfall — seit HTML5 darf ein <a>-Element auch Block-Inhalte umschließen.

div vs. span: Generische Container

Wenn kein vorhandenes Element passt, bietet HTML zwei generische, bedeutungslose „Wrapper"-Elemente, auf die man ständig zurückgreift:

<div> — ein generischer Block-Container. Verwenden Sie ihn, um größere Inhaltsbereiche für Layout oder Styling zu gruppieren (eine Karte, eine Seitenleiste, eine Zeile).
<span> — ein generischer Inline-Container. Verwenden Sie ihn, um einen kleinen Textteil innerhalb einer Zeile anzusprechen, z. B. um ein einzelnes Wort einzufärben oder einen Tooltip anzuhängen.

Eine einfache Faustregel: Wenn Sie ganze Seitenabschnitte gruppieren, wählen Sie <div>; wenn Sie ein Fragment im laufenden Text auszeichnen, wählen Sie <span>.

<!-- div: groups a block section -->
<div class="card">
  <h2>Welcome</h2>
  <p>Hello, <span class="username">Aleq</span>!</p>
</div>

Bevorzugen Sie ein semantisches Element (<section>, <article>, <nav>, <strong>, <em>, …), wenn es Ihren Inhalt beschreibt; greifen Sie nur dann auf <div>/<span> zurück, wenn kein aussagekräftigeres Element passt.

Übungen

Übung

Welche Aussage über HTML-Block- und Inline-Elemente ist korrekt?

Ob ein Element als Block oder Inline gerendert wird, wird durch die CSS-Eigenschaft display gesteuert und kann geändert werden.Ein Block-Element wie div darf in einem Inline-span platziert werden, ohne ungültiges HTML zu erzeugen.Das span-Element ist ein generischer Block-Container, der verwendet wird, um große Seitenbereiche zu gruppieren.Das Setzen von display auf inline-block entzieht einem Element die Fähigkeit, width und height zu berücksichtigen.