HTML-Kommentare

Ein HTML-Kommentar ist eine Notiz in Ihrem Markup, die der Browser ignoriert: Er wird nicht auf der Seite gerendert und hat keinen Einfluss auf das Layout. Kommentare existieren ausschließlich für Personen, die den Quellcode lesen und pflegen. Sie helfen Ihnen zu erklären, warum ein Stück Markup existiert, Erinnerungen für später zu hinterlassen und Code vorübergehend zu deaktivieren, ohne ihn zu löschen.

Diese Seite behandelt die Kommentarsyntax, einzeilige und mehrzeilige Kommentare, die Regeln, die einen Kommentar gültig machen (und die Fehler, die ihn ungültig machen), wie man Code beim Debuggen auskommentiert, und die Legacy-Internet-Explorer-Bedingungskommentare, auf die Sie in alten Projekten noch stoßen können.

Syntax

Ein Kommentar wird mit <!-- geöffnet und mit --> geschlossen. Alles zwischen diesen Markierungen wird vom Browser ignoriert:

<!-- This is an HTML comment -->

Sie können einen Kommentar in einer eigenen Zeile platzieren oder nach einem Markup in derselben Zeile:

<p>Total price</p>
<!-- TODO: pull this value from the cart, not hard-coded -->
<p>$42.00</p> <!-- includes tax -->

Das schließende --> ist erforderlich. Wenn Sie es vergessen, behandelt der Browser alles Folgende als Teil des Kommentars, bis er das nächste --> findet (oder das Ende des Dokuments), was im Verborgenen ganze Abschnitte Ihrer Seite versteckt – ein häufiger und verwirrende Fehler.

Warum Kommentare verwenden

• Intent erklären. Code zeigt, was passiert; ein Kommentar kann festhalten, warum. „Warum ist dieses <div> leer?" wird durch eine einzeilige Notiz beantwortet.
• Zusammenarbeit. In einer gemeinsamen Codebasis erklären Kommentare Teammitgliedern, wie ein Abschnitt funktionieren soll.
• TODO / FIXME-Notizen. Unfertige Arbeit oder bekannte Probleme markieren, damit sie später leicht zu finden sind (<!-- TODO: add alt text -->).
• Debugging. Markup vorübergehend verstecken, um ein Problem zu isolieren, ohne den Originalcode zu verlieren.

Einzeilige und mehrzeilige Kommentare

Dieselbe <!-- -->-Syntax funktioniert für eine oder mehrere Zeilen. Ein mehrzeiliger Kommentar erstreckt sich einfach über mehrere Zeilen zwischen den öffnenden und schließenden Markierungen:

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  Everything here is ignored by the browser,
  no matter how many lines it spans.
-->
<p>This paragraph is visible.</p>

HTML hat keine separate Block-Kommentar-Syntax – im Gegensatz zu CSS, das /* ... */ verwendet, oder JavaScript, das // und /* ... */ verwendet. In HTML ist es immer <!-- -->.

Code für das Debugging auskommentieren

Markup in einen Kommentar zu wickeln ist eine schnelle Möglichkeit, es zu deaktivieren, ohne es zu löschen. Dies ist unschätzbar, wenn Sie herausfinden möchten, welches Element ein Problem verursacht:

<h1>The main heading</h1>

<!-- Temporarily disabled while debugging the layout
<aside>
  <p>This sidebar is hidden for now.</p>
</aside>
-->

<a href="https://www.w3docs.com">Homepage</a>

Das <aside> oben wird nicht gerendert, und der Browser baut es nicht einmal im DOM auf. Wenn Sie fertig sind, entfernen Sie <!-- und -->, um den Code zurückzubringen.

Gültige vs. ungültige Kommentare

Ein Kommentar hat einige Regeln. Wenn Sie sie brechen, kann der Browser Ihren Kommentar als Text behandeln oder Markup verschlucken, das Sie behalten wollten.

Kommentare können nicht verschachtelt werden. Das erste --> schließt den Kommentar, sodass das zweite --> als verstreuter Text auf der Seite erscheint:

<!-- outer comment <!-- inner comment --> still inside? -->

Hier endet der Kommentar beim ersten -->. Der übrig gebliebene still inside? --> wird als sichtbarer Text gerendert – fast nie das, was Sie wollten.

Vermeiden Sie -- innerhalb eines Kommentars. Gemäß der HTML-Spezifikation sollte der Text eines Kommentars kein -- enthalten, außer als Teil des schließenden -->. Er darf auch nicht mit > oder -> beginnen. Diese sind gültig:

<!-- A perfectly valid comment -->
<!-- Visit the section "Pricing" below -->

Und diese sind problematisch:

<!-- Don't use a -- double dash inside -->   <!-- the "--" can confuse parsers -->
<!--> Starts with > — invalid -->
<!-- Missing the closing marker     <-- the rest of the page may vanish

Die sicherste Gewohnheit: Öffnen Sie mit <!--, schreiben Sie Ihre Notiz mit einfachen Bindestrichen oder Wörtern, und schließen Sie immer mit -->.

Ausprobieren: HTML-Kommentare in einem vollständigen Dokument

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <h1>The main heading</h1>
    <!-- <p>We want to hide this paragraph temporarily.</p> -->
    <a href="https://www.w3docs.com">Homepage</a>
    <!-- TODO: this link will point to the homepage -->
  </body>
</html>

Der Browser rendert nur die Überschrift und den Link. Die beiden auskommentierten Zeilen erzeugen nichts auf dem Bildschirm, wie die Live-Vorschau unten zeigt.

Bedingungskommentare (Legacy Internet Explorer)

Alte Versionen des Internet Explorer (IE 5 bis IE 9) unterstützten eine spezielle Bedingungskommentar-Syntax. Für alle anderen Browser sah sie wie ein gewöhnlicher Kommentar aus und wurde ignoriert, aber der IE las und führte das Markup darin aus, wenn die Bedingung zutraf:

<!--[if IE]>
  <link rel="stylesheet" href="ie-only.css">
<![endif]-->

<!--[if lt IE 9]>
  <p>You are using an old version of Internet Explorer.</p>
<![endif]-->

Dies war einst eine standardmäßige Methode, um CSS oder Skripte nur an bestimmte IE-Versionen auszuliefern. Bedingungskommentare sind veraltet. Internet Explorer 10 hat die Unterstützung dafür eingestellt, und moderne Browser haben sie nie unterstützt, daher sollten Sie diese Technik in neuem Code nicht verwenden. Sie wird hier nur behandelt, damit Sie sie in Legacy-Projekten erkennen.

Wo Kommentare stehen dürfen und wo nicht

Alle modernen Browser unterstützen HTML-Kommentare und ignorieren deren Inhalt, sodass die Syntax überall dort sicher verwendet werden kann, wo Ihr Markup einer Erklärung bedarf.

Übung