Textelemente: Überschriften, Absätze, Listen, Links

Mit dem Grundgerüst aus Lektion 2 hast du eine leere Seite – jetzt füllen wir sie mit Leben. In dieser Lektion lernst du die wichtigsten Tags für textbasierte Inhalte: Überschriften, Absätze, Hervorhebungen, Listen und Links. Diese vier Bausteine machen den allergrößten Teil jeder Webseite aus.

Eine wichtige Faustregel vorweg: wähle Tags nach Bedeutung, nicht nach Aussehen. „Das soll groß sein" ist kein Grund für <h1> – aber „das ist die wichtigste Überschrift der Seite" ist einer. Das Aussehen kommt später über CSS. Die Trennung von Struktur (HTML) und Design (CSS) ist eines der wichtigsten Prinzipien moderner Webentwicklung.

1) Überschriften – die Gliederungs-Hierarchie

HTML hat sechs Überschriften-Ebenen: h1 (höchste) bis h6 (niedrigste). Sie bilden eine logische Hierarchie – wie ein Inhaltsverzeichnis. Suchmaschinen und Screenreader navigieren danach. Faustregel: pro Seite genau ein h1 (der Haupt-Titel), darunter h2 für Hauptabschnitte, dann h3 für Unterabschnitte usw.:

Überschriften h1–h6 im Default-Browser-Stil

<h1>

<h1>Hauptüberschrift</h1>

Hauptüberschrift

<h2>

<h2>Abschnitt</h2>

Abschnitt

<h3>

<h3>Unterabschnitt</h3>

Unterabschnitt

<h4>

<h4>Tiefer</h4>

Tiefer

<h5>

<h5>Noch tiefer</h5>

Noch tiefer

<h6>

<h6>Tiefste</h6>

Tiefste

Keine Ebenen überspringen! Nach h1 kommt h2, nicht h3. Sonst verwirrst du Screenreader und SEO-Tools. Häufiger Fehler von Anfängern: „ich nehme h3 weil ich h2 schon habe und das hier kleiner aussehen soll". Falsch – nimm h2 und mach die Schrift mit CSS kleiner. Größen sind nur die Default-Anzeige des Browsers, ändern lassen sie sich beliebig.

2) Absätze und Zeilenumbrüche

Der häufigste Tag überhaupt: <p> für Paragraph (Absatz). Browser fügen zwischen zwei Absätzen automatisch Abstand ein. Innerhalb eines Absatzes gibt es kleine Helfer:

Absatz, Zeilenumbruch, horizontale Linie

<p>Erster Absatz.</p>
<p>Zweiter Absatz
mit <br>
Zeilenumbruch.</p>
<hr>
<p>Nach der Trennlinie.</p>

Erster Absatz.

Zweiter Absatz
mit Zeilenumbruch.

Nach der Trennlinie.

<br> (line break) erzwingt einen Zeilenumbruch innerhalb eines Elements. Nutze es sparsam – meist sind Absätze die bessere Wahl. Für Adressen oder Gedichte ist <br> ok. <hr> (horizontal rule) zieht eine horizontale Linie – früher viel verwendet, heute meist durch CSS ersetzt. Beide sind sogenannte „void elements" – sie haben keinen Inhalt und werden nicht geschlossen.

3) Text hervorheben: strong, em und Konsorten

HTML hat mehrere Tags um Text hervorzuheben – nicht alle bedeuten dasselbe. strong sagt „das ist wichtig", em sagt „das wird betont". Browser zeigen das standardmäßig fett bzw. kursiv – aber semantisch ist es mehr als nur Formatierung:

Hervorhebungs-Tags und ihre Bedeutung

<strong>Wichtig</strong> - fett
<em>Betont</em> - kursiv
<mark>Markiert</mark> - gelb
<small>Kleingedrucktes</small>
<del>Durchgestrichen</del>
<code>code-style</code>
<sup>hoch</sup> und
<sub>tief</sub>

Wichtig – fett
Betont – kursiv
Markiert – gelb
Kleingedrucktes
~~Durchgestrichen~~
code-style
Wasser: H₂O · E=mc²

Es gibt auch noch <b> (bold) und <i> (italic) – die sind älter und „nur Optik", ohne semantische Bedeutung. Modern: nutze <strong> für Wichtigkeit, <em> für Betonung. Auch wenn das visuelle Ergebnis identisch aussieht – Screenreader betonen <em> tatsächlich anders, und Suchmaschinen werten <strong> als Hinweis auf wichtige Begriffe.

4) Listen: ungeordnet, geordnet, definiert

HTML kennt drei Arten von Listen. Die ersten beiden brauchst du dauernd, die dritte nur selten – ist aber praktisch für Glossare, FAQ-artige Strukturen oder Definitionen:

Listen-Varianten

<ul>
  <li>Äpfel</li>
  <li>Birnen</li>
  <li>Trauben</li>
</ul>


<ol>
  <li>Erst Mehl</li>
  <li>Dann Zucker</li>
</ol>

Äpfel
Birnen
Trauben

Erst Mehl
Dann Zucker

Wann <ul>, wann <ol>? Faustregel: Wenn die Reihenfolge wichtig ist (Rezept-Schritte, Top-10, Anleitung) → <ol>. Wenn nicht (Zutatenliste, Features, Tags) → <ul>. Listen können verschachtelt werden: ein <li> darf weiteres <ul>/<ol> enthalten. Mit CSS lassen sich die Aufzählungs-Symbole anpassen (list-style-type) oder ganz entfernen – sehr nützlich für Navigations-Menüs.

5) Definitionslisten – für Begriff + Beschreibung

Die dritte, oft vergessene Listenart: Definitionsliste mit <dl>. Sie eignet sich perfekt für „Term ↔ Beschreibung"-Paare:

Definitionsliste

<dl>
  <dt>HTML</dt>
  <dd>Strukturierende Sprache</dd>
  <dt>CSS</dt>
  <dd>Gestaltung & Layout</dd>
</dl>

HTML: Strukturierende Sprache
CSS: Gestaltung & Layout

dl = description list. dt = term, dd = description. Typische Anwendung: Glossar, Spezifikations-Tabellen (Größe: 10×20 cm, Gewicht: 200g), Metadaten in Artikeln (Autor: Anna, Datum: ...). Statt mit zwei Spalten in einer Tabelle oder mit verschachtelten divs – einfach dl.

6) Links – Verknüpfungen zur Welt

Der <a>-Tag ist das Element das HTML zum „Hypertext" macht. Das href-Attribut sagt wohin der Link führt. Es gibt verschiedene Arten von Linkzielen:

Link-Typen

Externer Link (absolute URL)

<a href="https://example.com">Extern</a>

Vollständige URL inkl. Schema. Führt auf andere Domain.

Interner Link (relativ)

Pfad auf derselben Domain. Beginnt mit / oder ohne Slash für relative Pfade.

Anker auf gleiche Seite

<a href="#abschnitt-3">Springen</a>

Mit # zu einem id-Element auf derselben Seite scrollen.

E-Mail / Telefon

<a href="mailto:info@xy.de">Mail</a>
<a href="tel:+4912345">Anrufen</a>

Öffnet Mail-Programm bzw. Telefon-App (auf Mobile).

Zwei wichtige Attribute: target="_blank" öffnet den Link in neuem Tab. Wenn du das machst, immer auch rel="noopener" dazu – sonst kann die geöffnete Seite über JavaScript auf dein Tab zugreifen (Security-Issue, siehe K11 Secure Coding). title="..." zeigt einen Tooltip beim Hover. Im Linktext: lieber „Lies hier mehr über CSS" als „Klick hier" – bessere SEO und Barrierefreiheit.

7) Live-Editor: Textelemente ausprobieren

Ändere den Code links und sieh sofort wie sich die Vorschau aktualisiert:

Live-Editor

HTML

Vorschau

8) Quoting: Zitate und vorformatierter Text

Für Zitate aus anderen Quellen gibt es zwei Tags. <blockquote> für längere Zitate (Block-Element), <q> für kurze Inline-Zitate. Beide stehen für „dieser Text ist nicht von mir":

<blockquote cite="https://example.com/quelle">

  <p>Etwas Wichtiges zitierte schon Einstein.</p>

</blockquote>

<p>Sie sagte <q>es ist nicht so einfach</q> und ging.</p>

Für vorformatierten Text (z.B. ASCII-Art, Code-Blöcke, Tabulator-Texte) gibt es <pre> – darin werden Leerzeichen und Zeilenumbrüche NICHT zusammengefasst (sonst macht HTML das standardmäßig). Oft mit <code> kombiniert für Code-Snippets: <pre><code>...</code></pre>.

9) HTML-Entities: Sonderzeichen einbinden

Manche Zeichen haben in HTML eine Sonderbedeutung – die kannst du nicht direkt im Text schreiben. Dafür gibt es HTML-Entities:

Entity	Zeichen	Wann verwenden?
`<`	<	Spitze Klammer auf – sonst denkt der Browser, ein Tag beginnt
`>`	>	Spitze Klammer zu
`&`	&	Das Et-Zeichen selbst – startet sonst ein Entity
`"`	"	Doppeltes Anführungszeichen in Attribut-Wert
` `		„Non-breaking space" – Leerzeichen ohne Zeilenumbruch
`©`	©	Copyright
`€`	€	Euro-Zeichen
`—`	—	Langer Gedankenstrich

Mit korrekter UTF-8-Kodierung (siehe L2 charset) kannst du heute fast alle Sonderzeichen direkt in den HTML-Code schreiben: ©, €, —, ✓, ☆, ♥, sogar Emojis. Entities sind nur noch für die HTML-Sonderzeichen <, >, & wirklich notwendig.

Zusammenfassung

Sechs Überschriften-Ebenen h1–h6 für logische Gliederung (nicht Ebenen überspringen). Absätze mit <p>, Zeilenumbruch mit <br>, Trennlinie mit <hr>. Hervorhebungen: <strong> (wichtig), <em> (betont), <mark> (markiert), <code> (Code), <del> (durchgestrichen). Listen: <ul> ungeordnet, <ol> geordnet, <dl>+<dt>+<dd> für Definitionen. Links mit <a href="...">: absolut (https://), relativ (/pfad), Anker (#id), mailto:/tel:. Bei target="_blank" immer rel="noopener". Sonderzeichen: <, >, &,  .