HTML (Hypertext Markup Language)

HTML verkörpert die Sprache, die im Internet am häufigsten verwendet wird. Internetseiten übermitteln ihren Inhalt in Form von HTML an Ihren Browser, der die Syntax liest und implementiert. Darüber hinaus enthält HTML Informationen über Stil, Formatierung oder Suchmaschinenoptimierung (SEO).

Warum HTML?

HTML (Hypertext Markup Language) ist eine sogenannte Auszeichnungssprache, die Inhalt und Form digitaler Dokumente bestimmt. Neben HTML gibt es noch andere Auszeichnungssprachen wie XML oder Ajax. Die Auszeichnungssprachen werden ständig weiterentwickelt und auf neuere Versionen aktualisiert. Die erste HTML-Version erschien 1992, nachdem die Auszeichnungssprache drei Jahre zuvor vorgeschlagen worden war.

Bei der Nutzung des Internets wird eine große Anzahl verschiedener Ausgabegeräte verwendet: Die Bildschirme haben keine einheitlichen Abmessungen, und das Browserfenster kann vergrößert oder verkleinert werden. Dennoch sollte eine Website den Inhalt immer so darstellen, dass er leicht zu erkennen ist. Aus diesem Grund ist es nicht ratsam, einzelne Seitenelemente unbedingt zu fixieren. HTML spielt in diesem Zusammenhang eine wichtige Rolle bei der Formatierung von Text oder der Anordnung von Bild- und Videodateien auf einer Internetseite.

Im Allgemeinen vermittelt HTML zwischen der jeweiligen Internetseite und Ihrem Webbrowser. Die Sprache enthält Zeichen, Sonderzeichen, Formatierungen, Links, Metadaten und viele weitere Informationen. Metadaten sind HTML-Komponenten, die Sie in der normalen Ansicht Ihres Browsers nicht sehen können. Dennoch sind sie für die Funktion einer Website hilfreich und tragen z.B. zur Suchmaschinenoptimierung bei.

Die Grundstruktur: HTML-Klammern

HTML verwendet Klammern (wie viele Auszeichnungs- und Programmiersprachen), um die Syntax zu strukturieren. HTML-Klammern folgen dem gleichen Prinzip wie die Klammern im vorigen Satz: Eine öffnende Klammer markiert den Anfang einer Einheit, während eine schließende Klammer das Ende markiert. Im Gegensatz zu normalen Interpunktionszeichen definieren die HTML-Klammern, was genau mit dem Text dazwischen geschieht.

Wenn Sie z.B. einen Teil des Textes unterstreichen wollen, verwenden Sie die Syntax “< u >Text< /u >” (ohne Leerzeichen in den eckigen Klammern). Wenn sich diese Syntax auf einer Webseite befindet, kann Ihr Browser sie lesen und wandelt sie automatisch in ein unterstrichenes Wort um.

HTML wird jedoch nicht nur zur Formatierung von Textteilen innerhalb einer Webseite verwendet. Stattdessen organisiert 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;