Ausführbare HTML-Docs: HTML Kommentar

Q: Wie schreibt man einen Kommentar in HTML?

Beginne ihn mit : . Alles zwischen den beiden Markierungen ignoriert der Browser, auch Tags, deshalb kommentierst du mit derselben Syntax Code aus.

Q: Kann man HTML-Kommentare verschachteln?

Nein. Das erste --> beendet den Kommentar, deshalb wird in c --> der Text c --> auf der Seite angezeigt. Um einen Block auszukommentieren, der einen Kommentar enthält, entferne oder ändere zuerst den inneren Kommentar.

Q: Funktionieren HTML-Kommentare in CSS oder JavaScript?

Nein. In einem -Element nimmst du / ... /, in einem // oder / ... /. Ein HTML-Kommentar in einem Style-Block versteckt die CSS-Regeln darin nicht.

So schreibst du einen Kommentar in HTML

Ein HTML-Kommentar beginnt mit . Der Browser ignoriert alles zwischen den beiden Markierungen, der Text erscheint also nie auf der Seite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Nur die Überschrift und der Absatz werden angezeigt. HTML hat eine einzige Kommentarsyntax, und sie funktioniert für eine Zeile genauso wie für viele Zeilen.

Der Shortcut in VS Code und den meisten Editoren: Markiere ein paar Zeilen und drück Ctrl + / (Cmd + / auf dem Mac). Der Editor fügt die Markierungen für dich ein, und dieselben Tasten entfernen sie wieder.

Code auskommentieren

Weil der Browser Tags in einem Kommentar ignoriert, kannst du Markup zwischen  setzen und es so verstecken, ohne es zu löschen. So testest du am schnellsten eine Seite ohne ein bestimmtes Element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Lösch  in der Zeile mit dem Banner, und es erscheint wieder. Auskommentierter Code wird trotzdem mit der Seite heruntergeladen; wenn du sicher bist, dass du ihn nicht mehr brauchst, lösch ihn also.

Kommentare lassen sich nicht verschachteln

Das erste --> schließt den Kommentar immer. Wenn der Code, den du auskommentierst, schon einen Kommentar enthält, endet der äußere Kommentar zu früh, und der Rest landet auf der Seite. Dieses Beispiel übergibt verschachtelte Kommentare an den Parser des Browsers und zeigt, was am Ende sichtbar ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> wird als Text angezeigt. Bevor du einen großen Block auskommentierst, entferne die Kommentare darin (oder ändere ihr -->, damit es nicht mehr passt).

Noch ein paar Regeln: Ein Kommentar darf nicht mit . Halte also beides aus dem Kommentartext heraus.

Kommentare sind öffentlich

Kommentare sind Teil des HTML, das der Server schickt, also kann jeder Besucher sie über den Seitenquelltext oder die Entwicklertools lesen. Auch ein Skript kann sie auflisten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Beschränke Kommentare auf Notizen zum Code. Alles Private (Passwörter, API-Schlüssel, interne URLs, Kundendaten) darf nie im HTML stehen, ob auskommentiert oder nicht. Build-Tools und Minifier entfernen Kommentare meist aus dem Produktions-HTML, was nebenbei ein paar Bytes spart.

Kommentare in CSS und JavaScript

HTML-Kommentare funktionieren nur in HTML. In <style> und <script> verwendest du die Kommentarsyntax der jeweiligen Sprache:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

Die Überschrift wird blau: CSS ignoriert die Markierungen  selbst und wendet die Regel dazwischen trotzdem an. Nur /* ... */ schaltet CSS ab. Diese Syntax erklärt die Seite zu CSS-Kommentaren.

Bedingte Kommentare

In altem Code steht manchmal . Das waren Anweisungen für Internet Explorer 9 und älter. Jeder aktuelle Browser behandelt sie als normale Kommentare, der Inhalt darin wird also ignoriert, und du kannst den ganzen Block löschen.

Häufige Fehler

Kommentare verschachteln. Das innere --> beendet den äußeren Kommentar. Entferne innere Kommentare, bevor du einen Block auskommentierst.
Geheimnisse in Kommentare schreiben. Kommentare werden an jeden Besucher geschickt.
Ein fehlendes -->. Alles nach <!-- bis zum Dateiende verschwindet, und es sieht aus, als wäre die halbe Seite weg.
 in CSS verwenden. Das schaltet die Regeln nicht ab. Nimm /* */.
// in HTML verwenden. // note wird als Text angezeigt. HTML versteht nur .

Häufig gestellte Fragen

Wie schreibt man einen Kommentar in HTML?

Beginne ihn mit : . Alles zwischen den beiden Markierungen ignoriert der Browser, auch Tags, deshalb kommentierst du mit derselben Syntax Code aus.

Wie schreibe ich einen mehrzeiligen Kommentar in HTML?

HTML hat nur eine Kommentarsyntax, und sie kann sich über beliebig viele Zeilen erstrecken. Setz  hinter die letzte.

Was ist der Shortcut zum Auskommentieren in HTML?

In VS Code und den meisten Code-Editoren markierst du die Zeilen und drückst Ctrl + / (Windows und Linux) oder Cmd + / (Mac). Der Editor setzt die Auswahl zwischen , und dieselben Tasten entfernen sie wieder.

Kann man HTML-Kommentare verschachteln?

Nein. Das erste --> beendet den Kommentar, deshalb wird in  c --> der Text c --> auf der Seite angezeigt. Um einen Block auszukommentieren, der einen Kommentar enthält, entferne oder ändere zuerst den inneren Kommentar.

Können Besucher HTML-Kommentare sehen?

Sie werden nicht angezeigt, aber mit der Seite an den Browser geschickt. Jeder kann sie über den Seitenquelltext oder die Entwicklertools lesen, schreib also nie Passwörter, Schlüssel oder private Notizen hinein.

Funktionieren HTML-Kommentare in CSS oder JavaScript?

Nein. In einem <style>-Element nimmst du /* ... */, in einem <script> // oder /* ... */. Ein HTML-Kommentar in einem Style-Block versteckt die CSS-Regeln darin nicht.

Verwandte Konzepte