Validieren, Werkzeuge & dein Weg weiter – HTML lernen

Das lernst du in dieser Lektion

Du weißt, warum valides HTML wichtig ist, obwohl Browser Fehler stillschweigend reparieren.
Du prüfst deine Seiten mit dem W3C-Validator und liest Fehlermeldungen mit der richtigen Strategie.
Du nutzt die Entwicklerwerkzeuge deines Browsers, um jede Webseite zu durchleuchten.
Du baust als Abschlussprojekt eine vollständige Über-mich-Seite mit allem Gelernten.
Du kennst deine nächsten Schritte: CSS als Ausbaustufe und die MDN Web Docs als Referenz.

Zehn Lektionen, ein Ziel – und du stehst kurz davor. Du kannst Texte strukturieren und verlinken, Bilder, Listen, Tabellen und Formulare bauen und ganzen Seiten ein semantisches Skelett geben. In dieser letzten Lektion des Anfänger-Kurses bekommst du das Handwerkszeug der Profis dazu: Du lässt dein HTML automatisch prüfen, wirfst mit den Entwicklerwerkzeugen einen Röntgenblick in beliebige Webseiten – und baust zum Abschluss dein erstes eigenes Projekt von A bis Z.

Browser verzeihen viel – zu viel

Vielleicht ist es dir beim Experimentieren schon passiert: Du vergisst ein schließendes Tag, und die Seite … sieht trotzdem gut aus. Das ist kein Zufall. Browser sind darauf gebaut, kaputtes HTML nach festen Regeln zu reparieren – das Web ist voll von fehlerhaften Seiten, und keine davon soll deshalb leer bleiben. Das klingt beruhigend, hat aber einen Haken: Die Reparatur des Browsers entspricht nicht unbedingt deiner Absicht. Und was heute zufällig gut aussieht, bricht morgen, wenn du die Seite erweiterst.

Fehlerhaftes HTML kostet dich an drei Stellen, die du inzwischen alle kennst:

Barrierefreiheit: Ein falsch verschachteltes Formular oder ein Bild ohne alt-Text fällt sehenden Besuchern nie auf – Screenreader-Nutzer stolpern sofort darüber.
Suchmaschinen: Crawler müssen deine Struktur zuverlässig lesen können. Je mehr der Browser raten muss, desto mehr rät auch Google.
Wartbarkeit: Fehler stapeln sich. Auf einer Seite mit zwanzig kleinen Schlampereien ist der einundzwanzigste Fehler kaum noch zu finden.

Die gute Nachricht: Du musst Fehler nicht selbst suchen. Dafür gibt es ein kostenloses, offizielles Werkzeug.

Der W3C-Validator: dein Prüfstand

Unter validator.w3.org betreibt das W3C – eine der Organisationen hinter den Webstandards – einen kostenlosen Prüfdienst, der dein HTML Zeichen für Zeichen mit dem Standard abgleicht. So gehst du vor:

Öffne validator.w3.org im Browser.
Wähle einen von drei Wegen: eine Adresse prüfen („Validate by URI“ – für bereits veröffentlichte Seiten), eine Datei hochladen („by File Upload“) oder deinen Code direkt einfügen („by Direct Input“ – für den Anfang der bequemste Weg).
Klicke auf Check und lies das Ergebnis: Grün heißt „keine Fehler gefunden“. Andernfalls bekommst du eine Liste aus Fehlern (Error) und Warnungen (Warning) – jeweils mit Zeilennummer und einer kurzen Erklärung.

Die Meldungen sind auf Englisch, aber lass dich davon nicht abschrecken: Es sind immer dieselben Muster, und mit jeder Prüfung liest du sie flüssiger. Wichtiger als jedes Vokabelwissen ist die richtige Strategie beim Beheben.

Drei typische Fehler, die der Validator findet

<!-- Fehler 1: Bild ohne alt-Attribut -->
<img src="strand.jpg">

<!-- Fehler 2: falsch verschachtelt – strong muss VOR dem p schließen -->
<p>Das ist <strong>wichtig.</p></strong>

<!-- Fehler 3: direkt in einer Liste dürfen nur li-Elemente stehen -->
<ul>
  <li>Erster Punkt</li>
  <p>Dieser Absatz gehört hier nicht hinein.</p>
</ul>

Übe das Fehlerlesen gleich hier: Im Editor unten stecken genau diese drei Fehlerarten. Der Browser rendert die Seite trotzdem halbwegs ansehnlich – genau das ist ja das Tückische. Repariere den Code so, dass der Validator nichts mehr zu beanstanden hätte: alt-Text ergänzen, die Verschachtelung korrigieren und den Absatz aus der Liste hinter die Liste verschieben.

Probier es ausÄndere den Code – die Vorschau aktualisiert sich sofort.

<h1>Fundbüro der Klasse 7b</h1>

<p>Auf dieser Seite verstecken sich <strong>drei Fehler.</p></strong>

<img src="turnbeutel.jpg">

<ul>
  <li>Ein blauer Turnbeutel</li>
  <li>Eine silberne Trinkflasche</li>
  <p>Gefunden? Melde dich im Sekretariat!</p>
</ul>

Entwicklerwerkzeuge: der Röntgenblick

Das zweite Profi-Werkzeug hast du längst installiert: In jedem Browser stecken die Entwicklerwerkzeuge. Klicke mit der rechten Maustaste auf ein beliebiges Element einer Webseite und wähle „Untersuchen“ (je nach Browser auch „Element untersuchen“, alternativ die Taste F12). Es öffnet sich ein Bereich, der die Seite durchleuchtet wie ein Röntgenbild: Neben der Seite siehst du in der Elemente-Ansicht ihren kompletten HTML-Baum – aufklappbar, durchsuchbar, live.

Drei Dinge machen die Elemente-Ansicht für dich wertvoll:

Fährst du mit der Maus über eine Zeile Code, leuchtet das zugehörige Element in der Seite auf – so siehst du sofort, welcher Code welchen Bereich erzeugt.
Du kannst Texte und Attribute direkt bearbeiten und die Wirkung live beobachten. Keine Angst: Du änderst nur die Kopie in deinem Browser – nach dem Neuladen ist alles wie vorher. Ein perfekter Spielplatz.
Das funktioniert auf jeder Webseite der Welt. Wenn du dich fragst „Wie haben die das gebaut?“, schau einfach nach – es ist eine der besten Lernmethoden überhaupt.

Neben der Elemente-Ansicht siehst du weitere Reiter wie „Konsole“ oder „Netzwerk“ – die gehören zu JavaScript und zum Datenverkehr und dürfen dich heute noch nicht interessieren. Für alles, was du in diesem Kurs gelernt hast, ist die Elemente-Ansicht dein Zuhause.

Dein Abschlussprojekt: die Über-mich-Seite

Jetzt kommt alles zusammen. Dein Abschlussprojekt ist eine persönliche „Über mich“-Seite – als echte Datei auf deinem Rechner, geöffnet im Browser, geprüft mit dem Validator. Nimm dir ruhig eine Stunde Zeit und arbeite diese Anforderungen der Reihe nach ab:

Ein vollständiges Grundgerüst: Doctype, <html lang="de">, <head> mit Zeichencodierung und <title>.
Genau eine <h1> und mindestens zwei weitere Überschriften in sauberer Hierarchie.
Mehrere Absätze über dich – und mindestens ein Link zu einer Seite, die du magst.
Ein Bild mit aussagekräftigem alt-Text.
Eine Liste (z. B. deine Hobbys) und eine kleine Tabelle (z. B. deine nächsten Reiseziele).
Ein kleines Formular mit beschrifteten Feldern – natürlich mit label und for/id.
Semantische Bereiche: header mit nav, main und footer.
Zum Schluss: validieren – und Fehler beheben, bis der Validator grün zeigt.

Bau die Seite erst selbst, bevor du weiterliest – der Lerneffekt entsteht beim eigenen Ringen, nicht beim Abschreiben. Wenn du irgendwo hängst, blättere ruhig in die früheren Lektionen zurück; genau dafür sind sie da. Danach kannst du dein Ergebnis mit dieser Musterlösung vergleichen. Sie ist bewusst schlicht gehalten; deine Seite darf gern persönlicher ausfallen:

Musterlösung: die komplette Über-mich-Seite

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Über mich – Jonas Weber</title>
</head>
<body>

  <header>
    <h1>Hallo, ich bin Jonas!</h1>
    <nav>
      <a href="#hobbys">Hobbys</a> ·
      <a href="#reisen">Reisen</a> ·
      <a href="#kontakt">Kontakt</a>
    </nav>
  </header>

  <main>
    <p>Schön, dass du hier bist! Ich bin 27, wohne in Leipzig und habe
    gerade meine erste eigene Webseite gebaut – genau diese hier.</p>

    <img src="jonas.jpg"
         alt="Jonas steht mit seinem Rennrad vor der Thomaskirche in Leipzig"
         width="400" height="300">

    <section id="hobbys">
      <h2>Meine Hobbys</h2>
      <ul>
        <li>Rennrad fahren</li>
        <li>Brot backen</li>
        <li>Webseiten bauen – seit diesem Kurs!</li>
      </ul>
      <p>Mehr über meine Backversuche gibt es im
      <a href="https://www.example.org">Blog meiner Schwester</a>.</p>
    </section>

    <section id="reisen">
      <h2>Meine nächsten Reiseziele</h2>
      <table>
        <tr>
          <th>Ziel</th>
          <th>Wann</th>
        </tr>
        <tr>
          <td>Ostsee</td>
          <td>August 2026</td>
        </tr>
        <tr>
          <td>Südtirol</td>
          <td>Oktober 2026</td>
        </tr>
      </table>
    </section>

    <section id="kontakt">
      <h2>Schreib mir</h2>
      <form action="/nachricht" method="post">
        <p>
          <label for="name">Dein Name</label><br>
          <input type="text" id="name" name="name" required>
        </p>
        <p>
          <label for="nachricht">Deine Nachricht</label><br>
          <textarea id="nachricht" name="nachricht" rows="4"></textarea>
        </p>
        <button type="submit">Abschicken</button>
      </form>
    </section>
  </main>

  <footer>
    <p>© 2026 Jonas Weber · Erstellt mit selbst geschriebenem HTML</p>
  </footer>

</body>
</html>

Dein Weg weiter: CSS und die MDN Web Docs

Und jetzt? Der logische nächste Schritt heißt CSS. Deine Über-mich-Seite ist strukturell einwandfrei – aber sie sieht aus wie 1995. Genau das ist der richtige Zustand: Erst wenn die Struktur steht, ergibt Gestaltung Sinn. Mit CSS lernst du, Farben, Schriften, Abstände und ganze Seitenlayouts zu gestalten – und du wirst feststellen, dass sich die Mühe mit dem sauberen HTML doppelt auszahlt, denn gut strukturierte Seiten lassen sich viel leichter gestalten.

Dein zweiter Begleiter ab jetzt: die MDN Web Docs (developer.mozilla.org), die frei zugängliche Referenz zu allem, was mit Webtechnik zu tun hat – große Teile davon auf Deutsch. Kein Profi der Welt kennt alle Elemente und Attribute auswendig; Profis wissen, wo sie nachschlagen. Wenn du dich fragst „Welche Attribute hat noch mal <table>?“, ist MDN die Antwort. Gewöhne dir früh an, dort nachzusehen statt in veralteten Foren – Webwissen altert schnell, MDN wird laufend gepflegt.

Zusammenfassung

Browser reparieren kaputtes HTML stillschweigend – aber Fehler kosten Barrierefreiheit, Auffindbarkeit und Wartbarkeit.
Der W3C-Validator (validator.w3.org) prüft dein HTML kostenlos gegen den Standard – per URL, Datei-Upload oder Direkteingabe.
Beim Beheben gilt: erste Fehler zuerst, dann neu prüfen – Folgefehler verschwinden oft von selbst.
Die Entwicklerwerkzeuge (Rechtsklick → „Untersuchen“) zeigen den HTML-Baum jeder Seite live – dein Röntgenblick zum Lernen und Prüfen.
Dein Abschlussprojekt vereint alles Gelernte: Grundgerüst, Überschriften, Link, Bild, Liste, Tabelle, Formular und semantische Bereiche.
Der nächste Schritt ist CSS; deine Referenz für alles Weitere sind die MDN Web Docs.

Herzlichen Glückwunsch – du hast den Anfänger-Kurs abgeschlossen! Vom ersten <p> bis zur validierten, semantisch strukturierten Seite mit Formular: Das ist keine Kleinigkeit, sondern ein echtes Fundament. Wenn du weitermachen möchtest, wartet der Fortgeschrittenen-Kurs mit Themen wie vertiefter Semantik, Metadaten und modernen HTML-Features auf dich – und für den schnellen Blick zwischendurch gibt es unseren HTML-Spickzettel. Wir sehen uns dort!

Zur Kursübersicht →