Appearance
Kapitel 16: Häufige Fehler und Fehlerbehebung
🔧 Lernziel: Häufige HTML-Fehler erkennen und beheben - Entwicklungseffizienz steigern!
16.1 Häufige Syntaxfehler
Fehler 1: Tags nicht geschlossen
html
<!-- ❌ Falsch -->
<p>Dieser Absatz ist nicht geschlossen
<p>Dieser Absatz wird auch nicht geschlossen
<!-- ✅ Richtig -->
<p>Dieser Absatz ist geschlossen</p>
<p>Dieser Absatz ist auch geschlossen</p>Auswirkung: Browser versucht, Fehler zu korrigieren, aber Layout kann unerwartet sein.
Fehler 2: Attribute falsch geschrieben
html
<!-- ❌ Falsch -->
<img srs="bild.jpg" allt="Bild">
<!-- ✅ Richtig -->
<img src="bild.jpg" alt="Bild">Häufige Tippfehler:
srsstattsrcalltstattaltherfstatthref
Fehler 3: Pfadfehler
html
<!-- ❌ Falsch (Bild existiert nicht am Pfad) -->
<img src="bilder/bild.jpg">
<!-- ✅ Richtig (Pfad existiert) -->
<img src="bilder/logo.jpg">Tipp: Pfade sind casesensitiv (Groß-/Kleinschreibung matters!)
16.2 Browser-Debugging: F12 Entwicklertools
Die F12 Entwicklertools sind dein bester Freund zum Fehlersuchen.
Schritt 1: Entwicklertools öffnen
- Drücke F12 oder
- Rechtsklick → Untersuchen
Schritt 2: HTML-Fehler prüfen (Elemente-Tab)
┌─────────────────────────────────────┐
│ Elemente Konsole Netzwerk ... │
├─────────────────────────────────────┤
│ <!DOCTYPE html> │
│ <html> │
│ <head>...</head> │
│ <body> │
│ <h1>Hallo</h1> │ ← Hier schauen
│ </body> │
│ </html> │
└─────────────────────────────────────┘Was du sehen kannst:
- HTML-Struktur der Seite
- Nicht geschlossene Tags (werden rot markiert)
- Fehlende Attribute (werden angezeigt)
Schritt 3: Konsole auf Fehler prüfen
- Wechsle zum "Konsole"-Tab
- Rot markierte Fehler = Probleme
- Klicke auf Fehler für Details
16.3 Bilder/Links werden nicht angezeigt
Ursache 1: Falscher Bildpfad
html
<!-- ❌ Falsch -->
<img src="bilder/bild.jpg">
<!-- ✅ Richtig (Datei existiert wirklich) -->
<img src="images/photo.jpg">Lösung:
- Prüfe, ob die Datei wirklich existiert
- Prüfe Groß-/Kleinschreibung
- Verwende relative Pfade (
bilder/bild.jpg)
Ursache 2: Falscher Link
html
<!-- ❌ Falsch (Seite existiert nicht) -->
<a href="kontakt.html">Kontakt</a>
<!-- ✅ Richtig (Seite existiert) -->
<a href="contact.html">Kontakt</a>Lösung:
- Prüfe, ob die Zieldatei existiert
- Prüfe den Dateinamen (Groß-/Kleinschreibung)
- Teste den Link im Browser
Ursache 3: Absolute/Relative Pfade verwechselt
html
<!-- ❌ Falsch (wenn datei lokal) -->
<img src="/bilder/bild.jpg"> <!-- Vom Server-Root -->
<!-- ✅ Richtig (für lokale Dateien) -->
<img src="bilder/bild.jpg"> <!-- Relativ zum aktuellen Verzeichnis -->16.4 Formularübermittlung fehlgeschlagen
Prüfung auf HTML-Ebene:
1. action-Attribut prüfen
html
<!-- ❌ Falsch (Datei existiert nicht) -->
<form action="nicht-existierend.php">
<!-- ✅ Richtig -->
<form action="process.php">2. method-Attribut prüfen
html
<!-- GET: Daten in URL (für Suche) -->
<form method="GET" action="search.php">
<!-- POST: Daten im Hintergrund (für Login) -->
<form method="POST" action="login.php">3. name-Attribute prüfen (wichtig für Server!)
html
<!-- ❌ Falsch (kein name-Attribut) -->
<input type="text">
<!-- ✅ Richtig -->
<input type="text" name="benutzername">4. required-Attribute prüfen
html
<!-- Formular wird nicht gesendet, wenn leer -->
<input type="email" required>16.5 Praxis: Fehlerhaften HTML-Code finden und beheben
Aufgabe: Finde und behebe alle Fehler in diesem Code.
Fehlerhafter Code:
html
<!DOCTYPE html>
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<header>
<h1>Willkommen</h1>
<nav>
<ul>
<li><a href="index.html">Start</a>
<li><a href="über-uns.html">Über uns</a></li>
</ul>
</nav>
</header>
<main>
<img srs="logo.png" alt="Logo">
<p>Dies ist ein Absatz
<a href="kontakt.html">Kontakt</a>
</main>
<footer>
<p>Copyright 2026
</footer>
</body>
</html>Lösung (fehlerfrei):
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Webseite</title>
</head>
<body>
<header>
<h1>Willkommen</h1>
<nav>
<ul>
<li><a href="index.html">Start</a></li> <!-- </li> hinzugefügt -->
<li><a href="ueber-uns.html">Über uns</a></li>
</ul>
</nav>
</header>
<main>
<img src="logo.png" alt="Logo"> <!-- srs → src korrigiert -->
<p>Dies ist ein Absatz</p> <!-- </p> hinzugefügt -->
<a href="kontakt.html">Kontakt</a>
</main>
<footer>
<p>Copyright 2026</p> <!-- </p> hinzugefügt -->
</footer>
</body>
</html>Gefundene Fehler:
- ❌
<li>nicht geschlossen → ✅</li>hinzugefügt - ❌
srs="logo.png"falsch geschrieben → ✅src="logo.png"korrigiert - ❌
<p>nicht geschlossen → ✅</p>hinzugefügt - ❌
<p>in footer nicht geschlossen → ✅</p>hinzugefügt - ❌
lang="de"fehlt → ✅ hinzugefügt - ❌
charsetfehlt → ✅ hinzugefügt - ❌
über-uns.html(Umlaut) → ✅ueber-uns.html(besser ohne Umlaute)
✅ Zusammenfassung
In diesem Kapitel hast du gelernt:
- ✅ Häufige Syntaxfehler zu erkennen (Tags nicht geschlossen, Attribute falsch)
- ✅ F12 Entwicklertools zur Fehlersuche zu verwenden
- ✅ Warum Bilder/Links nicht angezeigt werden (und Lösungen)
- ✅ Formularfehler auf HTML-Ebene zu beheben
- ✅ Fehlerhaften HTML-Code zu finden und zu korrigieren
🎉 Glückwunsch!
Du hast die HTML Zero-Basis Tutorial-Serie (Kapitel 1-16) abgeschlossen!
Was du jetzt kannst:
- ✅ HTML-Dokumente von Grund auf erstellen
- ✅ Texte, Bilder, Links, Listen, Tabellen, Formulare erstellen
- ✅ Semantische Entwicklung für SEO
- ✅ HTML mit CSS und JavaScript verbinden
- ✅ Häufige Fehler beheben
Nächste Schritte:
- CSS lernen (Styling) →
docs/css/teil1/kapitel1.md - JavaScript lernen (Interaktion) →
docs/javascript/teil1/kapitel1.md - Üben, üben, üben! Erstelle eigene Projekte!