Text und Formatierung
In HTML sind Texte das Herzstück jeder Webseite.
Egal ob Blogartikel, Produktbeschreibung oder Überschrift – alles beginnt mit Text.
Damit der Browser weiß, wie er Texte darstellen soll, nutzt HTML sogenannte Formatierungstags.
Sie bestimmen Struktur, Bedeutung und Aussehen (z. B. Überschrift, Absatz, fett, kursiv usw.).
In dieser Lektion lernst du:
wie du Text strukturierst,
wie du Absätze, Überschriften und Hervorhebungen setzt,
und wie du semantisch korrekt arbeitest (also bedeutungsvoll statt nur optisch).
1. Überschriften
HTML kennt sechs Überschriftenebenen:<h1> ist die wichtigste, <h6> die unwichtigste.
<h1>Das ist eine Hauptüberschrift</h1>
<h2>Das ist eine Unterüberschrift</h2>
<h3>Noch eine Ebene tiefer</h3>
Absätze
Absätze werden mit dem <p>-Tag erstellt. Sie sind der grundlegende Blocktext für HTML-Dokumente.
Beispiel:
<p>Dies ist ein Absatz. Absätze werden verwendet, um Textblöcke zu strukturieren.</p>
Zeilenumbruch
Ein Zeilenumbruch wird mit dem <br>-Tag erstellt. Dieses Tag ist selbstschließend.
Beispiel:
<p>Dies ist der erste Satz.<br>Dies ist der zweite Satz auf einer neuen Zeile.</p>
Horizontale Linie
Eine horizontale Linie wird mit dem <hr>-Tag erstellt. Dieses Tag ist ebenfalls selbstschließend und wird verwendet, um Abschnitte visuell zu trennen.
Beispiel:
<p>Text vor der Linie.</p>
<hr>
<p>Text nach der Linie.</p>
3.2. Textformatierung
Fett und kursiv
Um Text fett oder kursiv zu formatieren, werden die Tags <b> oder <strong> für fett und <i> oder <em> für kursiv verwendet.
Beispiele:
<p>Dies ist <b>fetter Text</b>.</p>
<p>Dies ist <strong>starker Text</strong>.</p>
<p>Dies ist <i>kursiver Text</i>.</p>
<p>Dies ist <em>betonter Text</em>.</p>
Unterstrichen und kleiner Text
Um Text zu unterstreichen oder kleiner darzustellen, werden die Tags <u> und <small> verwendet.
Beispiele:
<p>Dies ist <u>unterstrichener Text</u>.</p>
<p>Dies ist <small>kleiner Text</small>.</p>
3.3. Listen
HTML bietet ungeordnete (bullet point) und geordnete (nummerierte) Listen. Ungeordnete Listen verwenden das <ul>-Tag und geordnete Listen das <ol>-Tag. Listenelemente werden mit dem <li>-Tag erstellt.
Ungeordnete Liste:
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
Geordnete Liste:
<ol>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ol>
3.4. Blockzitate und Vorformatierter Text
Blockzitate
Blockzitate werden mit dem <blockquote>-Tag erstellt und werden verwendet, um längere Zitate darzustellen.
Beispiel:
<blockquote>
Dies ist ein längeres Zitat. Es wird typischerweise verwendet, um längere Abschnitte von Text, die von einer anderen Quelle stammen, zu formatieren.
</blockquote>
Vorformatierter Text
Vorformatierter Text wird mit dem <pre>-Tag erstellt und behält die im HTML-Code eingegebenen Leerzeichen und Zeilenumbrüche bei.
Beispiel:
<pre>
Dies ist vorformatierter Text.
Er behält alle Leerzeichen
und Zeilenumbrüche bei.
</pre>
Der Browser zeigt jede Überschrift automatisch in anderer Größe an.
Die Struktur ist hierarchisch, nicht optisch!
Es darf auf jeder Seite nur eine <h1> geben – sie beschreibt das Hauptthema.
2. Absätze und Zeilenumbrüche
Ein Absatz wird mit <p> erstellt.
<p>Dies ist ein Absatz mit normalem Text.</p>
<p>Hier beginnt ein neuer Absatz.</p>
Ein Zeilenumbruch innerhalb eines Absatzes funktioniert mit <br>:
<p>Zeile eins<br>Zeile zwei<br>Zeile drei</p>
<br> ist leer (kein End-Tag nötig) und sollte nur sparsam genutzt werden – für echte Textabsätze ist <p> korrekt.
3. Text hervorheben
HTML bietet verschiedene Möglichkeiten, Text hervorzuheben.
| Tag | Bedeutung | Beispiel | Erklärung |
|---|---|---|---|
<b> | Fett (rein optisch) | <b>Text</b> | keine Bedeutung, nur Stil |
<strong> | Wichtig/betont | <strong>Wichtig!</strong> | semantisch korrekt |
<i> | Kursiv (optisch) | <i>Beispiel</i> | keine Bedeutung |
<em> | Betonung | <em>sehr</em> wichtig | semantisch korrekt |
<u> | Unterstrichen | <u>Unterstrichen</u> | selten genutzt |
<mark> | Markiert | <mark>Hervorgehoben</mark> | visuelle Hervorhebung |
<small> | Kleinerer Text | <small>Kleingedrucktes</small> | für rechtliche Hinweise |
Praxis-Tipp:
Verwende nach Möglichkeit <strong> und <em>, weil sie auch für Screenreader und Suchmaschinen verständlich sind.
4. Weitere Text-Elemente
| Zweck | Tag | Beispiel |
|---|---|---|
| Zitat | <blockquote> | <blockquote>„Das ist ein längeres Zitat.“</blockquote> |
| Kurzes Zitat | <q> | <q>Kurz gesagt</q> |
| Code oder Befehl | <code> | <code>ping 8.8.8.8</code> |
| Abkürzung | <abbr> | <abbr title="HyperText Markup Language">HTML</abbr> |
| Durchgestrichen | <del> | <del>falsch</del> |
5. Beispielseite mit formatiertem Text
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Textformatierung</title>
</head>
<body>
<h1>Mein erster HTML-Text</h1>
<p>Das ist ein <strong>wichtiger</strong> Absatz.</p>
<p>Ich kann Text auch <em>betonen</em> oder <mark>hervorheben</mark>.</p>
<p>Und hier ist ein Zeilenumbruch:<br>Zeile 1<br>Zeile 2</p>
</body>
</html>
Der linke Bereich ist der HTML-Code, der rechte zeigt sofort das Ergebnis.
6. Häufige Fehler
| Fehler | Ursache | Lösung |
|---|---|---|
<br> in langen Texten als Absatztrenner | falsche Verwendung | lieber <p> für Absätze |
<b> statt <strong> | semantisch ungenau | <strong> für wichtige Inhalte |
| Keine Überschriftenhierarchie | <h1> überall | pro Seite nur eine <h1> |
7. Fazit
HTML formatiert Texte über Tags.
<h1>bis<h6>definieren Überschriftenebenen.<p>trennt Absätze.<strong>und<em>geben Bedeutung, nicht nur Stil.<mark>,<small>,<code>,<blockquote>ergänzen spezielle Fälle.Gute HTML-Struktur ist semantisch sinnvoll – nicht nur optisch schön.