Die Kommentarsyntax von
HTML, CSS, JavaScript, VBScript, TCL und VRML

HTML-Kommentare

Zusammenfassung:

Ein Bereich, in dem Kommentare vorkommen können, fängt mit "<!" an und endet mit ">", dazwischen stehen null oder mehr Kommentare oder auch whitespace. Ein Kommentar beginnt und endet mit "--" und enthält selber keine weiteren Vorkommen der Zeichenfolge "--".

Zwischen "<!" und "--" darf sich kein Leerzeichen befinden, während das Vorkommen eines Leerzeichens am Kommentarende legal ist: "-->" und "-- >" sind gleichwertig.

Folgende Notationen sind als Kommentare in HTML demnach (unter anderem) zulässig:
  1. <!-- Kommentar (Ich empfehle ausschließlich diese Art der Kommentierung) -->
  2. <!-- Kommentar ---- Kommentar -->
  3. <!---->
  4. <!------ Kommentar -->
  5. <!>

Die Erklärung:

Viele Leute, die versuchen, Kommentare – also Text, der nur als Erinnerung für den Autor gedacht ist, aber für den Besucher nicht angezeigt werden soll – einzubinden, verwenden eine mangelhafte Syntax, die dazu führen kann, daß der Browser den Kommentar selber anzeigt oder noch schlimmer große Teile der Seite als Kommentar erkennt und dementsprechend nicht anzeigt. Ein Teil der Verwirrung entsteht dadurch, daß es für Kommentare keine eigene HTML-Syntax gibt, sondern die Syntaxregeln von SGML Anwendung finden, die nicht sofort verständlich sind, weil es nur wenige Erklärungen dazu gibt.

Die verbreitete Annahme ist, daß Kommentare mit <!-- anfangen und mit --> enden, ist schlicht falsch.

Ein Kommentar fängt mit "--" an und hört, wie in "-- Das ist ein Kommentar --", auch damit auf. Solche Kommentare können aber nur in einem passenden SGML Kontext auftauchen, der "zufälligerweise" mit <! (SGML-Terminus: MDO) beginnt und mit > (SGML-Terminus: MDC) endet. Dadurch ergibt sich die oft beobachtete Syntax <!-- Kommentar -->.

Folgendes ist allerdings auch völlig legal: <!>. Das ist eine leere "(SGML) markup declaration". Auf "--" in einem Kommentar muß man verzichten, weil es das Kommentarende kennzeichnet. Man kann "--" verwenden, wenn ein weiteres "--" folgt. Die Zahl des Zeichens "-" muß also ein Vielfaches von 4 sein. Es ist zulässig, nach MDO (<!) mehrere Kommentare vor dem MDC (>) einzubinden. Folgendes ist vom Grundsatz her also gültig:

 <!-- Das ist ein Kommentar -- -- und hier noch einer -->

Weil man aber (in der Regel) nicht zählen will, wieviele "--" man verwendet, ist es besser keine "--" innerhalb eines Kommentares zu verwenden. Das kann, wenn JavaScript verwendet wird, zu einem Problem werden (es wird ja empfohlen, JavaScript in HTML auszukommentieren, damit alte Browser es nicht anzeigen), weil "--" regelmäßig als ein Dekrementierungsoperator auftaucht. Ihr solltet euch überlegen, ob ihr das JavaScript daraufhin umschreibt, um diesen Operator zu vermeiden, weil man nicht wissen kann, was dieser mißgeformte Kommentar bewirkt. Verwendet bitte auch keine "Kommentare" wie <!------------------->, weil ihr dort die Übersicht über die "--" verliert.

Nehmt die einfachste Form: <!-- Kommentar -->.

Ein anderes Zeichen, das innerhalb von Kommentaren vermieden werden sollte, ist das "größer als" (>). Es ist innerhalb eines Kommentares zwar zulässig, aber einige Browser verarbeiten Kommentare nicht richtig und nehmen fälschlicherweise an, daß das Zeichen das Kommentarende anzeigt. Das kann zu Problemen führen, wenn > innerhalb eines JavaScript-Programms vorkommt oder ihr zeitweise einen Teil eures Markups aus dem Dokument entfernen wollt, indem ihr diese Passagen einfach auskommentiert.

Eine weitere Form, die man findet, ist --!> als Endsequenz eines Kommentars. Das ist wiederum unkorrekte Syntax; am Ende des Kommentars gibt es kein Ausrufezeichen. Technisch gesehen befindet sich das Ausrufezeichen zwischen dem Kommentarende "--" und dem Ende des SGML-Blocks ">"; sein Effekt ist damit undefiniert. Einige Browser (vielleicht der überwiegende Teil) interpretiert es nach der Intention des Autors, als ein Kommentarende, aber es kann auch einige geben, die es anders interpretieren. Es könnte durchaus sein, daß einfach ein einzelnes Ausrufezeichen erscheint, weswegen ihr das vermeiden solltet. Verwendet das syntaktisch richtige "-->" oder "-- >" als Kommentarende.

Wenn ihr ein Programm benutzt, das den HTML-Code für euch erstellt, z. B. einen WYSIWYG-Editor, solltet ihr einmal einem Kommentar eingeben und anschließend danach suchen, um diesen begutachten. Programmierer sind auch nur Menschen und, einige verstehen diese Kommentarsyntax nicht richtig und geben sie dementsprechend falsch an ihre Nutzer weiter.

Keiner der von mir getesteten Browser kam mit unüblichen, nach SGML aber völlig zulässigen Kommentaren gut zurecht. Bei mißgeformten Kommentaren war das Ergebnis schlicht nicht vorhersagbar.
Ich habe verschiedene (teilweise mißgeformte) Kommentare in verschiedenen Browsern ausgetestet, und nur bei einer Form der Kommentierung war sicher, daß Teile, die auf dem Bildschirm erscheinen sollten, auch erscheinen und die Kommentare selber verborgen bleiben. Und diese Form ist gleichzeitig auch die einfachste: <!-- Kommentar -->.

CSS-Kommentare

CSS-Kommentare beginnen (wie in der Programmiersprache C) mit den Zeichen "/*" und enden mit den Zeichen "*/". Sie können überall zwischen Definitionen auftreten und sollen keinen Einfluß auf die Darstellung haben. Kommentare dürfen nicht verschachtelt werden.

<html>
<head>
<title>Kommentar in CSS</title>
<style type="text/css">
<!-- /* Die Auskommentierung ist optional! */
p {background:#ffffff; /* Schwarze Schrift auf weiß im Fließtext. */ color:#000000}
-->
</head>
<body>Und so weiter ...

Es ist hier falsch, //--> als Kommentarende zu verwenden, denn wir befinden uns nicht in einem Kontext, der als JavaScript interpretiert wird.

JavaScript-Kommentare

Die JavaScript Engine erlaubt, die Zeichenfolge <!-- am Anfang eines Script-Elements und ignoriert alle nachfolgenden Zeichen dieser Zeile. JavaScript interpretiert // als den Anfang eines Kommentares, der bis zum Ende der Zeile reicht. In diesem Kontext ist das // zwingend erforderlich, damit der Browser das "-->" als Kommentarende und nicht als JavaScript interpretiert. Mehrzeilige Kommentare entsprechen der Kommentarsyntax von C: /* Mehrzeiliger Kommentar */.

<script type="text/javascript">
<!-- Ein Kommentar, der bis zum Ende der Zeile gilt
  document.write("foo");
// Kommentar bis zum Zeilenende
  document.write("bar");
/* Eigentlich will ich meinen Quelltext
nicht ganz auskommentieren, aber als Beispiel
ist das gut... */
  document.write("foobar");
//-->
</script>

VBScript-Kommentare

Bei VBScript bewirkt ein einfaches Anführungszeichen ('), daß der Rest der Zeile als Kommentar behandelt wird. Es kann demnach dazu benutzt werden, daß "-->" nicht als VBScript, sondern als Kommentarende und MDC behandelt wird:

<script type="text/vbscript">
<!--
Sub foo()
...
End Sub
' -->
</script>

Tcl- und VRML-Kommentare

Bei Tcl und auch VRML bewirkt das "#", daß der Rest der Zeile als Kommentar behandelt wird:

<script type="text/tcl">
<!-- um den Scriptinhalt vor aelteren Browsern zu verbergen
  proc square {i} {
    document write "The call passed $i to the function.<br>"
    return [expr $i * $i]
  }
  document write "The function returned [square 5]."
# Damit wird das vor aelteren Browsern verborgen. -->
</script>

Einbindung von CSS und Scripts in XHTML und XML

Die Einbindung von CSS und Scripts funktioniert in XHTML und XML anders als in HTML. Der Script-Code selbst sollte nicht mehr mittels der üblichen Kommentare (<!-- -->) vor älteren Browsern "versteckt" werden, weil ein konformer XML-Parser Kommentare komplett entfernen muß – es bliebe schlicht ein leeres <script /> übrig. Im Quelltext sehen Script und CSS jetzt folgendermaßen aus:

<script type="text/javascript"> 
<![CDATA[  
// Hier kommt jetzt das Script hinein.
]]> 
</script>
<style type="text/css">
<![CDATA[
/* Hier kommen jetzt die CSS-Regeln hinein */
]]>
</style>

Alternativ können diese auch in externe Dateien ausgelagert werden:

Als externes JavaScript:

<script src="Script.js" type="text/javascript" />

und als CSS-Datei

<link rel="stylesheet" href="Stylesheet.css" type="text/css" />

Quellen (alle auf Englisch)

Meine Beiträge zu HTML und CSS

Web-Technik und Anleitungen.