Als Blog leisten wir im Grunde ja keinen Support, handelt es sich jedoch um einen Partner oder ein Mitglied unserer Seite, so kann es doch schon einmal zu Ausnahmen kommen 😉

So geschehen erst kürzlich, und deshalb schreibe ich nun diesen Artikel, um euch fünf meiner Meinung nach typische HTML-Fehler zu erklären, die der W3C Validator beanstandet 🙂

Natürlich sind dies bei weitem nicht alle möglichen Fehler, und vermutlich auch nicht die häufigsten. Ich hoffe jedoch, dass die folgenden Erklärungen euch u.U. helfen können. Für ggf. falsche Wortwahl möchte ich mich schon einmal präventiv entschuldigen 😉

Wer sich erst einmal mit der Syntax von HTML vertraut machen möchte, findet auf webmasterpro.de eine wie ich finde gute Quelle.

  1. Doctype-Fehler:
    Die erste Zeile eines HTML-Dokumentes sollte einen sog. Doctype enthalten, der genau beschreibt, welche Version von (X)HTML man verwendet. Genau wie bei Programmen gibt es auch für (X)HTML unterschiedliche Versionen, denn auch Sprachen des Webs verändern sich ab und zu. Aktuell benutzen die meisten Seiten entweder HTML 4.01 oder XHTML 1.0. Der typische Fehler hierbei ist, dass man das eine im Doctype angibt, aber das andere beim Schreiben verwendet.

    Beispiel für Fehler:
    Man unterscheidet bei (X)HTML grundsätzlich zwischen selbstschließenden Tags und Tags, die man quasi manuell am richtigen Ort wieder schließen muss.
    Das br- oder das img-Tag sind Beispiele für selbstschließende Tags (klar, ein Bild bspw. befindet sich ja an einem gewissen Ort und endet nicht irgendwo anders), das p-Tag (<p>Text</p>, hier wird ein Paragraph, ein Textabschnitt definiert. Dieser kann sich natürlich anders als ein Bild über viele Zeilen erstrecken) für zu schließende Tags.

    In HTML 4.01 werden selbstschließende Tags ganz einfach nicht geschlossen, das br-Tag sieht also wie folgt aus: <br>
    In XHTML 1.0 jedoch werden selbstschließende Tags speziell gekennzeichnet, nämlich statt mit > mit  /> beendet: <br />
    Wichtig ist hierbei auch das Leerzeichen vor dem Slash (/).

     

    Werbung

    Werbeblocker aktiv?

    Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂

     

  2. Bilder brauchen einen Alternativ-Text:
    Es wird oft unterschätzt, doch der Validator von W3C sieht vor, dass jedes Bild einen Alternativ-Text erhält. Dieser wird angezeigt, sobald das Bild nicht (mehr) verfügbar, also z.B. gelöscht, ist. Angegeben werden muss dieser Alternativ-Text als Attribut im img-Tag.

    Beispiel:
    <img src="URL_ZU_EINEM_BILD" alt="Dies ist ein tolles Bild" />

     

  3. style-Tag im body-Tag:
    Auch wenn es in den meisten Browsern funktioniert, dürfen sich laut Validator keine style-Tags (<style></style>) im body-Tag (<body></body>) befinden. Diese gehören ausschließlich in den Kopf-Bereich der Seite, das head-Tag (<head></head>).

     

  4. Das kaufmännische Und / Ampersand / &
    Genau wie die deutschen Umlaute sollte auch das kaufmännische Und (auch Ampersand genannt) speziell kodiert werden. Statt & sollte man also eher &amp; schreiben, genau wie man bei z.B. ä &auml; und ß &szlig; schreiben sollte. Diese Regelung soll u.a. ausländischen Surfern ermögliche, unsere Sonderzeichen zu sehen. Sie sind quasi mit bspw. &auml; international richtig kodiert.

     

  5. Inline-Elemente können Block-Elemente nicht umschließen:
    In (X)HTML unterschiedet man grundsätzlich zwischen Inline-Elementen ("Inline Tags") und Block-Elementen ("Block Tags"). Block-Elemente sind bspw. das h1-, das p- oder das div-Tag. Zu den Inline-Elementen gehören z.B. das a- oder das b-Tag.
    Laut W3C dürfen Inline-Elemente nur in Block-Elementen verwendet werden. Block-Elemente dürfen aber keinesfalls in Inline-Elementen vorkommen.

    Beispiel für einen Fehler:
    <a href="#"><div></div></a>

     

Ich hoffe diese fünf Fehler helfen euch ein wenig beim Validieren 🙂 Viel Erfolg 😉

PS: Ihr versteht einen anderen Fehler nicht? Schreibt ihn mir in die Kommentare 😉 Ich werde die Liste dann erweitern 🙂

Andere Beiträge, die auf diesen Beitrag verlinken

Deine Meinung zu diesem Artikel?


Ein Kommentar zu "Fünf typische Fehler, die dem W3C Validator nicht gefallen" (RSS)

Hier nochmal danke, ich glaub jetzt hab ich es sogar verstanden 😁