Kommentare und Sonderzeichen

Zwei Dinge, die im Alltag ständig gebraucht werden und trotzdem selten erklärt sind: Notizen im Quelltext, die auf der Seite nicht auftauchen, und Zeichen, die auf der Seite auftauchen sollen, obwohl HTML sie für sich beansprucht. Beides begegnet dir in diesem Kurs schon länger, jetzt kommt die Erklärung dazu.

01 / 03Notizen im Code

Ein Kommentar beginnt mit <!-- und endet mit -->. Alles dazwischen ignoriert der Browser vollständig:

<!-- Kopfbereich der Seite -->
<h1>Mein Kochblog</h1>

<p>Drei Gerichte, die immer gehen.</p>

<!-- Der Absatz unten kommt später wieder rein
<p>Bald auch mit Bildern.</p>
-->

Auf der Seite siehst du nur die Überschrift und den einen Absatz. Der zweite Absatz steht im Code, ist aber auskommentiert und damit für den Browser nicht vorhanden.

Wofür man das nutzt: Bereiche benennen, damit man sich in einer längeren Datei zurechtfindet. Erklären, warum etwas ungewöhnlich gelöst ist. Und, wie im Beispiel, etwas vorübergehend stilllegen, statt es zu löschen. Genau das begegnet dir in den Aufgaben dieses Kurses: Die Aufgabenstellung steht als Kommentar im Editor und stört den Code nicht.

Zwei Dinge dazu solltest du wissen. Erstens sind Kommentare nicht geheim. Jeder kann sich den Quelltext einer Seite ansehen, damit stehen auch die Kommentare da. Passwörter, interne Notizen über Kunden oder Lästereien über den Chef gehören dort nicht hin. Zweitens lassen sich Kommentare nicht ineinander schachteln: Das erste --> beendet den Kommentar, auch wenn du denkst, du wärst noch mittendrin.

02 / 03Zeichen, die HTML für sich beansprucht

Jetzt der umgekehrte Fall. Angenommen, du willst im Text erklären, dass ein Absatz mit <p> beginnt. Du schreibst es hin, und der Browser macht daraus einen Tag statt Text:

<p>Ein Absatz beginnt mit <p>.</p>

<p>Ein Absatz beginnt mit &lt;p&gt;.</p>

Der obere Absatz geht schief. Der Browser liest das zweite <p> als Beginn eines neuen Absatzes, und du siehst nicht, was du sehen wolltest. Im unteren Absatz steht stattdessen <p>, und der zeigt genau das Gewünschte.

Solche Schreibweisen heißen Entities. Sie beginnen mit einem &, tragen einen Namen und enden mit einem Semikolon. Die drei wichtigsten sind schnell gemerkt:

• < ist das Kleiner-als-Zeichen, also die öffnende spitze Klammer. Das Kürzel steht für „less than“.
• > ist das Größer-als-Zeichen, die schließende spitze Klammer, von „greater than“.
• & ist das kaufmännische Und. Das braucht selbst eine Entity, weil das & ja gerade die Einleitung jeder Entity ist.

Schreib das Semikolon am Ende immer mit. Etliche alte Bekannte wie &lt, &amp oder &copy erkennt der Browser aus Rücksicht auf alte Seiten auch ohne, aber das sind Dutzende Ausnahmen, die niemand auswendig kennt. Bei allem anderen steht ohne Semikolon der Rohtext auf der Seite, samt &.

Ein Element, das dabei oft danebensteht, ist code: Es zeichnet ein Stück Code mitten im Fließtext aus, und der Browser stellt es in einer Schreibmaschinenschrift dar. Damit ist auf den ersten Blick klar, dass die spitzen Klammern zum Beispiel gehören und nicht zum Satz. Mehr dazu in Abschnitt 2.

03 / 03Leerzeichen, Symbole, Umlaute

Es gibt noch ein paar praktische Kandidaten:

<p>Salz &amp; Pfeffer</p>

<p>Das Paket wiegt 10&nbsp;kg.</p>

<p>&copy; 2026 Mein Kochblog</p>

<p>Wir schreiben Grüße, Straße und Öl direkt so.</p>

  ist ein geschütztes Leerzeichen: Es sieht aus wie ein normales, aber der Browser bricht dort nie die Zeile um. Praktisch bei Zahl und Einheit („10 kg“), bei Abkürzungen („Dr. Meier“) oder überall dort, wo ein Umbruch mitten im Ausdruck albern aussieht. © ist das Copyright-Zeichen, eines von vielen Symbolen, die einen eigenen Namen haben.

Und die Umlaute? Die schreibst du einfach direkt hin, so wie im letzten Absatz des Beispiels. Möglich macht das die Zeichenkodierung UTF-8, die du im Grundgerüst mit <meta charset="UTF-8"> festlegst. Fehlt diese Zeile, rät der Browser, und aus „Grüße“ wird „Grüße“. Ausprobieren kannst du das hier nicht, der Browser muss hier nicht raten. In einer eigenen Datei schon. Es gibt zwar auch Entities wie ä für ä, aber die sind ein Überbleibsel aus der Zeit vor UTF-8. Heute macht das den Text nur unleserlich, ohne etwas zu verbessern.

Als Faustregel bleibt: Entities nur für die drei Zeichen, die HTML selbst braucht, und für das geschützte Leerzeichen. Alles andere schreibst du hin, wie du es liest.