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.