Hypertext Markup Language (HTML)

Hier spricht man von einer textbasierten Auszeichnungssprache zur Strukturierung von Inhalten (Texte, Bilder, Hyperlinks, etc…) in Hypertext Dokumenten. HTML-Dokumente bilden die Grundlage des World Wide Web und werden von einem Webbrowser angezeigt. Bei der Erstellung solcher Dokumente werden meist Webdesigner oder Internetagenturen zur Unterstützung gerufen, jedoch versuchen sich mittlerweile immer mehr Privatpersonen an der Erstellung einer Website.

Dateiendung: .html, .htm
Entwickelt von: World Wide Web Consortium
Aktuelle Version: 4.01
Erweitert zu: XHTML, HTML5
Website: www.w3.org/html

Neben den Informationen, welche Webseiten enthalten, bietet ein HTML-Dokument in der Regel auch Meta-Informationen. Diese zusätzlichen Informationen enthalten Angaben beispielsweise zum Autor oder der verwendeten Sprache. Zudem ist es möglich, eine kurze Beschreibung zu hinterlegen oder Keywords einzutragen (SEO).

Die Weiterentwicklung und Standardisierung liegt in der Hand des World Wide Web Consortiums (W3C). Die aktuelle HTML Versionsnummer lautet 5. Parallel zu HTML existiert Extensible Hypertext Markup Language (XHTML).

Entstehung

Die Grundidee brachten Mitarbeiter der Europäischen Organisation für Kernforschung (CERN) und basierte auf dem Gedanken, Forschungsergebnisse auf einfache Art und Weise zwischen ihren Einrichtungen in Frankreich und der Schweiz auszutauschen. Man benötigte also neben einem Übertragungsprotokoll eine einfach zu verstehende Textauszeichnungssprache. Kurze Zeit später (3. November, 1992) erschien HTML in der ersten Spezifikation.

Syntax

Die Struktur erhält HTML von Auszeichnungen (engl. markup) im Text. Meistens besteht ein HTML-Element aus einem Tag-Paar, also einem öffnenden und einem schließenden Tag.

Ein Start-Tag beginnt immer mit einem Kleiner-Als-Zeichen „<“ und endet mit einem Größer-Als-Zeichen „>“. Dazwischen befindet sich der Elementname, wie zB.: „p“ für einen Absatz (engl. paragraph) oder „h1“ für eine Überschrift (engl. Heading – h), der ersten Ordnung (1). Zusätzlich können solche Elemente eine Liste ihrer Attribute enthalten („class=“navigation“), um sie zu einem späteren Zeitpunkt per CSS ansprechen und gestalten zu können.

Der End-Tag entspricht dem Start-Tag, mit einer geringen Abweichung: der Tag beginnt nicht mit „<“ sondern mit einem zusätzlichen Schrägstrich (engl. Slash), um den Abschluss zu signalisieren „</“.

Diese Elemente lassen sich nach Regeln, die in einer Dokumenttypdefinition (DTD) angegeben sind, verschachteln:

<h1>Eine Überschrift 1. Ordnung, welche ein <strong>fett</strong> geschriebenes Wort enthält.</h1>

Es gibt jedoch einige Elemente, bei denen der Endtag fehlen „darf“ (zum Beispiel: </p> oder </li>). Element- und Attributnamen unterstehen in HTML nicht der „Case Sensitivity“ und sind somit nicht an Groß- und Kleinschreibung gebunden (<li>, <LI>, <Li>, <lI>).
In XHTML sind diese Regeln strenger verfasst.

Weiters gibt es sogenannte selbstschließende oder inhaltsleere Elemente, wie Zeilenumbrüche (<br />) oder Bilder (<img src=“image-path“ />).
HTML-Elemente werden nicht für die visuelle Gestaltung verwendet, sondern viel mehr zur eindeutigen Zuordnung eines Textbereichs mit einer Bedeutung.

Zum Beispiel:

<h1>…</h1> für eine Überschrift 1. Ordnung (heading 1)
<p>…</p> für einen Textabsatz (paragraph)
<ul> für den Anfang einer ungeordneten Liste (unordered list)
<li>…</li> für einen Gegenstand dieser ungeordneten Liste (list item)
</ul> für das Ende einer ungeordneten Liste

Wie diese Elemente zunächst visuell erscheinen, liegt in den Händen des verwendeten Webbrowsers und hängt von der Ausgabe-Umgebung ab. Mit sogenannten „Cascading Style Sheets (CSS)“ lassen sich die vorher definierten Elemente wiederum visuell gestalten.

Zum Beispiel:

Im HTML-Dokument steht: <h1>Überschrift</h1>
Im CSS-Dokument steht: h1 { color: #f00; font-size: 20px; }

Ergebnis:

Überschrift

Der vorher definierten Überschrift der 1. Ordnung wurde mittels „color“ eine rote Schriftfarbe im Hexadezimalsystem übergeben (Einleitend: „#“, folgend: RGB-Farbwerte Rot: f (höchster hex-Wert), Grün: 0, Blau: 0) und eine Schriftgröße (Font-Size) von 20 Pixel (px).

Natürlich ist es möglich, visuelle Eigenschaften direkt in HTML-Tags zu übergeben (Inline-CSS).

Zum Beispiel:

<p>Dieser Textabsatz hat ein <u>unterstrichenes</u> Wort.</p>

Diese Methode gilt jedoch als missbilligt (engl. deprecated) und sollte vermieden werden.

HTML beschreibt, wie der Browser bzw. das Ausgabemedium, die Auszeichnungen des Textes zu verstehen hat, jedoch nicht, wie er sie dann in der Darstellung umsetzt. So gibt <h1> zwar an, dass es sich um eine Überschrift handelt, aber nicht, wie diese auszusehen hat (Schriftgröße, Farbe, etc…).

HTML Versionen mit Darstellungsmöglichkeiten

HTML wurde am 13.03.1989 von Tim Berners-Lee festgelegt.
HTML (November 1992): nur Text
HTML (April 1993): Text-Attribute (fett, kursiv, etc…) und Bilder
HTML+ (November 1993): geplante Erweiterungen, die in spätere Versionen einflossen
HTML 2.0 (November 1995): führt u.a. Formulartechnik ein
HTML 3.0: Diese Version erschien nie. Sie galt bereits nach ihrer Veröffentlichung wegen des Netscape-Browsers als veraltet
HTML 3.2 (Januar 1997): Tabellen, Textfluss um Bilder, Einbindung von Applets
HTML 4.0 (Dezember 1997): Stylesheets, Skripte und Frames. Trennung in Strict, Frameset und Transitional. Vier Monate danach erschien eine leicht korrigierte Version
HTML 4.01 (Dezember 1999): neuer Standard mit vielen kleineren Korrekturen
HTML5 (April 2009): Neues Vokabular auf Basis von HTML 4.01 und XHTML 1.0

Allgemeine Struktur

Ein HTML-Dokument besteht aus drei Teilen:

1. Dokumenttypdeklaration (doctype): gibt die verwendete Dokumenttypdefinition (DTD) an
2. Kopf-Bereich (head): enthält technische oder dokumentarische Informationen
3. Körper-Bereich (body): angezeigter Bereich / Inhalt

Zum Beispiel – kleinst mögliches HTML-Dokument mit „Hello World!“ als Inhalt:

<!doctype html>
<html>
<head>
<title>Website Title</title>
</head>
<body>
Hello World!
</body>
</html>

HTML-Kopf (Head)

Der Kopf-Bereich kann bis zu sieben verschiedene Elemente enthalten:

1. title: bezeichnet den Titel der Seite
2. meta: kann Meta-Informationen enthalten, wie Schlüsselwörter oder eine Beschreibung
3. base: Basis-URI / Basisframe
4. link: Angabe von logischen Beziehungen, meist Einbindung von Stylesheet
5. script: Code einer bestimmten Skriptsprache, meist JavaScript
6. style: Stil-Informationen, wie zum Beispiel CSS-Deklarationen
7. object: Einbindung externer Dateien

HTML-Körper (Body)

Man kann bei HTML grob zwischen Block- und Inline-Elementen unterscheiden. Der Unterschied der Beiden liegt darin, dass Block-Elementen eine eigene Zeile zugewiesen werden, Inline-Elemente unterbrechen den Textfluss jedoch nicht. Mittels CSS lassen sich diese Eigenschaften natürlich verändern und es ist demnach möglich, sogenannte Inline-Block-Elemente zu erstellen, welche Eigenschaften von beiden Typen enthalten.

Überschriften in HTML können bis zu sechs Ebenen tief sein, von h1 – h6 (h = heading, engl. Überschrift).

Struktur eines Hyperlinks in HTML:

<a href="https://www.polarismedia.de/">Hyperlink auf www.polarismedia.de</a>

Ein Link ist ein Verweis auf eine andere Ressource, meist eine andere Webseite. Mit ihnen kann man im Web von Seite zu Seite wandern – das sogenannte „surfen“. Wie man sehen kann, gehört ein Link zum Typ der Inline-Elemente.

HTML-Varianten

Seit dem Entwurf der letzten HTML-Version 4, gibt es 3 verschiedene Dokumenttypdefinitions-Varianten:

Strict

Die Strict-DTD beinhaltet den Kernbestand an Elementen und Attributen. Es fehlen jedoch gewisse Elemente und Attribute, wie zum Beispiel font, center, u, bgcolor, align und target, welche mittels CSS ausgeglichen werden können/sollen.

Text und nicht-blockbildende Elemente (innerhalb der Elemente body, form, blockquote und noscript) müssen sich innerhalb eines Container-Elements befinden.

Transitional

Hier sind auch physische Textauszeichnungen möglich. Weiters ermöglicht diese DTD Autoren, standardkonformes HTML zu schreiben und sie soll gleichzeitig sicherstellen, dass bestehende Webseiten weiterhin durch aktuelle Browser angezeigt werden kann.

Frameset

Diese Variante enthält alle Attribute und Elemente der Transitional-Variante. Zusätzlich bietet diese DTD, die Möglichkeit zur Einbindung von Framset-Elementen.

Zusatztechniken und Weiterentwicklungen

Cascading Style Sheets (CSS)

Mit dem Anstieg an Möglichkeiten in HTML, stieg auch die Erwartung der Surfer an Websites. So wurde im Laufe der Zeit vermehrt versucht die Gestaltung des Dokuments positiv zu beeinflussen, was der Idee der Systemunabhängigkeit im Weg stand. Durch die Definition von Cascading Style Sheets (CSS) gelang die Trennung von Struktur und Layout jedoch relativ gut. Das Aussehen des Dokuments wird nun mittels externer CSS-Datei, dem sogenannten Stylesheet, festgelegt. Dies hat eine Verbesserung der Anpassungsfähigkeit des Layouts an das jeweilige Ausgabegerät und an spezielle Bedürfnisse der Benutzer zur Folge. Früher kaum unterstützt, wird CSS mittlerweile von jedem gängigen Browser korrekt erkannt und dargestellt, um sogar anspruchsvolle Gestaltungen realisieren zu können.

Dynamisches HTML

Da die Erwartungen nicht nur im Bereich der Gestaltung, sondern auch im technischen und funktionalen Bereich stiegen, entwickelte man schon sehr früh Zusatztechniken für HTML. Somit war es möglich HTML-Dokumente während der Anzeige im Browser dynamisch zu verändern, die bekannteste Technik hierbei stellt die Skriptsprache JavaScript dar. Solche interaktiven Dokumente werden in der Regel als „dynamisches HTML“ bezeichnet. Verantwortlich für die, voneinander unabhängigen Entwicklungen solcher Techniken sind allen voran Microsoft und Netscape.

Wegen diesen, von einander unabhängigen, Entwicklungen traten jedoch erhebliche Probleme bei der Umsetzung der Techniken im Browser auf. Mittlerweile ist es mittels Document Object Model (DOM) möglich, in allen Browsern lauffähige Skripte zu schreiben.

XML

Aus der in XML neu formulierten HTML 4.01 Version entstand XHTML 1.0, welches zwar strengere Regeln befolgen muss als SGML, jedoch sind seine drei DTD-Varianten identisch mit HTML 4.01.

Ajax (Asynchronous JavaScript and XML)

Mit dieser Technologie lassen sich bereits geladene Website Inhalte dynamisch verändern, ohne die gesamte Seite neu laden zu müssen. Wegen des dadurch geringeren Datenaufkommens wird eine schnellere Webserver-Antwort gewährleistet. Zudem lassen sich so Reaktionsweisen von Desktop-Anwendungen simulieren.

Unterschiedliche Darstellung und Interpretation von HTML-Dokumenten

HTML als Auszeichnungssprache dient zur semantischen Strukturierung von Text, jedoch nicht zur Formatierung dessen. Die Darstellung ist hier willkürlich vom Browser abhängig. Eine Ausnahme bieten hier sogenannte depricated Elemente, also präsentationsbezogene Elemente.