Fehler im Quelltext finden
Typische Fehler in HTML sind fehlende oder falsche End-Tags, falsche Verschachtelung und fehlende Anführungszeichen.
Das lernst du heute
- Ich kenne typische Syntaxfehler in HTML.
- Ich kann einen Quelltext Zeile für Zeile prüfen.
- Ich kann Fehler erklären und verbessern.
Das brauchst du schon: Vielleicht hilft dir zuerst eine dieser Lektionen: Syntax und Semantik, Fehlermeldungen verstehen
Browser sind großzügig. Sie versuchen, kaputten Quelltext selbst zu reparieren. Die Seite sieht dann vielleicht anders aus als gedacht. Darum prüft man den Quelltext selbst. Es gibt auch Prüfwerkzeuge im Netz, die HTML auf Syntaxfehler untersuchen.
Häufige Fehler: Das End-Tag fehlt oder hat keinen Schrägstrich. Elemente sind falsch verschachtelt. Ein Tagname hat einen Tippfehler. Ein Attributwert hat kein schließendes Anführungszeichen. Gehe den Quelltext Zeile für Zeile durch. Prüfe bei jedem Start-Tag, ob das passende End-Tag da ist. Zuletzt geöffnete Elemente schließt man zuerst.
| Zeile | Quelltext |
|---|---|
| 1 | <body> |
| 2 | <h1>Mein Verein<h1> |
| 3 | <p>Wir treffen uns <strong>montags.</p></strong> |
| 4 | <imgg src="katze.jpg" alt="Eine Katze"> |
| 5 | <a href="seite.html>Mehr</a> |
| 6 | </body> |
Die Fehler finden
- Zeile 2: Das End-Tag ist <h1>. Es muss </h1> heißen.
- Zeile 3: strong und p sind falsch verschachtelt. Richtig: …montags.</strong></p>.
- Zeile 4: Der Tagname imgg hat einen Tippfehler. Richtig ist img.
- Zeile 5: Nach seite.html fehlt das schließende Anführungszeichen.
Ich verstehe das noch nicht
Such dir aus, was dir hilft.
Noch einfacher erklärt
Zeile für Zeile lesen.
Start-Tag und End-Tag paaren.
Einen Fehler nach dem anderen beheben.
Ein Beispiel
Beim Korrekturlesen prüfst du auch Satz für Satz. Beim Quelltext prüfst du Zeile für Zeile.
Schritt für Schritt
Wir prüfen die Zeile <p>Wir sind <strong>neu</p>.
- Offen sind p und strong.
- Das End-Tag </p> kommt, aber zuletzt wurde strong geöffnet.
- Zuerst muss </strong> stehen, dann </p>.
- Richtig: <p>Wir sind <strong>neu</strong></p>.
Mit einem Bild erklärt
| Fehler | Beispiel | Verbesserung |
|---|---|---|
| End-Tag ohne Schrägstrich | <h1>Titel<h1> | <h1>Titel</h1> |
| Falsche Verschachtelung | <p><strong>A</p></strong> | <p><strong>A</strong></p> |
| Tippfehler im Tag | <imgg src="a.jpg" alt="Haus"> | <img src="a.jpg" alt="Haus"> |
| Anführungszeichen fehlt | <a href="a.html>Ziel</a> | <a href="a.html">Ziel</a> |
Zur Grundlage zurück
- Syntax und Semantik – Du kennst Syntax und Semantik.
- Fehlermeldungen verstehen – Du kennst Fehlermeldungen in Programmen.
Jetzt zusammen
Wir lösen die Aufgabe gemeinsam. Nutze die Hilfen, wenn du sie brauchst.
Zeig mir den ersten Schritt
Vergleiche Start-Tag und End-Tag.
Lösung ansehen
Lösung: Das End-Tag hat keinen Schrägstrich.
Jetzt du
Jetzt probierst du es allein.
Zeig mir den ersten Schritt
Ein Attributwert hat ein öffnendes und ein schließendes Anführungszeichen.
Lösung ansehen
Lösung: <a href="seite.html">Mehr</a>
Tipp: Mache dir eine Liste: Welche Elemente sind offen? Wenn du ein End-Tag liest, streichst du das zuletzt geöffnete Element.
Merksatz: Prüfen: Start-Tag und End-Tag paaren, innen zuerst schließen, Tagnamen und Anführungszeichen kontrollieren.
Typischer Fehler: Viele ändern an vielen Stellen auf einmal. Besser ist: einen Fehler beheben, dann neu prüfen.
Mini-Quiz
4 kurze Fragen, ohne Noten. Bei jeder Frage kannst du dir die Lösung ansehen.
Lösung ansehen
Lösung: <imgg src="a.jpg" alt="Haus">
Lösung ansehen
Lösung: Stimmt nicht
Frage 3 In welcher Zeile des Beispiels fehlt ein Anführungszeichen?
Zeig mir den ersten Schritt
Suche den Link mit href.
Lösung ansehen
Lösung: 5
Der Link mit dem fehlenden Anführungszeichen steht in Zeile 5.
Lösung ansehen
Lösung: einen Fehler beheben und dann neu prüfen
Geschafft
Typische Syntaxfehler sind fehlende End-Tags, falsche Verschachtelung, Tippfehler und fehlende Anführungszeichen. Man prüft Zeile für Zeile.
Kannst du das schon?
Hake ab, was du schon kannst. Was noch fehlt, schaust du dir einfach noch einmal an.
Übungsheft Webseiten mit HTML
Kurz erklärt, 44 Aufgaben in drei Stufen und alle Lösungen. Kostenlos.
Das Heft ist für alle kostenlos – auch wenn gerade kein Geld dafür da ist. Wer es einrichten kann, unterstützt DYS+ Campus mit einem selbst gewählten Betrag. Freiwillig unterstützen