Texte & Ueberschriften

Text ist das Herzstueck der meisten Webseiten. Egal ob Blog, Nachrichtenseite oder Online-Shop — ueberall brauchst du gut strukturierten Text. In diesem Kapitel lernst du alle wichtigen HTML-Tags fuer die Arbeit mit Texten.

Ueberschriften: h1 bis h6

HTML bietet sechs Ueberschriften-Stufen, von <h1> (wichtigste) bis <h6> (unwichtigste):

<h1>Hauptueberschrift der Seite</h1>
<h2>Abschnittsueberschrift</h2>
<h3>Unterabschnitt</h3>
<h4>Detailabschnitt</h4>
<h5>Selten verwendet</h5>
<h6>Sehr selten verwendet</h6>

Die goldenen Regeln fuer Ueberschriften

1. Nur ein <h1> pro Seite — das ist der Haupttitel
2. Keine Stufe ueberspringen — nach <h2> kommt <h3>, nicht <h4>
3. Ueberschriften fuer Struktur nutzen, nicht fuer Schriftgroesse

<!-- Richtig: Logische Hierarchie -->
<h1>HTML lernen</h1>
    <h2>Grundlagen</h2>
        <h3>Tags</h3>
        <h3>Attribute</h3>
    <h2>Fortgeschritten</h2>
        <h3>Formulare</h3>

<!-- Falsch: Stufen uebersprungen -->
<h1>HTML lernen</h1>
    <h4>Das sieht kleiner aus</h4>  <!-- Nicht h4 verwenden, nur weil es kleiner ist! -->

Warum ist die Hierarchie wichtig?

Grund	Erklaerung
Barrierefreiheit	Screenreader navigieren ueber Ueberschriften
SEO	Suchmaschinen bewerten die Struktur
Lesbarkeit	Besucher scannen Ueberschriften zuerst

Absaetze und Zeilenumbrueche

Der Absatz: <p>

<p>Das ist ein Absatz. Der Browser fuegt automatisch
   Abstand ueber und unter dem Absatz ein.</p>

<p>Das ist ein zweiter Absatz. Zwischen den beiden
   Absaetzen ist ein sichtbarer Abstand.</p>

Wichtig: Der Browser ignoriert zusaetzliche Leerzeichen und Zeilenumbrueche im Code:

<!-- Das wird alles in EINER Zeile angezeigt: -->
<p>Das    ist     ein    Test
   mit    vielen    Leerzeichen
   und    Zeilenumbruechen.</p>

<!-- Ausgabe: "Das ist ein Test mit vielen Leerzeichen und Zeilenumbruechen." -->

Zeilenumbruch: <br>

Fuer einen Umbruch innerhalb eines Absatzes:

<p>
    Max Mustermann<br>
    Musterstrasse 42<br>
    12345 Musterstadt
</p>

Horizontale Linie: <hr>

<p>Abschnitt eins...</p>
<hr>
<p>Abschnitt zwei...</p>

Textformatierung

Wichtiger und betonter Text

<!-- Semantische Formatierung (bevorzugt) -->
<p><strong>Wichtig!</strong> Das solltest du wissen.</p>
<p>Das ist <em>wirklich</em> interessant.</p>

<!-- Visuelle Formatierung (vermeiden) -->
<p><b>Fett</b> und <i>kursiv</i></p>

Unterschied: <strong> vs. <b> und <em> vs. <i>

Tag	Bedeutung	Verwendung
<strong>	Inhaltlich wichtig	Warnungen, wichtige Infos
<b>	Nur optisch fett	Schlagwoerter, Produktnamen
<em>	Inhaltlich betont	Betonung beim Lesen
<i>	Nur optisch kursiv	Fachbegriffe, fremde Woerter

Screenreader lesen <strong> und <em> anders vor — sie betonen die Woerter. Bei <b> und <i> aendern sie nichts an der Betonung.

Weitere Textformatierungen

<!-- Durchgestrichen -->
<p>Der Preis betraegt <del>49,99 Euro</del> <ins>29,99 Euro</ins>!</p>

<!-- Hochgestellt und tiefgestellt -->
<p>H<sub>2</sub>O ist Wasser</p>
<p>E = mc<sup>2</sup></p>

<!-- Markierter Text -->
<p>Suche nach <mark>HTML</mark> in diesem Text.</p>

<!-- Kleiner Text -->
<p><small>Copyright 2026. Alle Rechte vorbehalten.</small></p>

<!-- Abkuerzungen -->
<p><abbr title="HyperText Markup Language">HTML</abbr> ist toll!</p>

Zitate und Quellen

Blockzitat: <blockquote>

Fuer laengere Zitate, die als eigener Block dargestellt werden:

<blockquote cite="https://example.com/quelle">
    <p>Das Web ist fuer alle da, unabhaengig von Hardware, Software,
    Sprache, Standort oder Faehigkeit.</p>
    <footer>-- <cite>Tim Berners-Lee</cite></footer>
</blockquote>

Inline-Zitat: <q>

Fuer kurze Zitate im Textfluss:

<p>Wie Tim Berners-Lee sagte:
<q>Das Web ist fuer alle da.</q></p>

Der Browser fuegt automatisch Anfuehrungszeichen hinzu.

Quellenangabe: <cite>

<p>Dieses Beispiel stammt aus dem Buch
<cite>HTML und CSS: Design and Build Websites</cite>.</p>

Code und vorformatierter Text

Code-Schnipsel: <code>

<p>Verwende <code>&lt;strong&gt;</code> fuer wichtigen Text.</p>

Vorformatierter Text: <pre>

<pre>
    Dieser Text    behalt    alle
    Leerzeichen    und
    Zeilenumbrueche bei.
</pre>

Code-Bloecke: <pre> + <code>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Beispiel&lt;/title&gt;
    &lt;/head&gt;
&lt;/html&gt;
</code></pre>

Tastatureingaben: <kbd>

<p>Druecke <kbd>Strg</kbd> + <kbd>S</kbd> zum Speichern.</p>

Textstruktur fuer laengere Inhalte

Bei laengeren Texten ist eine klare Struktur entscheidend:

<article>
    <h1>HTML-Texte richtig strukturieren</h1>

    <p class="intro">
        Eine gute Textstruktur macht den Unterschied zwischen
        einer Webseite, die gelesen wird, und einer, die ignoriert wird.
    </p>

    <h2>Warum Struktur wichtig ist</h2>

    <p>Studien zeigen, dass Nutzer Webseiten nicht Wort fuer
    Wort lesen, sondern <strong>scannen</strong>. Sie suchen
    nach Ueberschriften, fett gedruckten Woertern und Listen.</p>

    <h3>Tipps fuer bessere Lesbarkeit</h3>

    <ul>
        <li>Kurze Absaetze (3-5 Saetze)</li>
        <li>Aussagekraeftige Ueberschriften</li>
        <li>Listen fuer Aufzaehlungen</li>
        <li>Wichtige Begriffe <strong>hervorheben</strong></li>
    </ul>

    <h2>Die richtige Ueberschriften-Hierarchie</h2>

    <p>Denke an Ueberschriften wie an ein Inhaltsverzeichnis...</p>
</article>

Details und Zusammenfassungen

Das <details>-Element erstellt ein auf- und zuklappbares Element — ganz ohne JavaScript:

<details>
    <summary>Was ist HTML?</summary>
    <p>HTML steht fuer HyperText Markup Language und ist die
    Grundlage jeder Webseite. Es beschreibt die Struktur
    von Inhalten im Web.</p>
</details>

<details open>
    <summary>Was ist CSS?</summary>
    <p>CSS steht fuer Cascading Style Sheets und beschreibt
    das Aussehen einer Webseite.</p>
</details>

Das open-Attribut sorgt dafuer, dass der Inhalt standardmaessig ausgeklappt ist.

Uebungen

Uebung 1: Blog-Artikel strukturieren

Erstelle einen Blog-Artikel mit:

• Einem <h1> als Titel
• Mindestens zwei <h2>-Abschnitten
• Absaetzen mit <strong> und <em>
• Einem Blockzitat mit Quellenangabe
• Einer Liste mit Stichpunkten

Uebung 2: FAQ-Seite

Erstelle eine FAQ-Seite mit mindestens drei Frage-Antwort-Paaren. Verwende <details> und <summary>, um die Antworten ein- und ausklappbar zu machen.

Uebung 3: Gedicht formatieren

Formatiere ein Gedicht mit <pre> und achte auf die korrekte Darstellung von Zeilenumbruechen und Einrueckungen.

Was kommt als Naechstes?

Im naechsten Kapitel geht es um Links — das Herzschlag des Internets. Du lernst:

• Verschiedene Arten von Links (intern, extern, Anker)
• Wie du eine Navigation erstellst
• Best Practices fuer barrierefreie Links

Zusammenfassung

• Ueberschriften (<h1> bis <h6>) schaffen Struktur — immer hierarchisch verwenden
• <strong> und <em> haben semantische Bedeutung, <b> und <i> sind nur visuell
• <blockquote> fuer laengere Zitate, <q> fuer Inline-Zitate
• <pre> behaelt Leerzeichen und Zeilenumbrueche bei
• <details> und <summary> erstellen aufklappbare Inhalte ohne JavaScript

---