Block-Level Elemente
Block- und Inline-Elemente sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.
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.
Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist <p>
, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.
Einzige Ausnahme ist von dieser Regel ist <div>
; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.
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.
Die höchste Ebene für Block-Elemente selbst ist das Element <body>
.
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 Inhaltskategorien ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie fließender Inhalte, während die Inline-Ebene der Kategorie gestaltender Inhalte gleichkommt. Darüber hinaus existieren weitere Kategorien.
Elemente
Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).
<address>
- Kontaktinformation.
<article>
HTML5- Inhalt eines Artikels.
<aside>
HTML5- Anmerkungen.
<audio>
HTML5- Audio-Wiedergabe.
<video>
HTML5- Video-Wiedergabe.
<blockquote>
- Zitat in Form eines eigenständigen Absatzes.
<canvas>
HTML5- Bereich zum Zeichnen und Malen.
<dd>
- Definition, Beschreibung.
<div>
- Allgemeine Unterteilung ohne semantische Aussage.
<dl>
- Definitionsliste.
<fieldset>
- Gruppe von Elementen im Formular oder Reiter im Dialog.
<figcaption>
HTML5- Beschreibung einer Grafik.
<figure>
HTML5- Grafik mit Beschreibung (siehe
<figcaption>
). <footer>
HTML5- Fußbereich.
<form>
- Eingabeformular.
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
- Überschriften in Abstufung 1 bis 6.
<header>
HTML5- Kopfbereich.
<hgroup>
HTML5- Gruppe mehrerer Überschriften.
<hr>
- Horizontrale Trennlinie.
<noscript>
- Ersatzinhalt, falls JavaScript deaktiviert ist.
<ol>
- Geordnete Liste.
<output>
HTML5- Dynamisch erzeugte Ausgaben.
<p>
- Textabsatz.
<pre>
- Vorformatierter Text.
<section>
HTML5- Abschnitt einer Seite.
<table>
- Tabelle.
<tfoot>
- Fußbereich der Tabelle.
<ul>
- Ungeordnete Liste.