HTML/Regeln/Guter HTML-Stil

Aus SELFHTML-Wiki
< HTML‎ | Regeln
Wechseln zu: Navigation, Suche

Diese Seite behandelt Stilfragen zum HTML-Code. Guter Stil im allgemeinen Webdesign betrifft viele Gebiete. Beachten Sie dazu die weiterführenden Links.

Guter HTML-Stil ist keine Geschmacksfrage. Andere Menschen und Prozesse müssen den Code verstehen und ihn debuggen. Auch wenn HTML Ihnen viele Freiheiten gewährt, sind Parser nicht in jedem Fall darauf vorbereitet, diese Freiheiten zu berücksichtigen, und erzeugen fehlerhafte Seiten.

Guter HTML-Stil verzichtet auf experimentelle Features und wendet den weit implementierten Elementevorrat von HTML5 und CSS3 an.

Funktioneller Code[Bearbeiten]

Valider Code[Bearbeiten]

HTML ist nur validierbar, wenn Sie eine Doctype-Angabe verwenden. Wenn Sie einen Doctype spezifizieren, dann validieren Sie Ihr Dokument auch, entweder beim maßgebenden Validator des W3C oder durch ein entsprechendes Browser-Plugin.

Validität ist jedoch kein Selbstzweck. Es kann Gründe geben, weshalb nicht valide Elemente oder Attribute im HTML verwendet werden. Sie sollten diese Gründe aber gut abwägen und dies keinesfalls als Einladung zu Nachlässigkeit auffassen. Wenn Sie Code mit anderen austauschen, sollten Sie diese Gründe kommunizieren. HTML bietet Ihnen dazu Kommentare.

Empfehlung: Erstellen Sie HTML5-Dokumente.
Beispiel: Doctypedeklaration für HTML5
<!doctype html>
Sie können sowohl die mit HTML5 neu hinzugekommenen Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.

Anwendungsübergreifend verständlicher Code[Bearbeiten]

Nicht nur Browser, sondern viele Parser in irgendwelchen Software-Bibliotheken lesen Code und müssen ihn sinnvoll interpretieren.

Tugendhafte Syntax[Bearbeiten]

Semantisch sinnvoller Code[Bearbeiten]

HTML ist eine reine Auszeichnungssprache für Texte, Userinteraktion und dynamische Generierung. Für Formatierung ist CSS zuständig.

Verwenden Sie die in HTML verfügbaren Elemente mit Bedacht.

  • Zwei aufeinanderfolgende Dinge gleicher Art (Menüpunkte, Aufzählungen, Inhaltsverzeichnisse) sind potentiell bereits eine Liste.
  • Beschreibungslisten (dl) gehören zu den oft übersehenen sinnvollen Elementen in HTML.
  • Verwenden Sie das table-Element ausschließlich für tabellarische Daten. Sie können beliebige Daten mittels CSS tabellarisch ausrichten.
  • Vermeiden Sie unnötige Verschachtelungen.
    • Oftmals können Sie unnötige Wrapper-Elemente vermeiden, indem Sie das html- oder body-Element entsprechend stylen.
    • Verwenden Sie semantische Elemente wie article, aside oder footer.
  • Beschriften Sie in Formularen jedes Eingabe-Element mit einem label. Gruppieren Sie, wenn es Ihnen sinnvoll erscheint, Formularabschnitte mittels fieldset und beschriften sie diese mit legend.
  • Verzichten Sie auf Elemente, die reine Verzierung enthalten. Sie können stattdessen CSS-Pseudoelemente wunschgemäß stylen.

Wählen Sie HTML-Elemente nicht danach aus, wie der Inhalt aussehen soll, sondern danach, was der Inhalt für eine Bedeutung hat: Nicht jeder groß und fett auszugebende Text muss zwangsläufig eine Überschrift sein – für ein Motto sollten Sie das p-Element benutzen, für ein Zitat hingegen das blockquote-Element. Mit CSS können Sie dann bestimmen, wie die Inhalte aussehen sollen.

sprechende Klassennamen[Bearbeiten]

Achten Sie bei Klassennamen auf sprechende Namen, die Ihnen auch ein halbes Jahr, nachdem Sie diese erstellt haben, noch signalisieren, welche Bedeutung sie haben. Klassennamen sollten eher den Inhaltstyp referenzieren, statt etwas über die visuelle Erscheinung aussagen (beispielsweise class="servermessage error" statt class="red box").

Von XML entlehnte Tugenden[Bearbeiten]

Wohlgeformte Syntax erleichtert das Lesen und ermöglicht das Verarbeiten als XML:

  • Alle Elementnamen sind klein geschrieben.
  • Alle Attributnamen sind klein geschrieben.
  • Attributwerte sind immer in doppelte Anführungszeichen ("") eingefasst.
  • Elemente, die in HTML auch ohne schließendes Tag notiert werden dürfen (p, th, td, dt, dd, li), werden immer mit schließendem Tag notiert.
Beachten Sie: Da XHTML ein XML-Dialekt ist, sind obenstehende Punkte in XHTML zwingend einzuhalten, während sie in HTML „nur“ zum guten Stil gehören.

Strukturierter Quelltext[Bearbeiten]

Ihr Quelltext ist Gegenstand von Debuggingtools. Manchmal muss Quellcode in Ausschnitten in ein Formular kopiert werden. In Foren möchten andere Ihren Code einsehen um Ihnen zu helfen.

Besonders in der Entwicklungsphase sollten Sie folgende Richtlinien beachten:

  • Entfernen Sie nicht alle Zeilenumbrüche. Zeilen(nummern) sind ein wichtiger Indikator für Fehler-Berichte.
  • Notieren Sie Umbrüche zwischen Hauptabschnitten des Dokuments.
  • Tabulatoren versus Leerzeichen ist seit jeher ein Streitthema. Für und gegen Leerzeichen spricht, dass alle Abstände fest definiert sind. Für und gegen Tabs spricht, dass ihre Weite individuell eingestellt werden/sein kann und bei zu großer Tab-Weite lange Zeilen die „magische Grenze“ von 80 Zeichen pro Zeile überschreiten können sowie Code-Ausrichtungen gestört werden können. Wofür auch immer Sie sich entscheiden, seien Sie konsequent und mischen Sie nicht Leerzeichen und Tabs zur Ausrichtung.
  • Vermeiden Sie insbesondere Tab-Ausrichtungen rechts von einem Nicht-Tab Zeichen, also alle Ausrichtungen jenseits des Zeilenanfangs (auch wenn sie Tabulatoren zur Einrückung des Zeilenanfangs verwenden).

Beachten Sie jedoch, dass Quellcode-Formatierung kein Selbstzweck ist. Bestimmte Inhalte haben ihre eigene Erfordernis nach Whitespace:

  • präformatierter Text
  • als inline formatierte Inhalte.

Performance- und Traffic-Tugenden[Bearbeiten]

  • Vermeiden Sie JavaScript-Code in HTML-Seiten, lagern sie den Code in externe Ressourcen aus (Stichwort: Unobtrusive JavaScript).
  • Binden Sie CSS und JavaScript als externe Ressourcen ein.
  • Vermeiden Sie Inline-CSS, außer bei begründeten Ausnahmen.
  • Vermeiden Sie Eventhandler-Attribute. Minimieren Sie, wenn es nicht anders geht, den Code auf das absolut Notwendige.
  • Optimieren Sie die Zahl der eingebundenen Ressourcen.
  • Binden Sie Scripte als letztes im body-Element ein. Dadurch wird das Dokument dargestellt und gestylt, bevor JS-Aktionen starten.

Allgemeine Tugenden[Bearbeiten]

  • Spezifizieren Sie die Hauptsprache des Dokuments im html-Element mit dem lang-Attribut.
  • Spezifizieren Sie die Zeichenkodierung im head.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]