Hypertext Markup Language
Die Hypertext Markup Language (HTML) ist ein Dokumentenformat zur Auszeichnung von Hypertext im World Wide Web und wurde 1989 von Tim Berners-Lee am CERN in Genf festgelegt. Sie basiert auf der Metasprache SGML, die zur Definition von Auszeichnungssprachen verwendet wird. HTML ist also eine Auszeichnungssprache zur Beschreibung von Informationen in Hypertexten. HTML wurde vom World Wide Web Consortium (W3C) weiterentwickelt, ist aber mittlerweile zugunsten von XHTML aufgegeben worden.
Überblick
Hallo Blumi Namensgebend sind die Hypertext-Elemente, die zum Verweis auf andere Textstellen oder auf ein anderes Dokument dienen. Zur Adressierung anderer Dokumente im Internet werden innerhalb des Dokumentes Hyperlinks verwendet. Dies ist die Grundlage für das World Wide Web. Die Programme, die die Struktur des Dokuments interpretieren und als formatierte Webseiten (eventuell mit Interaktionselementen wie Links oder Formularen) darstellen, werden Webbrowser genannt.
Dem Text wird durch Auszeichnung (engl. markup) von Textteilen mit in der Regel paarweisen (öffnenden und schließenden) Tags eine Struktur verliehen. Die jeweils zusammengehörenden Tags bilden zusammen mit dem dazwischenliegenden Text (Inhalt) ein Element. Diese Elemente lassen sich nach Regeln, die in einer Dokumenttypdefinition (DTD) angegeben sind, verschachteln:
<p>Ein Textabsatz, der ein <em>betontes</em> Wort enthält.</p>
Ohne Attribute können einige Tags auch ausgelassen werden (z.B. <html>
/</html>
, <head>
/</head>
, <body>
/</body>
), bei manchen nur der schließende Tag (</p>
). Von dieser Möglichkeit wird sehr selten Gebrauch gemacht. XML erlaubt sie zugunsten anderer Vorteile generell nicht, so dass sie auch in der Definition von XHTML nicht ausgenutzt werden konnten und somit in XHTML-Dokumenten nicht zulässig sind.
Neben Elementen mit Start- und End-Tag gibt es auch leere Elemente, wie etwa Zeilenumbrüche oder Bilder.
Eine Textzeile,<br>die hier fortgesetzt wird.
<img src="E-Mail-Button.jpg" alt="E-Mail" title="Schreiben Sie mir eine E-Mail!">
Es geht in HTML um sogenannte beschreibende, nicht um verfahrens- und darstellungsorientierte Textauszeichnung, auch wenn sich HTML in früheren Versionen dafür verwenden ließ. Das heißt, HTML-Tags sind keine Angaben zur Präsentation, die dem Webbrowser mitteilen, wie er den Text zwischen den Tags visuell zu formatieren hat. Vielmehr sind Tags eine strukturierende Auszeichnung, mit der sich Textbereichen eine Bedeutung zuordnen lässt, z. B.
<h1>...</h1>
für eine Überschrift, <p>...</p>
für einen Textabsatz und <em>...</em>
für betonten Text. Wie diese Bedeutung letztlich dem Benutzer vermittelt wird (im Falle einer Überschrift z. B. durch vergrößerte, fette Schrift), ist zunächst dem Webbrowser überlassen und hängt von der Ausgabe-Umgebung ab. Denn obwohl HTML-Dokumente in der Regel auf Computerbildschirmen dargestellt werden, können sie auch auf anderen Medien ausgeben werden, etwa auf Papier oder mittels Sprachausgabe.
Um auf die Präsentation eines HTML-Dokuments in verschiedenen Medien Einfluss zu nehmen, eignen sich CSS-Formatvorlagen. Daher gelten Elemente und Attribute zur Präsentation wie <font>...</font>
, <b>...</b>
und width
als veraltet und sollten nach allgemeiner Auffassung vermieden werden. Die meisten Elemente und Attribute zur Präsentation wurden in der HTML-4.01-Spezifikation als missbilligt (engl. deprecated) markiert.
Wer diesen sogenannten Quelltext auf Webseiten ansehen möchte, kann dafür in den meisten Browsern die Funktion „Quelltext anzeigen“ oder „show source“ wählen. Der Browser öffnet dann ein neues Fenster und zeigt das HTML-Dokument so, wie er es vom Server empfangen hat.
Sprachtyp
HTML ist keine Seitenbeschreibungssprache wie etwa Postscript, da keine Papier-Seiten beschrieben werden, sondern Text strukturell und logisch ausgezeichnet wird. HTML ist eine Auszeichnungssprache und wird als solche auch nicht programmiert, sondern schlicht geschrieben.
Ein ähnliches Konzept (logische Beschreibung) wie hinter HTML steht hinter dem Satzsystem TeX/LaTeX, das im Unterschied zu HTML jedoch auf die Ausgabe per Drucker auf Papier zielt.
Versionen
- HTML (ohne Versionsnummer, 3. November 1992): Die Urversion, die sich nur an Text orientierte. Weblink
- HTML (ohne Versionsnummer, 30. April 1993): Zu Text kommen neben Attributen wie fette oder kursive Darstellung auch die Bildintegration dazu.
- HTML+ (November 1993) Geplante Erweiterungen, die in spätere Versionen einflossen, aber nie als HTML+ verabschiedet wurden. Weblink
- HTML 2.0 (November 1995): Die mit RFC 1866 definierte Version führt u.a. Formulartechnik ein. Der Status dieses Standards ist „HISTORIC“. Auch die Vorgänger sind veraltet.
- HTML 3.0: Die Version erscheint nicht, weil sie mit der Einführung des Netscape-Browsers in der Version 3 bereits vor der Veröffentlichung veraltet ist.
- HTML 3.2 (14. Januar 1997): Neu in dieser Version sind zahlreiche Feature wie Tabellen, Textfluss um Bilder, Einbindung von Applets.
- HTML 4.0 (18. Dezember 1997): Mit dieser Version werden auch Stylesheets, Skripte und Frames eingeführt. Auch eine Trennung in Strict, Frameset und Transitional erfolgt. Am 24. April 1998 erscheint eine leicht korrigierte Version dieses Standards.
- HTML 4.01 (24. Dezember 1999): Ersetzt HTML 4.0 mit vielen, kleineren Korrekturen. Es ist die letzte HTML-Version.
- XHTML 1.0 (26. Januar 2000): Eine Neuformulierung von HTML 4.01 mit Hilfe von XML. Am 1. August 2002 erscheint eine überarbeitete Version.
- XHTML 1.1 (31. Mai 2001): Nachdem XHTML in Module aufgeteilt wurde, wird mit XHTML 1.1 eine strikte Version definiert, bei der die mit HTML 4 eingeführten Varianten Frameset und Transitional entfallen.
- XHTML 2.0 (öffentlicher Entwurf): Diese Version basiert nicht mehr auf HTML 4.01 und führt einige neue Tags ein, so z.B.
<nl>
für Navigationslisten. Die Trennung von Auszeichnung und Stil soll in dieser Version vollendet werden
HTML-Struktur
Allgemeine Struktur
Ein HTML-Dokument besteht aus drei Bereichen:
- der Dokumenttypdeklaration ganz am Anfang der Datei, die die verwendete DTD angibt, z. B. HTML 4.01 Strict,
- dem HTML-Kopf (
HEAD
), der hauptsächlich technische oder dokumentarische Informationen enthält, die nicht direkt im Browser sichtbar sind und - dem HTML-Körper (
BODY
), der anzuzeigende Informationen enthält.
Somit sieht die Grundstruktur einer Webseite wie folgt aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel der Webseite</title> <!-- Evtl. weitere Kopfinformationen --> </head> <body> Inhalt der Webseite </body> </html>
HTML-Kopf
Im Kopf können sieben verschiedene Elemente angewandt werden:
title
bezeichnet den Titel der Seite, der im Browserfenster sowie oft in Suchmaschinen angezeigt wird.meta
kann vielfältige Metadaten enthalten. Siehe Meta-Tags.base
gibt entweder eine Basis-URI an oder einen Basisframe.link
dient zur Angabe von logischen Beziehungen zu anderen Ressourcen. Am häufigsten zur Einbindung von Stylesheets benutzt.script
bindet Code in einer bestimmten Skriptsprache ein, hauptsächlich JavaScript.style
enthält Stylesheet-Code, hauptsächlich CSS-Regeln.object
bindet eine externe Datei ein. Browser dürfen solche Objekte im Dokumentkopf nicht darstellen.
HTML-Körper
Im Wesentlichen unterscheidet HTML zwischen Block- und Inline-Elementen. Der wesentliche Unterschied ist, dass erstere in der Ausgabe einen eigenen Block erzeugen, in dem der Inhalt untergebracht wird, während die Inline-Elemente den Textfluss nicht unterbrechen. Zu den Block-Elementen gehören z.B. die Überschriften und die Tabellen.
Eine Hauptüberschrift wird so ausgezeichnet:
<h1>Hauptüberschrift</h1>
h1
steht für Heading 1.
Der Inhalt zwischen den beiden Tags wird nun als Hauptüberschrift interpretiert. Weiter möglich sind h2
bis h6
, Überschriften zweiter bis sechster Ordnung, mit denen sich die Gliederung einer Seite verdeutlichen lässt. Die Präsentation dieser Überschriften ist von ihrer strukturierenden Bedeutung unabhängig und kann mit CSS beeinflusst werden. Die Zweckentfremdung der Überschrift-Elemente zur Vergrößerung von Text wird allgemein als Missbrauch angesehen.
Hyperlinks: Hyperlinks sind Verweise auf andere Dateien, meistens ebenfalls HTML-Dateien, die üblicherweise im Browser durch Klick verfolgt werden können.
<a href="http://www.example.com/">Gehe zu example.com</a>
Hier wird auf die Ressource http://www.example.com/ verwiesen. Der Text Gehe zu example.com wird dabei als Link dargestellt.
Zur Logik stehen zum Beispiel die Elemente strong
und em
bereit, mit denen sich stark hervorgehobener oder betonter Text auszeichnen lässt. Gängigerweise werden strong
-Elemente durch Fettschrift und em
-Elemente durch kursive Schrift visuell kenntlich gemacht.
Die logische Beschreibung der Struktur des Textes, wie sie die obigen Beispielen veranschaulichen, vereinfacht es zum Beispiel, dass der Text auch einem Sehbehinderten vorgelesen oder als Braille ausgegeben werden kann, und ermöglicht Suchmaschinen die Auswertung der Texte unter Berücksichtigung ihrer Bedeutung.
HTML-Varianten
Beim Entwurf der letzten HTML-Version 4 sollte der Tatsache, dass in vielen HTML-Dokumenten noch Elemente und Attribute zur Präsentation eingesetzt werden, Rechnung getragen, aber auch eine stilistisch saubere Dokumenttypdefinition angeboten werden. Das Ergebnis waren schließlich drei Varianten:
Strict
Diese DTD umfasst den Kernbestand an Elementen und Attributen. Es fehlen die meisten Elemente und Attribute zur Beeinflussung der Präsentation, unter anderem die Elemente font
, center
und u
sowie Attribute wie bgcolor
, align
und target
. Deren Rolle sollen in Strict-Dokumenten Stylesheets übernehmen. Text und nicht-blockbildende Elemente innerhalb der Elemente body
, form
, blockquote
und noscript
müssen sich grundsätzlich innerhalb eines Container-Elements befinden, zum Beispiel in einem p
-Element.
Transitional
Die Transitional-Variante enthält noch ältere Elemente und Attribute, die auch physische Textauszeichnung ermöglichen. Durch diese DTD soll auch Webautoren, die noch nicht logische Strukturierung und Präsentation voneinander trennen, die Möglichkeit gegeben werden, standardkonformes HTML zu schreiben. Gleichzeitig soll sie sicherstellen, dass bestehende Webseiten weiterhin durch aktuelle Webbrowser angezeigt werden können.
Frameset
Diese Variante enthält zusätzlich zu allen Elementen der Transitional-Variante noch die Elemente für die Erzeugung von Framesets.
Zukunft der Varianten
Mit XHTML 1.1, der neuesten Version von HTML, verzichtet das W3-Consortium wieder auf die Unterscheidung und führt lediglich die Strict-Variante als „reine Lehre“ weiter. Dies setzt sich auch im momentan (2005) im Entwicklungsstadium begriffenen XHTML 2.0 fort.
Elemente, die bislang nur in den Varianten Transitional und Frameset vorkamen, werden beinahe alle entfallen. Entsprechende Effekte müssen dann durch CSS, Javascript, XFrames oder andere Methoden erreicht werden, da sie zur logischen Textauszeichnung nicht notwendig sind.
Ein Attribut, das aus der Transitional-Variante voraussichtlich den „Sprung“ in XHTML 2.0 schafft, ist das „value“-Attribut bei nummerierten Listenpunkten, das erlaubt, die Nummer des Listenpunktes selbst festzulegen.
Zusatztechniken und Weiterentwicklungen
Stylesheets
Im Laufe der Jahre ist HTML um Elemente erweitert worden, die sich mit der Gestaltung des Dokuments befassen, was der ursprünglichen Idee der Systemunabhängigkeit entgegen lief. Eine Rückbesinnung auf die Trennung von Inhalt (Struktur) und Layout wurde durch die Definition von CSS vorgenommen. So soll das Aussehen des Dokuments in einer separaten Datei, dem sogenannten Stylesheet, festgelegt werden. Dies verbessert die Anpassungsfähigkeit des Layouts an das jeweilige Ausgabegerät und an spezielle Bedürfnisse der Benutzer, z.B. von Sehbehinderten. Heutzutage ist die CSS-Unterstützung der Browser ausreichend, um damit eine anspruchsvolle Gestaltung zu realisieren.
Dynamisches HTML
Schon sehr früh in der Geschichte von HTML wurden Zusatztechniken erfunden, die es ermöglichen, HTML-Dokumente während der Anzeige im Browser dynamisch zu verändern. Die gebräuchlichste ist JavaScript. Man spricht bei solchen interaktiven Dokumenten von dynamischem HTML. Diese Techniken wurden von verschiedenen Browser-Herstellern, allen voran Microsoft und Netscape, unabhängig voneinander entwickelt. Daher gab es erhebliche Probleme bei der Umsetzung der Techniken zwischen den verschiedenen Browsern. Mittlerweile interpretieren alle verbreiteten JavaScript-fähigen Browser das Document Object Model (DOM). Dadurch ist es möglich, in allen Browsern lauffähige Skripte zu schreiben. Es gibt jedoch noch immer Differenzen bei der Unterstützung des DOM-Standards.
XML
Mittlerweile wurde die letzte Version des HTML-Standards (HTML 4.01) in der Metasprache XML neu formuliert. Das daraus entstandene XHTML 1.0 genügt den im Vergleich zu SGML strengeren syntaktischen Regeln von XML, ist aber in seinen drei DTD-Varianten semantisch mit der jeweils entsprechenden DTD-Variante von HTML 4.01 identisch. Aktuell liegt der XHTML-Standard in der Version 1.1 vor, der eine zusätzliche Modularisierung der Elemente einführt.
Als zukünftiges universelles Format wird zunehmend XML selbst eingesetzt. Dieses arbeitet ebenfalls mit Tags, die jedoch per Dokumenttypdefinition sehr restriktiv eingesetzt werden können. XML ermöglicht somit ein selbstbeschreibendes Datenmodell. Zur Umwandlung von in XML gespeicherten Daten in die entsprechenden Anzeigeformate (z.B. XHTML) kann die Stylesheet-Sprache XSL Transformation verwendet werden.
Falsche Interpretation von Webdokumenten
Die verbreiteten Browser folgen bei der Auswertung von HTML nicht ganz dem Standard. Dies zwingt Webautoren dazu, ihre Dokumente in verschiedenen Browsern zu testen und gegebenenfalls anzupassen. Eine solche Anpassung an die Gegebenheiten auf der Leserseite ist zwar durchaus von Vorteil, aber häufig kommt es zu schwer umgehbaren Fehlinterpretationen. Durch die wohlüberlegte Verwendung von strukturierendem HTML kann immerhin gewährleistet werden, dass ein Webdokument in jedem Fall zumindest grundlegend zugänglich und lesbar ist.
Der am weitesten verbreitete Webbrowser, der Internet Explorer, ist gutmütig und lässt so manchen Fehler durchgehen, hat jedoch insbesondere in CSS-Belangen einige Defizite, welchen Rechnung zu tragen ist. Die Browser mit Gecko-Engine (darunter Mozilla und Mozilla Firefox), Opera, Safari und Konqueror haben hier am wenigsten Probleme, tolerieren Codefehler jedoch weniger.
HTML lernen
SELFHTML ist ein deutschsprachiges und sehr umfangreiches Projekt, das für viele Themen rund um HTML Referenzmaterial bietet.
Die Lektüre einer modernen linearen Einführung (siehe Weblinks) und die Handarbeit direkt in einem Texteditor ist empfehlenswert, um HTML richtig zu verstehen und voll auszunutzen.
Für schnelle Erstellen von Webseiten ohne tiefere HTML-Kenntnis mag der Gebrauch eines so genannten WYSIWYG-Editors zunächst genügen. Diese Editoren produzieren einen HTML-Code, der die optischen Vorstellungen weitestgehend widerspiegelt. Allerdings wird die strukturelle und logische Auszeichnung, die dem Text erst einen echten Mehrwert gibt, dabei vernachlässigt. Diese erfordert ein gutes Verständnis von HTML, das ein WYSIWYG-Editor nicht ersetzen kann. Hinzu kommt, dass diese Editoren gelegentlich ungültiges HTML produzieren, was die Darstellung des Dokuments von der Fehlertoleranz des Webbrowsers abhängig macht. In der professionellen Webgestaltung werden solche HTML-Editoren daher häufig nur als zusätzliches Hilfsmittel benutzt, um etwa das Grundgerüst von Webseiten zu erstellen. Die Feinarbeit erfolgt dann in einem Texteditor direkt am HTML-Code.
Siehe auch
- XHTML
- CSS
- JavaScript, DHTML
- MHTML (MIME HTML)
- Web Accessibility Initiative, Barrierefreies Internet, Divitis
- HTML-Editor
Literatur
- Stefan Mintert (Hrsg.): XHTML, CSS & Co. Die W3C-Spezifikationen für das Web-Publishing. Addison-Wesley, München 2003, ISBN 3-827318-726
- Mark Lubkowitz: Webseiten programmieren und gestalten - HTML, CSS, JavaScript, PHP, Perl, MySQL, SVG und Newsfeeds, mit CD. Galileo Press, Bonn 2004, ISBN 3898425576
Weblinks
- W3 HTML Schule (englisch)
- Einige Notizen zum Ursprung von HTML (englisch)
- Webpräsenz des Standardisierungsgremiums W3C (englisch)
- HTML-Standards: 2.0, 3.2, 4.0, 4.01 (englisch)
- edition W3C.de Die W3C-Spezifikationen in deutscher Übersetzung und Kommentierung
- SELFHTML Ausführliches Tutorial und Dokumentation
- Checkliste für Webstandards
- W3C-Validator zur Überprüfung der syntaktischen Richtigkeit eines HTML-Dokuments (englisch)
- Verschiedene nützliche Testwerkzeuge, Site Check (englisch)