W3docs
de
Anmelden

HTML-Block- und Inline-Elemente

All the HTML elements are categorized into two groups: block-level elements and inline elements. See the full list of block-level and inline elements.

HTML besteht aus verschiedenen Elementen, die Blöcke von Webseiten erstellen. Diese Elemente werden in "Block-Elemente" und "Inline-Elemente" unterteilt.

Es ist möglich, ein Element mit der CSS display-Eigenschaft von Block zu Inline oder umgekehrt zu ändern.

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 Elternelements einnimmt. Diese Art von Element erstellt Inhaltsblöcke (Absätze, Seitenaufteilungen). 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

Im Gegensatz zu Block-Elementen beginnen Inline-Elemente nicht in einer neuen Zeile. Sie beginnen innerhalb einer Zeile und nehmen nur so viel Breite ein, wie erforderlich ist. Inline-Elemente sind Teil des Haupttextes.

Inline-Elemente enthalten häufig andere Inline-Elemente oder können leer sein.

Beispiel für ein Inline-Element:

<!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 »
Inline-Elemente:
<a>
<bdo>
<cite>
<i>
<label>
<q>
<small>
<sup>
<var>

Praxis

Übung

Welche der folgenden Aussagen über HTML-Block- und Inline-Elemente sind korrekt?