mitmario.dev

Abschnitt 1 · Lektion 7

Sonderzeichen

HTML Im Browser 2 Min Lesezeit 3 BeispieleLektion 7 von 8

Im Text soll stehen, dass ein Absatz mit <p> beginnt. Wer das genau so hinschreibt, bekommt keinen Satz mit spitzen Klammern, sondern einen zweiten Absatz. Die Klammern gehören HTML, und wer sie auf der Seite sehen will, muss sie anders schreiben.

Zeichen, die HTML für sich beansprucht

Spitze Klammern anzeigen 
<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 von den Klammern ist auf der Seite nichts zu sehen. Im unteren Absatz steht stattdessen &lt;p&gt;, und dort erscheint auf der Seite, was gemeint war.

Solche Schreibweisen heißen Zeichenreferenzen, auf Englisch „entities“. Sie beginnen mit einem &, tragen einen Namen und enden mit einem Semikolon. Drei davon braucht man ständig:

  • &lt; ist das Kleiner-als-Zeichen, die öffnende spitze Klammer. Das Kürzel kommt von „less than“.
  • &gt; ist das Größer-als-Zeichen, die schließende spitze Klammer, von „greater than“.
  • &amp; ist das kaufmännische Und. Es braucht selbst eine Zeichenreferenz, weil das & ja jede Zeichenreferenz einleitet.

Daneben steht oft das Element code. Es zeichnet ein Stück Code mitten im Fließtext aus, und der Browser setzt es in eine Schrift, in der jedes Zeichen gleich breit ist. So ist auf einen Blick klar, dass die spitzen Klammern zum Beispiel gehören und nicht zum Satz. Mehr dazu in Abschnitt 2.

Das Semikolon

Ohne Semikolon 
<p>Die Kiste kostet 18&euro;.</p>
<p>Die Kiste kostet 18&euro.</p>

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

Der erste Preis steht richtig da, 18 Euro mit Eurozeichen. Beim zweiten fehlt das Semikolon, und auf der Seite steht wörtlich 18&euro.

Die Zeile mit dem Copyright steht dagegen richtig da, obwohl auch dort das Semikolon fehlt. Rund hundert alte Zeichenreferenzen wie &copy, &amp oder &nbsp erkennt der Browser auch ohne, aus Rücksicht auf Seiten aus einer Zeit, in der man es damit nicht so genau nahm. Welche das sind, weiß niemand auswendig. Ich schreibe das Semikolon deshalb immer, dann muss ich über die Ausnahmen nicht nachdenken.

Leerzeichen, Symbole, Umlaute

Zeichen mit Sonderrolle 
<p>Salz &amp; Pfeffer</p>

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

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

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

&nbsp; ist ein geschütztes Leerzeichen. Es sieht aus wie ein normales, aber an dieser Stelle bricht der Browser nie die Zeile um. Das passt zwischen Zahl und Einheit wie bei „10 kg“, in „Dr. Meier“ und überall dort, wo ein Umbruch mitten im Ausdruck albern aussähe. &copy; ist das Copyright-Zeichen, eines von vielen Symbolen mit eigenem Namen.

Umlaute stehen einfach im Text, wie im letzten Absatz des Beispiels. Das geht, weil die Datei in UTF-8 gespeichert ist und das Grundgerüst das mit <meta charset="UTF-8"> sagt. Für ä gäbe es zwar auch &auml;, aber das stammt aus der Zeit vor UTF-8 und macht den Text heute nur schwerer lesbar.

In der Aufgabe kommen ein Tag-Name, ein code und die beiden Klammern in einem Satz zusammen.

Zum Mitnehmen

Die Zeichen <, > und & gehören HTML selbst. Damit sie auf der Seite stehen, schreibt man sie als Zeichenreferenz, also &lt;, &gt; und &amp;, immer mit Semikolon. Umlaute und alles andere stehen direkt im Text.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.