HTML-Tags: Inhalte der Seite gruppieren

Auch genannt: Grouping Content. Diese Tags fassen zusammengehörige Inhalte zusammen — auf Block-Ebene, also mit Zeilenumbruch.

Wo Struktur-Tags (<header>, <section> …) die Seiten-Bereiche definieren, gruppieren diese Tags konkrete Inhalts-Elemente wie Texte, Bilder und Listen.

Wichtig: <div> ist ein generischer Container ohne semantische Bedeutung — er wird hauptsächlich für CSS-Styling verwendet.

Allgemeine Gruppierung

<main>Hauptinhalt der Seite (nur 1x)</main>

<div>Allgemeiner Container, z.B. für CSS-Layout</div>

<figure>
  <img src="bild.jpg" alt="Beschreibung">
  <figcaption>Bildunterschrift</figcaption>
</figure>

<hr> <!-- Horizontale Trennlinie -->

<main>: Hauptinhalt der Seite — nur einmal pro Dokument
<div>: Allgemeiner Inhaltscontainer ohne semantische Bedeutung — häufig für CSS-Layout
<figure> & <figcaption>: Container für Inhalte mit Unterschrift oder Legende, z.B. Bild + Bildunterschrift
<hr>: Horizontale Trennlinie

Textabsätze

<p>Ein normaler Textabsatz.</p>

<pre>Vorformatierter Text –
    Leerzeichen und Umbrüche
    bleiben erhalten.</pre>

<blockquote>
  Ein eingerücktes Zitat aus einer anderen Quelle.
</blockquote>

<p>: Textabsatz — das häufigste Block-Element
<pre>: Vorformatierter Text — Leerzeichen und Zeilenumbrüche werden beibehalten
<blockquote>: Zitatabsatz aus einer anderen Quelle

Listen

<!-- Geordnete Liste (nummeriert) -->
<ol>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
</ol>

<!-- Ungeordnete Liste (Aufzählung) -->
<ul>
  <li>Punkt A</li>
  <li>Punkt B</li>
</ul>

<!-- Definitionsliste -->
<dl>
  <dt>Begriff</dt>
  <dd>Definition des Begriffs</dd>
</dl>

<ol> & <li>: Geordnete (nummerierte) Liste
<ul> & <li>: Ungeordnete (Aufzählungs-) Liste
<dl>, <dt>, <dd>: Definitionsliste — Begriff (dt) und zugehörige Definition (dd)