Hypertext Markup Language – einfach erklärt

Grundidee und Bedeutung

HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache zur semantischen Strukturierung elektronischer Dokumente. Sie wurde vor allem für Webseiten im World Wide Web entwickelt. HTML-Dokumente haben meist die Dateiendung .html oder .htm und den MIME-Typ text/html. Webbrowser lesen den Quelltext, deuten seine Auszeichnungen und stellen die Inhalte dar. Dieser Vorgang heißt Parsen; die Aufbereitung für ein Ausgabemedium heißt Rendern.

HTML kann Texte, Überschriften, Hyperlinks, Bilder und weitere Inhalte strukturieren. Außerdem kann ein Dokument Metainformationen enthalten, etwa zur verwendeten Sprache, zum Autor oder zum zusammengefassten Inhalt. HTML beschreibt in erster Linie die Bedeutung und Gliederung der Inhalte, nicht ihr Aussehen. Beispielsweise kennzeichnet <h1> eine Überschrift der höchsten Gliederungsstufe, legt aber weder Schriftgröße noch Schriftart fest. Die Darstellung übernehmen der Browser und insbesondere Cascading Style Sheets (CSS). Dadurch können dieselben Inhalte beispielsweise auf einem Bildschirm, auf Papier, durch eine Sprachausgabe oder in Brailleschrift passend ausgegeben werden.

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. Zur Bearbeitung genügt ein gewöhnlicher Texteditor. Weiterentwickelt wird HTML vom World Wide Web Consortium (W3C) und der Web Hypertext Application Technology Working Group (WHATWG). Laut Artikel war HTML 5.2 vom 14. Dezember 2017 die aktuelle Version; XHTML wird durch HTML5 ersetzt.

Elemente, Tags und Zeichen

HTML strukturiert Text durch Elemente. Die meisten Elemente bestehen aus einem Starttag, einem Inhalt und einem Endtag. Ein Starttag beginnt mit <, enthält den Elementnamen und kann Attribute mit zusätzlichen Angaben besitzen. Das zugehörige Endtag beginnt mit </. Im Beispiel <p>Ein <em>betontes</em> Wort.</p> kennzeichnet p einen Absatz und em einen betonten Text. Elemente können nach festgelegten Regeln ineinander verschachtelt werden.

Attribute stehen im Starttag, beispielsweise class="warning" oder id="warning". Einige Elemente sind inhaltsleer, darunter br für einen Zeilenumbruch und img für ein Bild. Beim Bildtag bezeichnet src die Bildquelle; alt enthält einen Ersatztext. Nach den älteren SGML-Regeln darf bei manchen Elementen ein Endtag fehlen, etwa bei p oder li. Bei HTML spielt außerdem die Groß- und Kleinschreibung von Element- und Attributnamen keine Rolle. XHTML verwendet strengere Regeln.

HTML soll Inhalte beschreibend auszeichnen: h1 bedeutet Überschrift, p bedeutet Absatz und em bedeutet Betonung. Präsentationsbezogene Elemente und Attribute wie font, u und noshade gelten als veraltet und sollen nicht mehr für neue Inhalte verwendet werden.

Der Zeichenvorrat beruhte ursprünglich auf 7-Bit-ASCII, wurde aber früh durch HTML-Entitäten für Sonderzeichen erweitert. Heute ermöglichen Unicode und UTF die Darstellung der Zeichen gebräuchlicher Sprachen. Die Zeichenkodierung wird im Dokumentkopf durch ein Meta-Element angegeben. Ein Ä kann laut Artikel als HTML-Entität ä, dezimal als ä oder hexadezimal als ä codiert werden. In URLs gilt eine andere Codierung: Ein Leerzeichen kann beispielsweise als %20 erscheinen.

Aufbau eines Dokuments

Ein HTML-Dokument besitzt drei grundlegende Bereiche:

• Die Dokumenttypdeklaration steht am Dateianfang und gibt den verwendeten Dokumenttyp an. Bei HTML5 lautet sie <!DOCTYPE html>.

• Der HTML-Kopf, head, enthält vor allem technische und dokumentarische Informationen, die gewöhnlich nicht im Anzeigebereich erscheinen.

• Der HTML-Körper, body, enthält die eigentlichen, normalerweise sichtbaren Seiteninhalte.

Im Kopf bezeichnet title den Seitentitel, meta enthält Metadaten und base legt eine Basis-URI oder einen Basisframe fest. link beschreibt Beziehungen zu anderen Ressourcen und bindet häufig Stylesheets ein. script bindet JavaScript ein, während style Stilinformationen wie CSS-Deklarationen direkt enthält. object diente der Einbindung externer Dateien, ist aber ab HTML5 im Dokumentkopf nicht mehr erlaubt.

Im Körper unterscheidet HTML Block- und Inline-Elemente. Block-Elemente erzeugen grundsätzlich einen eigenen Inhaltsblock; Inline-Elemente unterbrechen den Textfluss nicht. CSS kann dieses Darstellungsverhalten verändern und Elemente auch als inline-block darstellen.

Überschriften werden mit h1 bis h6 ausgezeichnet; h1 ist die höchste, h6 die sechste Gliederungsstufe. Ein Hyperlink entsteht beispielsweise mit <a href="http://example.com/">Dies ist ein Verweis auf example.com</a>. Das a-Element ist ein Inline-Element. Absätze werden mit p markiert. strong kennzeichnet stark hervorgehobenen, em betonten Text; Browser stellen diese Elemente standardmäßig meist fett beziehungsweise kursiv dar. Entscheidend bleibt jedoch ihre inhaltliche Bedeutung, nicht diese voreingestellte Darstellung.

Versionen und Varianten

Tim Berners-Lee schlug HTML erstmals am 13. März 1989 am CERN in Genf vor. Die erste Spezifikation erschien am 3. November 1992 und war vor allem auf Text ausgerichtet. Die Fassung vom 30. April 1993 ergänzte unter anderem Bildintegration. HTML+ vom November 1993 blieb ein nicht verabschiedeter Erweiterungsentwurf.

HTML 2.0 wurde im November 1995 durch RFC 1866 definiert und führte unter anderem Formulare ein; sein Status ist heute „HISTORIC“. HTML 3.0 erschien nicht. HTML 3.2 vom 14. Januar 1997 ergänzte unter anderem Tabellen, Textfluss um Bilder und Applets. HTML 4.0 vom 18. Dezember 1997 führte Stylesheets, Skripte und Frames sowie die Varianten Strict, Transitional und Frameset ein; am 24. April 1998 folgte eine leicht korrigierte Fassung. HTML 4.01 vom 24. Dezember 1999 ersetzte HTML 4.0 und blieb bis 2014 lange der Standard.

XHTML 1.0 vom 26. Januar 2000 formulierte HTML 4.01 mithilfe von XML neu; am 1. August 2002 erschien eine Überarbeitung. XHTML 1.1 vom 31. Mai 2001 war eine strikte, modularisierte Fassung ohne Transitional und Frameset. Die Arbeiten an XHTML 2.0 wurden im Sommer 2009 beendet, weil XHTML durch HTML5 ersetzt werden sollte.

HTML5 wurde am 28. Oktober 2014 empfohlen. Es schuf auf Grundlage von HTML 4.01 und XHTML 1.0 ein neues Vokabular und überarbeitete das Document Object Model (DOM), also die programmierbare Darstellung der Dokumentstruktur. HTML 5.1 folgte am 1. November 2016, HTML 5.2 am 14. Dezember 2017.

Die drei DTD-Varianten von HTML 4 unterschieden sich im Umgang mit älteren Darstellungsmitteln. Strict enthält den Kernbestand und verzichtet weitgehend auf präsentationsbezogene Elemente und Attribute wie font, center, u, bgcolor, align und target; deren Aufgabe übernehmen Stylesheets. Transitional erlaubt zusätzlich ältere Mittel zur physischen Textauszeichnung, damit bestehende Seiten weiterhin standardkonform dargestellt werden können. Frameset umfasst darüber hinaus Elemente zur Erzeugung von Framesets. Eine DTD ist eine Dokumenttypdefinition, die zulässige Elemente und ihre Struktur festlegt. HTML5 besitzt keine DTD mehr.

Gestaltung und dynamische Webseiten

CSS trennt die in HTML beschriebene Struktur von der visuellen Präsentation. Farben, Abstände, Schriften und andere Gestaltungsmerkmale können in einem separaten Stylesheet festgelegt werden. Das erleichtert die Anpassung an verschiedene Ausgabegeräte und an besondere Bedürfnisse, etwa eine Darstellung für sehbehinderte Menschen. Ein externes Stylesheet lässt sich im Dokumentkopf mit <link rel="stylesheet" type="text/css" href="stylesheet.css"> einbinden; CSS kann aber auch direkt in der HTML-Datei stehen. Frühere Gestaltungsmittel wie das font-Element oder Layout-Attribute gelten heute als veraltet.

Dynamisches HTML bezeichnet HTML-Dokumente, deren Inhalte während der Anzeige verändert werden können. Dafür wird vor allem JavaScript eingesetzt. Anfangs entwickelten Browserhersteller wie Microsoft und Netscape unterschiedliche Techniken, was zu erheblichen Kompatibilitätsproblemen führte. Verbreitete JavaScript-fähige Browser unterstützen inzwischen das DOM, sodass browserübergreifende Skripte möglich sind; Unterschiede bei der Unterstützung des Standards bestehen dennoch.

XHTML 1.0 beruht auf HTML 4.01 und folgt den strengeren Syntaxregeln von XML. Seine drei DTD-Varianten sind in ihrer Bedeutung jeweils mit den entsprechenden Varianten von HTML 4.01 identisch. HTML5 vereint Vorteile der früheren SGML- und XML-basierten Ansätze, verwendet aber keine DTD.

Ajax ermöglicht es, mithilfe von JavaScript einzelne Inhalte einer bereits geladenen Webseite gezielt nachzuladen oder zu verändern, ohne die gesamte Seite neu zu laden. Das verringert die übertragene Datenmenge, kann schnellere Antworten des Webservers ermöglichen und erlaubt Bedienabläufe, die denen von Desktop-Anwendungen ähneln.