HTML-Kurs / Fehler finden und HTML-Dokumente validieren

Die HTML-Validierung hilft, Markup-Fehler zu finden, die ein Browser stumm reparieren kann, wie falsch formatierte Attribute, unerwartete Schließ-Tags oder doppelte IDs. Nachdem die gemeldeten Probleme korrigiert wurden, sollten Sie immer den Inhalt und die tatsächlichen Interaktionen der Seite in einem Browser überprüfen.

Speichern Sie die Seite und prüfen Sie sie zuerst

Speichern Sie die aktuelle HTML-Datei und öffnen Sie sie in einem Browser. Überprüfen Sie, ob Überschriften, Absätze, Links, Bilder und Formulare dort erscheinen, wo Sie es erwarten. Eine sichtbare Seite ist kein Beweis dafür, dass ihre Auszeichnung gültig ist: Browser können bestimmte Fehler korrigieren und ein Ergebnis anzeigen, das von der von Ihnen geplanten Struktur abweicht.

Führen Sie den Nu HTML Checker aus

Der Nu HTML Checker kann eine öffentliche URL, eine hochgeladene Datei oder eingefügtes Markup überprüfen. Für ein lokales oder unveröffentlichtes Dokument verwenden Sie den Datei-Upload oder die direkte Eingabe. Laden Sie keine Quelldateien mit Passwörtern oder persönlichen Daten auf einen öffentlichen Validierungsdienst hoch. Die derzeit validierten Tag- und Attributregeln werden in HTML-Syntax eingeführt.

1. Speichern Sie die neueste Version der HTML-Datei.
2. Wählen Sie die geeignete Eingabemethode aus und beginnen Sie die Überprüfung.
3. Lesen Sie jede Meldung und überprüfen Sie die gemeldete Stelle sowie die umgebenden öffnenden und schließenden Tags.
4. Korrigieren Sie die Datei, speichern Sie sie und starten Sie dann die Überprüfung erneut.

Beginnen Sie mit dem ersten gemeldeten Fehler, wenn mehrere Meldungen angezeigt werden. Ein einziges falsch formatiertes Attribut kann mehrere nachfolgende Meldungen verursachen. Die Zeile, in der ein Fehler erkannt wird, muss nicht diejenige sein, die ihn verursacht hat; ein nicht geschlossenes Anführungszeichen kann beispielsweise dazu führen, dass das nächste Tag als ungültig erscheint. Stellen Sie sicher, dass Sie die gespeicherte Überarbeitung hochladen, anstatt mehrfach eine alte Datei zu validieren.

Zum Beispiel wiederholt dieser Code ein id:

<label for="email">E-Mail</label>

<input id="email" name="email" type="email">

<label for="email">E-Mail bestätigen</label>

<input id="email" name="email_check" type="email">

Ändern Sie die ID des zweiten Feldes in email-check und aktualisieren Sie das for-Attribut der Beschriftung, damit es übereinstimmt. Überprüfen Sie anschließend, dass der Fehler der doppelten ID verschwunden ist und dass jedes Beschriftung den Fokus auf sein eigenes Feld richtet. Das Fehlen eines End-Tags ist nicht immer ein Fehler: Einige Elemente, einschließlich li in bestimmten Kontexten, können gemäß den HTML-Regeln ihr End-Tag weglassen.

Die Überprüfung der vollständigen Beispiele mit dem Nu HTML Checker hat Duplicate ID “email”. für das fehlerhafte Dokument zurückgegeben und keine Fehler für die Korrektur. Vergleichen Sie die Interaktionen der Beschriftungen separat; zusätzliche Diagnosen können mit den Updates des Prüfers oder abhängig vom Inhalt der Dateien variieren.

Vergleichen Sie ein fehlerhaftes Dokument mit seiner Korrektur

Die folgende Validierungsübung wiederholt absichtlich eine ID. Speichern Sie sie unter invalid.html und überprüfen Sie sie mithilfe des Texteingabe- oder Datei-Upload-Modus des Nu HTML Validators. Dies ist ein fehlgeschlagener Testfall und kein direkt einsetzbarer Code.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Übung zur Dokumentenvalidierung</title>
</head>
<body>
  <h1>Übung zur Validierung der Beschriftungen</h1>
  <form method="get">
    <p><label for="email">E-Mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">E-Mail bestätigen</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Eingegebene Werte überprüfen</button>
  </form>
</body>
</html>

Finden Sie die Diagnose zur zweimaligen Verwendung von email als ID. Ein Browser kann immer noch zwei Felder anzeigen, aber die doppelte ID verhindert jedoch eine eindeutige Zuordnung jeder Beschriftung zu ihrem Feld. Das korrigierte Dokument ändert das zweite Feld und das Ziel des Labels zu email-check.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Übung zur Dokumentenvalidierung</title>
</head>
<body>
  <h1>Übung zur Validierung der Beschriftungen</h1>
  <form method="get">
    <p><label for="email">E-Mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">E-Mail bestätigen</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Eingegebene Werte überprüfen</button>
  </form>
</body>
</html>

1. Speichern Sie die Korrektur unter valid.html und validieren Sie die letzte Datei statt der vorherigen Kopie.
2. Klicken Sie auf jede Beschriftung und vergleichen Sie, welches Eingabefeld den Fokus erhält. Wenn Sie eine ID ändern, ohne das Attribut for zu aktualisieren, bleibt die Zuordnung falsch.
3. Nachdem die Diagnose behoben ist, testen Sie immer die Ziele, den Inhalt und die Tastaturnutzung. Speichern Sie die Ergebnisse für Syntax und Benutzerfreundlichkeit separat.

Verwechseln Sie ein absichtlich fehlschlagendes Beispiel nicht mit falscher Formatierung im Artikel selbst. Ein Codeblock kann die Zeichenkette zeigen, die einen Fehler reproduziert; das Validierungsdokument ist das eigenständige Dokument, das aus diesem Beispiel erstellt wurde.

Die Validierung ist nur eine Art der Überprüfung

Ein Syntaxprüfer kann nicht garantieren, dass ein Link zum richtigen Artikel führt, dass der alternative Text ein Bild korrekt beschreibt oder dass ein Server ein Formular korrekt verarbeitet. Öffnen Sie die Links, benutzen Sie die Seite mit einer Tastatur und überprüfen Sie ein schmales Anzeigefenster. Bei fehlenden Medien untersuchen Sie die Pfade, die Serverantworten und die unterstützten Formate sowie die Auszeichnung. Wenden Sie sowohl Syntaxprüfungen als auch echte Navigationstests in Erstellen einer kleinen mehrseitigen Website an.

Wissen Sie, was Sie überprüft haben: ein Datei-Upload prüft die Datei, während eine URL-Überprüfung das Dokument inspiziert, das der Server tatsächlich zurückgibt. Auf WordPress umgibt ein Theme den Artikelkörper, daher kann das Überprüfen eines Manuskriptfragments und das Überprüfen der vollständig veröffentlichten Seite unterschiedliche Ergebnisse liefern. Trennen Sie die Probleme im Artikel von denen, die durch das Theme oder ein Plugin eingeführt wurden.