---
title: Block-Level Elemente
slug: Web/HTML/Block-level_elements
tags:
  - Anfänger
  - Beginner
  - Elemente
  - Guide
  - HTML
  - HTML Elemente
  - Referenzen
  - Web Programmierung
translation_of: Web/HTML/Block-level_elements
original_slug: Web/HTML/Block-level_elemente
---
<p>Block- und <a href="/de/docs/Web/HTML/Inline_elemente" title="/en-US/docs/HTML/inline_elements">Inline-Elemente</a> sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.</p>

<p>Block-Elemente nehmen typischerweise die gesamte verfügbare Breite ihres Elternelements ein und grenzen ihren Inhalt vertikal durch je einen Zeilenumbruch gegenüber den vor- und nachfolgenden Elementen ab. Auf diese Weise erzeugen sie den rechteckigen Block, der ihnen den Namen gibt.</p>

<p>Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist {{ HTMLElement("p") }}, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.<br>
 Einzige Ausnahme ist von dieser Regel ist {{ HTMLElement("div") }}; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.</p>

<p>Gemeinhin können Block-Elemente Inline- und meist auch weitere Block-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene größere Strukturen definiert werden als auf Inline-Ebene.<br>
 Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.</p>

<p>Die einfache Unterscheidung zwischen Block- und Inline-Ebene wird in HTML-Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML 5 wird diese Zweiteilung zu einem komplexeren Satz von <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a> ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">fließender Inhalte</a>, während die Inline-Ebene der Kategorie <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">gestaltender Inhalte</a> gleichkommt. Darüber hinaus existieren weitere Kategorien.</p>

<h2 id="Elemente">Elemente</h2>

<p>Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).</p>

<div class="threecolumns">
<dl>
 <dt>{{ HTMLElement("address") }}</dt>
 <dd>Kontaktinformation.</dd>
 <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Inhalt eines Artikels.</dd>
 <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Anmerkungen.</dd>
 <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Audio-Wiedergabe.</dd>
 <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Video-Wiedergabe.</dd>
 <dt>{{ HTMLElement("blockquote") }}</dt>
 <dd>Zitat in Form eines eigenständigen Absatzes.</dd>
 <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Bereich zum Zeichnen und Malen.</dd>
 <dt>{{ HTMLElement("dd") }}</dt>
 <dd>Definition, Beschreibung.</dd>
 <dt>{{ HTMLElement("div") }}</dt>
 <dd>Allgemeine Unterteilung ohne semantische Aussage.</dd>
</dl>



<dl>
 <dt></dt>
 <dt>{{ HTMLElement("dl") }}</dt>
 <dd>Definitionsliste.</dd>
</dl>

<dl>
 <dt>{{ HTMLElement("fieldset") }}</dt>
 <dd>Gruppe von Elementen im Formular oder Reiter im Dialog.</dd>
 <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Beschreibung einer Grafik.</dd>
 <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).</dd>
 <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Fußbereich.</dd>
 <dt>{{ HTMLElement("form") }}</dt>
 <dd>Eingabeformular.</dd>
 <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
 <dd>Überschriften in Abstufung 1 bis 6.</dd>
 <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Kopfbereich.</dd>
 <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Gruppe mehrerer Überschriften.</dd>
 <dt></dt>
 <dt>{{ HTMLElement("hr") }}</dt>
 <dd>Horizontrale Trennlinie.</dd>
 <dt>{{ HTMLElement("noscript") }}</dt>
 <dd>Ersatzinhalt, falls JavaScript deaktiviert ist.</dd>
 <dt>{{ HTMLElement("ol") }}</dt>
 <dd>Geordnete Liste.</dd>
 <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Dynamisch erzeugte Ausgaben.</dd>
 <dt>{{ HTMLElement("p") }}</dt>
 <dd>Textabsatz.</dd>
 <dt>{{ HTMLElement("pre") }}</dt>
 <dd><span class="short_text" id="result_box" lang="de"><span class="hps">Vorformatierter </span></span>Text.</dd>
 <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
 <dd>Abschnitt einer Seite.</dd>
 <dt>{{ HTMLElement("table") }}</dt>
 <dd>Tabelle.</dd>
 <dt>{{ HTMLElement("tfoot") }}</dt>
 <dd>Fußbereich der Tabelle.</dd>
 <dt>{{ HTMLElement("ul") }}</dt>
 <dd>Ungeordnete Liste.</dd>
</dl>
</div>

<h3 id="See_also" name="See_also"></h3>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/HTML/Inline_elemente" title="en/HTML/Inline_elements">Inline-Elemente</a></li>
</ul>