"Block-Level", sowie "inline" Elemente, sind Kategorisierungen der HTML Elemente. Block-Level Elemente können nur innerhalb eines <body> Elements auftreten. Ihr wichtigstes Merkmal ist, dass sie typischerweise mit einem Zeilenumbruch vor und nach dem Element formatiert sind (wodurch ein eigenständiger Inhaltsblock entsteht). Der folgende Artikel soll dir dabei helfen, zu verstehen, was das bedeutet.
Im Browser werden Block-Level Elemente normalerweise mit einer neuen Zeile vor und nach dem Element angezeigt.
Die Unterschieden zwischen Inline-Elementen und Block-Level-Elementen sind:
- Formatierung
- Standardmäßig beginnen Block-Level-Elemente in einer neuen Zeile.
- Inhaltliches Modell
- Gemeinhin können Block-Level-Elemente Inline- und weitere Block-Level-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene "größere" Strukturen definiert werden als auf Inline-Ebene.
Die reine Unterscheidung zwischen Block- und Inline-Ebene wird in HTML Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML5 wird diese Zweiteilung zu einem komplexeren Satz von Inhaltskategorien ergänzt. Hierbei entspricht die Block-Ebene in HTML5 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-Level-Elemente (die neuen HTML5-Element sind technisch gesehen nicht als "Block-Level" definiert).
<address>- Kontaktinformation.
<article>HTML5- Inhalt eines Artikels.
<aside>HTML5- Marginalbereich.
<audio>HTML5- Audio-Player.
<video>HTML5- Video-Player.
<blockquote>- Zitat innerhalb eines eigenen Textabsatzes.
<canvas>HTML5- Bereich für Canvas.
<dd>- Definition, Beschreibung.
<div>- Allgemeine Einteilung.
<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- Abschnitt oder Fußbereich.
<form>- Eingabe-Formular.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- Überschriften Level 1-6.
<header>HTML5- Abschnitt oder Kopfbereich.
<hgroup>HTML5- Gruppe mehrerer Überschriften.
<hr>- Horizontrale Trennlinie.
<noscript>- Inhalt, wenn JavaScript deaktiviert ist.
<ol>- Geordnete Liste.
<output>HTML5- Dynamisch erzeugte Ausgaben.
<p>- Textabsatz.
<pre>- Vorformatierten Text.
<section>HTML5- Abschnitt einer Internetseite.
<table>- Tabelle.
<tfoot>- Fußbereich der Tabelle.
<ul>- Ungeordnete Liste.