HTML-Stilrichtlinien

Gut strukturierter HTML-Code ist einfacher zu lesen, zu pflegen und zu lernen. Die folgenden Stilregeln helfen dir, sauberen und konsistenten Code zu schreiben.

Einrückung

Verwende 2 oder 4 Leerzeichen zum Einrücken von HTML-Elementen. Dadurch lassen sich Hierarchien visuell besser unterscheiden.

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

Kleinschreibung

Schreibe HTML-Tags und Attribute immer in Kleinbuchstaben. Auch wenn HTML nicht zwischen Groß- und Kleinschreibung unterscheidet, sorgt das für Einheitlichkeit.

Anführungszeichen für Attribute

Verwende immer doppelte Anführungszeichen für Attributwerte. Das ist die am weitesten verbreitete Konvention.

<img src="logo.png" alt="Company Logo">

Reihenfolge der Attribute

Verwende Attribute in einer einheitlichen Reihenfolge (z. B. class, id, src, alt). Das erhöht die Lesbarkeit.

Leerzeilen

Füge Leerzeilen zwischen größeren HTML-Blöcken ein. So werden Inhaltsabschnitte visuell voneinander getrennt.

Benennung von Klassen und IDs

Verwende aussagekräftige, durch Bindestriche getrennte Namen für Klassen und IDs (z. B. 'main-header', 'footer-links').

<div class="main-header">
  <h1>Welcome</h1>
</div>

Kommentare

Verwende Kommentare, um größere Abschnitte zu markieren oder Erklärungen zu geben. Übertreibe es nicht, aber erleichtere die Navigation.

<!-- Start of main section -->
<main>
  ...
</main>

Konsistenz

Die wichtigste Regel: Sei konsequent! Wähle einen Stil und halte dich im gesamten Projekt daran.