Syntax

HTML ist eine von vielen formalen Sprachen, die du kennenlernen wirst: HTML, CSS, SQL, Javascript.

Zeichensatz

HTML-Dateien bestehen aus reinem Text. In unserem Falle entweder aus Text im Format ISO 8859-1 (Latin-1) oder im Format UTF-8. Mit Latin-1 ist man auf das lateinische Alphabet mit westeuropäischen Sonderzeichen beschränkt. Mit UTF-8 hat man den gesamten Zeichensatz der Menschheit zur Verfügung.

So sieht das in PHPStorm und in Visual Studio Code aus: Im HTML Code ist mit dem Tag <meta charset="UTF-8"> angegeben, dass UTF-8 verwendet wird. Und der Editor zeigt an, dass die Datei auch wirklich in diesem Zeichensatz gespeichert ist.

Sonderzeichen

Sonderzeichen in HTML nennt man „character entities“. Sie haben die Form &entityname;

Folgende Character Entities musst du verwenden:

Gewünschtes Zeichen	Character Entity
<	&lt;
>	&gt;
&	&amp;
“	&quot;
‘	&apos;

Historische Sonderzeichen

Auch für Zeichen, die in UTF-8 enthalten sind, gibt es aus historischen Gründen noch Character Entities. Heute muss man sie nicht mehr verwenden, sondern schreibt diese Buchstaben einfach mit dem Editor:

Gewünschtes Zeichen	Character Entity
Ä	Ä
ä	ä
ß	ß
€	€

HTML-Tag

Die mathematischen Zeichen “kleiner” und “größer” werden als Klammer verwendet, die Tags einschließen:

In einer älteren Version von HTML mussten alleinstehende Tags mit einem Schrägstrich am Ende geschrieben werden: <hr />. Heute schreibt man diesen Tag als <hr> oder <hr />.

Anfangs-Tag und End-Tag

Zu den meisten Anfangs-Tags gibt es einen End-Tag, der sich nur durch den Schrägstrich vom Anfangs-Tag unterscheidet. Anfangs-Tag, Inhalt und End-Tag bilden zusammen das Element.

Dazwischen ist der Inhalt. Im einfachsten Fall: der Text, der hier z.B. als Überschrift dargestellt werden soll.

Ein Tag ist jeweils der Teil zwischen < und >, ein Element ist die ganze Einheit aus Anfangs-Tag, Inhalt und End-Tag.

Attribut

Manche Tags enthalten Attribute. Hier ein Beispiel mit einem Attribut:

mehrere Attribute

img Tag

Ein Beispiel ist der Tag <img> der ein Bild in die Seite einfügt. Die wichtigsten Attribute von <img> sind src (von Source = Quelle), alt (Alternative Darstellung, Ersatztext), und loading.

• loading="eager" - das Bild wird auf jeden Fall sofort geladen
• loading="lazy" - das Bild wird erst geladen, wenn es in den sichtbaren Bereich scrollt

<img src="neu.svg" alt="Das ist neu!" loading="lazy">

Schreibweise Attribute

Es ist egal, in welcher Reihenfolge man die Attribute schreibt.

Der Wert eines Attributes wird in Anführungszeichen geschrieben. Wenn man keine Anführungszeichen schreibt, endet der Wert beim nächsten Leerzeichen oder beim Ende des Tags:

<img alt="Das ist neu!" src="neu.svg">

<img
  src=neu.svg
  alt="Das ist Neu!">

Fehler

ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:

  <img alt="Das ist neu!" src="neu.svg>
  Hier wäre noch Text
  <strong>aber er wird jetzt nicht mehr angezeigt!</strong>

Whitespace

Sogenannter “whitespace” - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche hintereinander – wird vom Browser völlig ignoriert. Ob du also in deiner HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügst, macht keinen Unterschied.

Gar kein Leerzeichen oder ein Leerzeichen macht schon einen Unterschied!

Die folgenden beiden Dokumente sind also äquivalent:

Ein Zeilenumbruch

<p>Halli
Hallo</p>

Drei Zeilenumbrüche

<p>
    Halli
    Hallo
</p>

Verschachteln

Fix verschachtelt

Es gibt HTML-Elemente, die nur im Zusammenspiel funktionieren. z.B. eine durchnummerierte Liste braucht das Element ol und das Element li:

Listen

<ol>
    <li>eins</li>
    <li>zwei</li>
    <li>drei</li>
</ol>

Innerhalb von ol kann nichts anderes sein als li. Ein li darf nur direkt in einem ol oder ul stehen.

Frei verschachtelt

In vielen HTML-Tags darf man beliebig Text und andere Tags verschachteln. z.B. innerhalb von h1 oder p:

Verschachtelung

<h1>Überschrift mit <em>Betonung</em></h1>
<p>Absatz Text mit <em>Betonung</em></p>

Siehe Auch

• HTML Living Standard
• Characters, Symbols and the Unicode Miracle YouTube Video von Computerphile
• UTF-8 in der deutschen Wikipedia