HTML/Regeln/Guter HTML-Stil

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

Diese Seite behandelt die Vorteile, die Sie durch die Beachtung von best practice-Regeln beim Erstellen von Webseiten erzielen. Auch wenn Broswer beim Parsen schlecht erstellter Seiten nicht mehr mit einem Absturz reagieren, sollte ein Guter HTML-Stil angestrebt werden, um die Benutzerfreundlichkeit zu erhöhen und Webseiten zugänglich für alle machen.

Valider Code[Bearbeiten]

Ihr HTML-Markup sollte fehlerfrei und gültig (validen) sein, damit es von Browsern und anderen Parsern wie Screenreadern gelesen werden kann. 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.

Beispiel: Doctypedeklaration für HTML5
<!doctype html>
Empfehlung:

Erstellen Sie HTML5-Dokumente.

  • Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
  • Der doctype ist kürzer und übersichtlicher.

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.

Semantisch sinnvoller Code[Bearbeiten]

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

  • Spezifizieren Sie die Hauptsprache des Dokuments im html-Element mit dem lang-Attribut.
  • Spezifizieren Sie das Zeichen-Encoding im head; möglichst in UTF-8.

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.
  • Definitionslisten (dl) gehören zu den oft übersehenen sinnvollen Elementen in HTML.
  • Verwenden Sie das table-Element nur für tabellarische Daten. Sie können beliebige Daten mittels CSS tabellarisch ausrichten.
  • Verwenden Sie in Formularen auch label-Elemente und gruppieren Sie, wenn sinnvoll, Formulareinheiten mittels fieldset und beschriften sie diese Abschnitte mit legend.
  • 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").
  • Vermeiden Sie unnötige Verschachtelungen von div-Elementen. Oftmals können Sie unnötige Wrapper-Elemente vermeiden, indem Sie die html und body-Elemente entsprechend stylen.
  • Verzichten Sie auf Elemente, die reine Verzierung enthalten. Sie können solche Elemente mittels der CSS-Pseudoelemente ::before, ::after und ::outside erzeugen und auf Wunsch stylen.

Setzen Sie HTML-Elemente nicht danach ein, wie der Inhalt aussehen sollen, sondern danach, was der Inhalt vom Sinn her ist: 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.

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

Hauptartikel: HTML/Semantik

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.

Exkurs: SVG[Bearbeiten]

Im Wiki gibt es oft Beispiele von inline-SVG in HTML5-Dokumenten. Hier sind alle SVG-Attribute klein geschrieben. Wenn Sie diese Codebeispiele aber in SVG-Dokumenten verwenden, müssen diese Attribute XML-konform geschrieben werden.

So wird das viewbox-Attribut in einem SVG-Dokument ignoriert, da es das viewBox-Attribut in case-sensitiver Schreibweise erwartet.

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:

Performance-Optimierung[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.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]