Appearance
Kapitel 4: HTML-Text-Tags
📝 Lernziel: Text-Tags beherrschen - die Grundlage für alle Inhalte im Web!
4.1 Überschriften-Tags: h1-h6
Überschriften sind SEO-kritisch - Suchmaschinen lesen sie zur Bestimmung des Seiteninhalts.
Hierarchie:
html
<h1>Wichtigste Überschrift (nur einmal pro Seite!)</h1>
<h2>Zweitwichtigste Überschrift</h2>
<h3>Drittwichtigste Überschrift</h3>
<h4>Überschrift Ebene 4</h4>
<h5>Überschrift Ebene 5</h5>
<h6>Kleinste Überschrift</h6>Darstellung im Browser:
━━━━━━━━━━━━━━━━━━━━━━━━━
h1: Sehr groß und fett
━━━━━━━━━━━━━━━━━━━━━━━━━
h2: Groß und fett
━━━━━━━━━━━━━━━━━━━━━━━━━
h3: Mittelgroß und fett
━━━━━━━━━━━━━━━━━━━━━━━━━
h4: Normal und fett
━━━━━━━━━━━━━━━━━━━━━━━━━
h5: Klein und fett
━━━━━━━━━━━━━━━━━━━━━━━━━
h6: Sehr klein und fett
━━━━━━━━━━━━━━━━━━━━━━━━━SEO-Regeln:
- ❌ Verwende nur ein h1 pro Seite
- ✅ h2-h6 können mehrfach verwendet werden
- ✅ Hierarchie einhalten: h1 → h2 → h3 (nicht h1 → h3 überspringen)
4.2 Absatz-Tag: p-Tag
Das <p>-Tag erstellt Textabsätze.
Syntax:
html
<p>Dies ist ein Absatz Text. Browser fügen automatisch Abstände vor und nach dem Absatz hinzu.</p>Zeilenumbruch und Einzug:
html
<p>Erster Absatz.</p>
<p>Zweiter Absatz.</p>
<!-- Browser fügt automatisch Abstände hinzu -->Weiche Leerzeichen und Zeilenumbrüche im Code haben keine Auswirkung im Browser:
html
<p>Dieser Text hat im Code viele Leerzeichen,
aber der Browser zeigt ihn in einer Zeile an.</p>4.3 Textformatierung-Tags
| Tag | Funktion | Beispiel |
|---|---|---|
<strong> | Wichtig (fett) | wichtig |
<b> | Fett (nur Optik) | fett |
<em> | Betonung (kursiv) | betonen |
<i> | Kursiv (nur Optik) | kursiv |
<del> | Durchgestrichen | |
<u> | Unterstrichen | unterstrichen |
<mark> | Hervorgehoben | markiert |
<sub> | Tiefgestellt | H2O |
<sup> | Hochgestellt | x2 |
Beispiel:
html
<p><strong>Wichtig:</strong> Dieser Text ist fett.</p>
<p><em>Betonung:</em> Dieser Text ist kursiv.</p>
<p><del>Alter Preis:</del> <strong>Neuer Preis: 9,99 €</strong></p>4.4 Zeilenumbruch und horizontale Linie
br-Tag (Zeilenumbruch)
html
<p>Dies ist die erste Zeile.<br>Dies ist die zweite Zeile.</p>hr-Tag (horizontale Linie)
html
<p>Abschnitt 1</p>
<hr>
<p>Abschnitt 2</p>Darstellung:
Abschnitt 1
────────────────────────────
Abschnitt 24.5 Sonderzeichen
Manche Zeichen sind in HTML reserviert und müssen maskiert werden.
Häufige Sonderzeichen:
| Zeichen | HTML-Code | Beschreibung |
|---|---|---|
| Leerzeichen | | Non-breaking space |
| < | < | Kleiner als |
| > | > | Größer als |
| & | & | Ampersand |
| © | © | Copyright |
| ® | ® | Registriert |
| € | € | Euro-Zeichen |
Beispiel:
html
<p>5 < 10 und 10 > 5</p>
<p>© 2026 Meine Webseite</p>4.6 Praxis: Artikel-Seite erstellen
Aufgabe: Erstelle eine Artikel-Seite mit Überschriften, Absätzen und formatiertem Text.
Lösung:
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mein erster Artikel</title>
</head>
<body>
<h1>Die Zukunft des Webens</h1>
<p><strong>HTML</strong> ist die Basis des Webs. In diesem Artikel lernen wir die Grundlagen.</p>
<h2>Warum HTML wichtig ist</h2>
<p>HTML bildet das <em>Skelett</em> jeder Webseite. Ohne HTML kein Web.</p>
<h2>Wie man anfängt</h2>
<p>Schritt 1: Editor installieren<br>
Schritt 2: Erste HTML-Datei erstellen<br>
Schritt 3: Code schreiben und testen</p>
<hr>
<p><del>Alter Kurs: 99 €</del> <strong>Neuer Kurs: 49 €</strong></p>
</body>
</html>✅ Zusammenfassung
In diesem Kapitel hast du gelernt:
- ✅ Überschriften-Tags h1-h6 (SEO-wichtig!)
- ✅ Absatz-Tag p
- ✅ Textformatierung (strong, em, del, u)
- ✅ Zeilenumbruch (br) und horizontale Linie (hr)
- ✅ Sonderzeichen in HTML
- ✅ Eine Artikel-Seite zu erstellen
🎯 Nächster Schritt: In Kapitel 5 lernst du Bild-Tags!
← Zurück zu Kapitel 3: Grundlegende SyntaxWeiter zu Kapitel 5: Bild-Tags →