HTML/Regeln/Guter HTML-Stil

Aus SELFHTML-Wiki
< HTML | Regeln(Weitergeleitet von HTML/Guter HTML-Stil)
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 HTML HTML5 und CSS3 an.

Inhaltsverzeichnis

[Bearbeiten] Funktioneller Code

Valider Code

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.


Beispiel: Doctypedeklaration für HTML5
<!doctype html>
Beispiel: Doctypes für HTML 4.01 strict bzw. XHTML 1.0 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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.


[Bearbeiten] Anwendungsübergreifend verständlicher Code

Nicht nur Browser, sondern viele Parser in irgendwelchen Software-Bibliotheken lesen Code und müssen ihn verstehen. Dabei kann man zwar noch unterscheiden zwischen reinen Parsern, die lediglich ein DOM bereitstellen müssen, und Browsern, die das DOM mit Funktionen und Formatierungen erfüllen. Parser müssen die Syntax verstehen, aber nicht die Funktion jedes Elements kennen.

[Bearbeiten] Tugendhafte Syntax

[Bearbeiten] Semantisch sinnvoller Code

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.
  • 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.

[Bearbeiten] Von XML entlehnte Tugenden

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.

[Bearbeiten] Strukturierter Quelltext

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.

[Bearbeiten] Performance- und Traffic-Tugenden

  • 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.

[Bearbeiten] Allgemeine Tugenden

  • Spezifizieren Sie die Hauptsprache des Dokuments im html-Element.
  • Spezifizieren Sie das Zeichen-Encoding im head.

[Bearbeiten] Weiterführende Links

Guter Stil im Webdesign
Benutzerfreundlichkeit und barrierefreies Webdesign
Guter CSS-Stil
SELFHTML-Blog: mehrteilige HTML5-Serie
Validatoren
http://validator.w3.org/
http://validator.de.selfhtml.org/
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML