HTML (Hypertext Markup Language)

HTML verkörpert die Auszeichnungssprache, die im Internet am weitesten verbreitet ist. Internetseiten übermitteln ihren Inhalt in Form von HTML an Ihren Browser, der die Syntax ausliest und umsetzt. Darüber hinaus enthält HTML Informationen für den Stil, die Formatierung oder die Suchmaschinenoptimierung (SEO).

Warum HTML?

HTML (Hypertext Markup Language) ist eine sogenannte Auszeichnungssprache, die Inhalt und Form von digitalen Dokumenten bestimmt. Neben HTML existieren weitere Auszeichnungssprachen wie XML oder Ajax. Die Auszeichnungssprachen werden stetig weiterentwickelt und auf neuere Versionen aktualisiert. 1992 erschien die erste HTML-Version, nachdem die Markup-Sprache bereits drei Jahre zuvor vorgeschlagen worden war.

Bei der Internetnutzung kommt eine Vielzahl von unterschiedlichen Ausgabegeräten zum Einsatz: Bildschirme besitzen keine einheitlichen Dimensionen und das Browser-Fenster können Sie vergrößern oder verkleinern. Trotzdem sollte eine Internetseite den Inhalt stets so anzeigen, dass er gut zu erkennen ist. Aus diesem Grund ist es nicht sinnvoll, einzelne Seitenelemente absolut zu fixieren. HTML spielt in diesem Zusammenhang eine wichtige Rolle bei der Formatierung von Texten oder bei der Anordnung von Bild- und Videodateien auf einer Internetseite.

Allgemeiner gesprochen vermittelt HTML zwischen der jeweiligen Internetseite und Ihrem Webbrowser. Die Sprache enthält Zeichen, Sonderzeichen, Formatierungen, Verlinkungen, Metadaten und viele weitere Informationen. Metadaten sind HTML-Bestandteile, die Sie in der normalen Ansicht Ihres Browsers nicht sehen. Trotzdem sind sie für die Funktion einer Webseite hilfreich und tragen beispielsweise zur Suchmaschinenoptimierung bei.

Der Grundaufbau: HTML-Klammern

HTML macht sich (wie viele Auszeichnungs- und Programmiersprache) Klammern zunutze, um die Syntax zu strukturieren. HTML-Klammern folgen dabei dem gleichen Prinzip wie die Klammern im vorherigen Satz: Eine sich öffnende Klammer kennzeichnet den Beginn einer Einheit, während eine sich schließende Klammer das Ende markiert. Im Gegensatz zu normalen Satzzeichen definiert die HTML-Klammer, was genau mit dem Text geschieht, der zwischen ihnen steht.

Wenn Sie einen Textteil unterstreichen wollen, nutzen Sie beispielsweise die Syntax „< u >Text< /u >“ (ohne Leerzeichen in den eckigen Klammern). Wenn diese Syntax auf einer Internetseite steht, kann Ihr Browser sie auslesen und wandelt sie automatisch in ein unterstrichenes Wort um.

HTML dient jedoch nicht nur zur Formatierung von Textanteilen innerhalb einer Internetseite. Stattdessen ordnet HTML das gesamte Dokument.

Kopf und Körper von HTML-Dokumenten

Zu Beginn definiert ein virtuelles Dokument dem Browser, welche Auszeichnungssprache es verwendet. Bei HTML5 geschieht dies erst mit der Angabe „< !DOCTYPE html >“ und anschließend mit der Klammer „< html >“ (auch hier und für alle folgenden HTML-Angaben: ohne Leerzeichen zwischen den eckigen Klammern). „< html >“ ist eine Klammer, die sich öffnet und erst ganz am Ende des Dokuments wieder schließt. Wichtig ist dabei, dass Sie die richtige Dokumenttyp-Definition angeben. Versionen vor HTML5 nutzen statt „< !DOCTYPE html>“ eine ausführlichere Definition.

Darauf folgt der Kopf des Dokuments mit der Syntax „< head >“. In den HTML-Kopf gehören Metadaten, Titel der Seite, Skripte und andere Bausteine. Erst nach allen Spezifikationen des Titels schließt sich die Klammer des HTML-Kopfes mit „< /head >“.

Erst dann schreiben Sie den HTML-Körper, der mit „< body >“ markiert wird. Der Körper eines Dokuments macht den Hauptteil einer Internetseite aus. Er bietet Raum für Texte, Bilder, Videodateien und andere Elemente. Nachdem alle gewünschten Inhalte in die Syntax eingefügt sind, schließen Sie den HTML-Körper mit der Klammer „< /body >“.

Den Schluss des digitalen Dokuments bildet die Syntax „< /html >“, die das Ende des HTML-Textes anzeigt.

Häufige HTML-Elemente

(Syntax jeweils ohne Leerzeichen zwischen den eckigen Klammern ODER ohne Leerzeichen nach dem „&“!)

– Titel: < title >Titel der Webseite< /title>
– fetter Text: < b >Text< /b> oder < strong >Text< /strong>
– kursiver Text: < em >Text< /em > oder < i >Text< /i >
– unterstrichener Text: < u > Text< /u >
– Link: Linkbeschreibung< /a >
– Überschrift 1. Ordnung: < h1 >Überschrift< /h1 >
– Überschrift 2. Ordnung: Untergeordnete Überschrift< /h2>
– Absatz: < p >Dieser Text füllt den ganzen Absatz aus.< /p >< p >Dies ist der zweite Absatz.< /p >
– At-Zeichen (@): & #64; oder & commat;
– Pfeil nach rechts: & #8594; oder & rarr;
– Pfeil nach links: & #8592; oder & larr;
– Pfeil nach oben: & #8593; oder & uarr;
– Pfeil nach unten: & #8595; oder & darr
– Herz-Symbol: & #9829; oder & hearts;