Kommentare in HTML und CSS: Das sind die Vorteile

Wer Webseiten entwickelt oder Webdesign lernt, stößt früher oder später auf Kommentare in HTML- und CSS-Dateien. Kommentare gehören zu den unsichtbaren Bestandteilen des Quellcodes und werden vom Browser nicht dargestellt. Trotzdem spielen sie in der Webentwicklung eine wichtige Rolle. Sie helfen dabei, den Code verständlicher zu machen, Bereiche zu strukturieren oder wichtige Hinweise für sich selbst und andere Entwickler zu hinterlassen. Gerade bei größeren Projekten mit vielen Dateien und umfangreichen Stylesheets sorgen Kommentare für Ordnung und Übersicht. Auch wenn man nach mehreren Wochen oder Monaten wieder an einem Projekt arbeitet, können gut platzierte Kommentare enorm hilfreich sein. Wie du Kommentare in HTML und CSS richtig einsetzt, erfährst du in diesem Blogartikel.

Inhaltsverzeichnis

Was sind Kommentare in HTML und CSS?

Kommentare sind spezielle Textbereiche im Quellcode, die nicht ausgeführt oder angezeigt werden. Der Browser ignoriert sie vollständig. Entwickler nutzen Kommentare, um Erklärungen, Notizen oder Strukturhinweise direkt im Code zu hinterlassen.

Das ist besonders praktisch, wenn ein Projekt wächst oder mehrere Personen gemeinsam an einer Website arbeiten. Kommentare helfen dabei, schneller zu verstehen, warum bestimmte Codeabschnitte existieren oder wie einzelne Bereiche funktionieren.

Kommentare in HTML

In HTML werden Kommentare mit einer speziellen Syntax erstellt:

<!-- Das ist ein HTML-Kommentar -->

<!-- Das ist ein HTML-Kommentar -->

Alles, was zwischen  steht, wird vom Browser ignoriert.

Beispiel für einen HTML-Kommentar

<!-- Navigationsbereich -->
<nav>
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

<!-- Navigationsbereich -->
<nav>
  <ul>
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

Der Kommentar „Navigationsbereich“ erscheint nicht auf der Website, hilft aber dabei, den Aufbau des Dokuments schneller zu erkennen.

Wann HTML-Kommentare sinnvoll sind

HTML-Kommentare werden häufig genutzt, um:

Bereiche wie Header, Navigation oder Footer zu markieren
komplexe Strukturen zu erklären
temporäre Hinweise zu hinterlassen
Code vorübergehend auszublenden

Gerade bei langen HTML-Dokumenten kann eine saubere Struktur mit Kommentaren die Arbeit deutlich erleichtern.

HTML-Code vorübergehend deaktivieren

Mit Kommentaren lässt sich auch HTML-Code kurzfristig ausblenden:

<!--
<section>
  <h2>Aktion des Monats</h2>
  <p>Dieser Bereich ist momentan deaktiviert.</p>
</section>
-->

<!--
<section>
  <h2>Aktion des Monats</h2>
  <p>Dieser Bereich ist momentan deaktiviert.</p>
</section>
-->

Der Browser ignoriert den gesamten Bereich, bis der Kommentar wieder entfernt wird.

Das ist praktisch, wenn Inhalte getestet oder vorübergehend deaktiviert werden sollen, ohne den Code komplett zu löschen.

Kommentare in CSS

Auch CSS unterstützt Kommentare. Die Syntax unterscheidet sich jedoch von HTML.

Ein CSS-Kommentar sieht so aus:

/* Das ist ein CSS-Kommentar */

/* Das ist ein CSS-Kommentar */

Alles zwischen /* und */ wird ignoriert.

Beispiel für CSS-Kommentare

/* Hauptnavigation */
nav {
  background-color: #222;
}

/* Links in der Navigation */
nav a {
  color: white;
  text-decoration: none;
}

/* Hauptnavigation */
nav {
  background-color: #222;
}

/* Links in der Navigation */
nav a {
  color: white;
  text-decoration: none;
}

Durch die Kommentare wird sofort klar, welcher Bereich welche Aufgabe hat.

CSS-Dateien besser strukturieren

Besonders in großen CSS-Dateien sind Kommentare nahezu unverzichtbar. Viele Entwickler unterteilen ihre Stylesheets in verschiedene Abschnitte:

/* =========================
   Allgemeine Einstellungen
========================= */

/* =========================
   Header
========================= */

/* =========================
   Navigation
========================= */

/* =========================
   Footer
========================= */

/* =========================
   Allgemeine Einstellungen
========================= */

/* =========================
   Header
========================= */

/* =========================
   Navigation
========================= */

/* =========================
   Footer
========================= */

Dadurch bleibt auch bei mehreren hundert oder tausend Zeilen Code die Übersicht erhalten.

Kommentare als Lernhilfe

Gerade Anfänger profitieren enorm von Kommentaren. Wer HTML und CSS lernt, kann sich wichtige Funktionen oder Zusammenhänge direkt im Code notieren.

Beispiel:

/* display: flex richtet Elemente flexibel aus */
.container {
  display: flex;
}

/* display: flex richtet Elemente flexibel aus */
.container {
  display: flex;
}

Solche Notizen helfen dabei, sich Eigenschaften und Funktionen besser einzuprägen.

Vorsicht bei sensiblen Informationen

Auch wenn Kommentare nicht sichtbar auf der Webseite erscheinen, befinden sie sich weiterhin im Quellcode und können von Besuchern eingesehen werden.

Deshalb solltest du niemals:

Passwörter
Zugangsdaten
API-Keys
interne Sicherheitsinformationen

in Kommentare schreiben.

Alles, was im HTML-, CSS- oder JavaScript-Code steht, kann theoretisch öffentlich sichtbar sein.

HTML- und CSS-Kommentare – Fazit

Kommentare in HTML- und CSS-Dokumenten gehören zu den wichtigsten Werkzeugen für sauberen und verständlichen Code. Sie helfen dabei, Webseiten besser zu strukturieren, komplexe Bereiche zu erklären und Projekte langfristig wartbar zu halten. Besonders bei größeren Websites oder Teamprojekten sorgen Kommentare für deutlich mehr Übersicht. Gleichzeitig sind sie eine wertvolle Lernhilfe für Anfänger, die HTML und CSS Schritt für Schritt verstehen möchten. Wer früh lernt, sinnvoll mit Kommentaren zu arbeiten, entwickelt nicht nur saubereren Code, sondern spart später auch viel Zeit bei der Fehlersuche und Weiterentwicklung von Webseiten.

About
Latest Posts

Sladjan Lazic

Sladjan ist Webdesigner und WordPress-Experte mit dem Schwerpunkt Full Site Editing (FSE). Als Webenthusiast arbeitet er seit 2006 mit HTML und CSS und ab 2016 mit WordPress. Seit 2018 arbeitet er mit WooCommerce und erstellt kleine, minimalistische und responsive Websites sowie kleinere Online-Shops. Seit 2019 ist er Zertifizierter SEM-Manager & Webanalyst (Webmasters Akademie) und seit 2024 Geprüfter Webdesigner (OfG).