Wikipedia

Hypertext Markup Language

vorherrschende Auszeichnungssprache für die Erstellung von Webseiten
Dies ist eine alte Version dieser Seite, zuletzt bearbeitet am 3. April 2004 um 20:21 Uhr durch Matthäus Wander (Diskussion | Beiträge) (Änderungen von 62.104.221.81 rückgängig gemacht und letzte Version von Nick-less wiederhergestellt). Sie kann sich erheblich von der aktuellen Version unterscheiden.

Die Hypertext Markup Language (HTML) ist ein Dokumentenformat zur Auszeichung von Hypertext im World Wide Web und wurde 1989 von Tim Berners-Lee am CERN in Genf festgelegt. Sie basiert dabei auf der Metasprache SGML, die zur Definition von Auszeichnungssprachen verwendet wird. HTML ist also eine Auszeichnungssprache zur Beschreibung von Informationen in Hypertexten.

Auch wenn sich ältere HTML-Versionen dafür verwenden lassen, geht es in HTML also nicht um die optische Gestaltung eines Textes. Vielmehr lassen sich einzelnen Textbereichen einzelne semantische Funktionen zuordnen (z. B. Überschrift), deren optische Gestaltung hierbei nebensächlich ist und mit CSS festgelegt werden kann. Beispielsweise gibt es ein HTML-Element zur Hervorhebung von Textbereichen. Was ein Webbrowser daraus macht, ist Sache des Webbrowsers, nicht Sache von HTML. Ob ein mit diesem Element ausgezeichneter Textabschnitt vom Webbrowser durch Kursivschrift, Fettschrift oder eine auffällige Farbe realisiert wird. Dies kann mit Hilfe von CSS festgelegt werden.

Mittlerweile wurde die letzte Version des HTML-Standards (HTML 4.01) in der Meta-Sprache 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 (Strict, Transitional und Frameset, siehe unten) 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.

Überblick

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 WWW. Die Programme, die die Struktur und den logischen Aufbau des Dokuments interpretieren und als formatierte Webseiten (eventuell mit Interaktionselementen wie Links oder Formularen) darstellen, werden Webbrowser genannt.

Dem Text wird durch Auszeichnung (engl. mark-up) von Textteilen mit in der Regel paarweisen (öffnenden und schließenden) Tags eine Struktur und Logik verliehen. Die jeweils zusammengehörenden Tags bilden zusammen mit dem Inhalt zwischen den Tags 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>

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!"> (Anmerkungen: zur Übersicht sind die Attribute umbrochen worden, dies ist nicht nötig, aber erlaubt. Ein Zeilenumbruch entspricht im HTML-Quellkode einem Leerzeichen.)

Dabei sind diese Tags keine Präsentations-Befehle (obwohl das in Zeiten von HTML 3.2 so war), die dem interpretierenden Webbrowser mitteilen, er müsse beispielsweise bis zum Auftreten des Endtags alles in Fettschrift setzen, sondern eine strukturgebende oder logische Auszeichnung, deren Repräsentation von der Umgebung abhängig ist. Obwohl HTML-Dokumente in der Regel auf Computerbildschirmen dargestellt werden, kann man sie auch auf anderen Medien ausgeben lassen, etwa auf Papier oder als Sprachausgabe.

Auf die Präsentation in verschiedenen Medien sollte mit HTML kein Einfluss genommen werden, dazu eignet sich CSS vorzüglich. Daher sollten Elemente und Attribute zur Präsentation, wie <i>...</i>, <font>...</font>, width, ... vermieden werden und stattdessen nur solche verwendet werden, die tatsächlich der Textauszeichnung dienen, wie etwa <p>...</p> oder <em>...</em>. Die meisten der Präsentations-Elemente und -Attribute wurden in der HTML4-Spezifikation als missbilligt (engl. deprecated) markiert. <H1>Dies ist eine Überschrift</H1>

In XHTML wurden einige Elemente geändert, damit sie der XML-Syntax entsprechen. Dies betrifft alle leeren Elemente, also solche, die keinen Text umschließen, wie Beispielsweise br oder hr. Diese werden nach den Regeln der Tag-Minimierung geschrieben als <br/> beziehungsweise <hr/>. Da einige ältere Browser jedoch Probleme mit dieser Darstellung haben, sollte zur besseren Abwärtskompatibilität ein zusätzliches Leerzeichen eingefügt werden, und das Element wie folgt geschrieben werden: <br />. Außerdem sind alle Element-Bezeichner sowie Attribut-Bezeichner klein zu schreiben. Leere Attribute (z. B. nowrap) muss ein Wert zugewiesen werden (z. B. nowrap="nowrap"). Text muss immer durch Elementen beschrieben werden und darf nicht lose zwischen den body-Start- und -End-Tags stehen.


HTML-Struktur

Allgemeine Struktur

Ein HTML-Dokument besteht aus drei Bereichen:

  1. der Doctype-Deklaration ganz am Anfang der Datei, die die verwendete DTD angibt, z. B. "HTML 4.01 Strict",
  2. dem HTML-Kopf, der hauptsächlich technische oder dokumentarische Informationen enthält, die nicht direkt im Browser sichtbar sind und
  3. dem HTML-Körper, der anzuzeigende Informationen enthält.

Somit sieht die Grundstruktur einer Website wie folgt aus:

<html>

<head> <title> Titel der Website </title> </head>

<body> INHALT </body>

</html>

HTML-Kopf

Im Kopf können 6 verschiedene Elemente angewandt werden:

  1. title bezeichnet den Titel der Seite, der im Browser fenster, sowie oft in Suchmaschinen angezeigt wird,
  2. meta enthält so genannte Metaangaben (Metatags) und ist weitreichend parametrisierbar,
  3. base gibt entweder eine Basis-URI an oder einen Basisframe und
  4. link dient zur Angabe von logischen Beziehungen zu anderen Ressourcen. Am häufigsten zur Einbindung von Stylesheets benutzt.
  5. script bindet Code in einer bestimmten Skriptsprache ein, hauptsächlich Javascript.
  6. style beinhaltet CSS-Regeln direkt im Dokument.

HTML-Körper

Eine Hauptüberschrift wird so ausgezeichnet:

<h1>Hauptüberschrift</h1>

h1 steht für Heading 1.

Diese Auszeichnung 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. Auf keinen Fall sollte man die Überschrift-Elemente zur Vergrößerung von Text missbrauchen. Suchmaschinen-Roboter messen Überschriften eine höhere Relevanz bei als normalem Fließtext.

Hyperlinks:

<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.

Die logische Beschreibung der Struktur des Textes vereinfacht es zum Beispiel, dass der Text auch einem Sehbehinderten vorgelesen oder als Brailleschrift ausgegeben werden kann. Auch für Suchmaschinen ist das von Vorteil, um HTML-Dateien möglichst sinnentnehmend auszuwerten.

Zur Logik stehen zum Beispiel die Elemente strong und em bereit, mit denen sich stark hervorgehobener oder betonter Text auszeichnen lässt. Zur visuellen Kenntlichmachung empfiehlt sich die Verwendung der beiden CSS-Regeln

strong { font-weight: bold }
em { font-style: italic }

die für den Inhalt von strong-Elementen und em-Elementen die Präsentation in Fettschrift bzw. Kursiv-Schrift empfehlen.

DTD-Varianten

Beim Entwurf der letzten HTML-Version 4 sollte der Tatsache, dass in viele Webdokumenten noch präsentationsbehaftete Elemente und Attribute eingesetzt werden, Rechnung getragen, aber auch eine stilistisch saubere DTD angeboten werden. Das Ergebnis waren schließlich drei Varianten:

Strict

Diese DTD-Variante war ursprünglich vorgesehen, wurde aber zugunsten der Abwärtskompatibilität fallen gelassen. Es fehlen die meisten Elemente und Attribute zur Beeinflussung der Präsentation (Auszeichnungselemente) und die Syntax muss wohlgeformt sein. Das bedeutet, dass jedes öffnende Element (Tag) ein schließendes Element besitzen muss, die Elementreihenfolge muss beachtet werden und Text muss sich grundsätzlich zwischen zwei Containern befinden. Beispielsweise ist Text, der sich frei zwischen den body-Elementen befindet, nicht mehr erlaubt. Diese Restriktionen waren für die Angleichung an XML notwendig und bilden die Grundlage für XHTML.

Transitional

Die Variante, die noch ältere Elemente und Attribute enthält, die auch physisches Markup ermöglichen. Durch diese DTD soll auch Webautoren, die noch nicht auf Trennung von Textauszeichnung und Präsentation umgestellt haben, die Möglichkeit gegeben werden, standardkonformes HTML zu schreiben und soll sicherstellen, dass bestehende nicht standardkonforme Webseiten weitherhin 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. Bei der Verwendung sollte man sich aber an der Strict-Variante orientieren.

Falsche Interpretation von Webdokumenten

Selbige war und ist ein Ärgernis für Webautoren. Auch wenn man standardkonformes HTML schreibt, ist noch lange nicht gewährleistet, dass die entstandenen Webdokumente in den gängigen grafischen Webbrowsern richtig dargestellt werden. Hierbei ist zwar zu beachten, dass eine Anpassung von HTML-Dokumenten an die Gegebenheiten auf der Leserseite durchaus von Vorteil und auch gewollt ist, aber häufig kommt es auch zu wirklichen Falsch-Interpretationen. Durch die ausschließliche und wohlüberlegte Verwendung von strukturierendem und logischem HTML kann in gewisser Hinsicht gewährleistet werden, dass ein Webdokument unter allen Umständen wenigstens zugänglich und nutzbar ist.

Wer aber auf eine bestimmte Präsentation seiner Inhalte Wert legt, wird finden, dass es oft noch an der CSS-Interpretation scheitert. Gerade der am weitesten verbreitete Webbrowser, der (Internet Explorer) ist zwar sehr gutmütig und lässt so manchen Fehler durchgehen, hat aber in CSS-Belangen einige Defizite, welchen Rechnung zu tragen ist. Die Neuentwicklungen aus der Gecko-Engine (Mozilla, Mozilla Firefox, Netscape, ...), der KHTML-Engine (Konqueror, Safari) sowie aus dem Hause Opera haben hier am wenigsten Probleme, sind aber auch weniger fehlertolerant.

Wenn einem Webautor also wichtig ist, dass Webdokumente zumindest in den gängigen grafischen Webbrowsern konsistent dargestellt werden, kommt nicht umhin, seine Erzeugnisse in diesen ausgiebig zu testen.

Sprachtyp

Im Gegensatz zu Java oder C ist HTML keine Programmiersprache, auch wenn die Mehrheit der Webbenutzer genau dies annimmt. HTML ist wegen fehlender Elemente wie Wenn-Dann-Bedingungen, Variablen etc. keine Programmiersprache und HTML ist auch keine Seitenbeschreibungssprache wie etwa Postscript weil eben keine Seiten beschrieben werden, sondern Text strukturell und logisch ausgezeichnet wird. Daher ist HTML eine Textauszeichnungssprache und wird als solche auch nicht programmiert, gescriptet, gecodet oder gar geproggt. HTML wird schlicht geschrieben.

Ein ähnliches Konzept (logische Beschreibung) wie hinter HTML steht auch hinter dem Satzsystem TeX/LaTeX, das im Unterschied zu HTML jedoch auf die Ausgabe per Drucker auf Papier zielt.

Weiterentwicklungen

Im Laufe der Jahre ist HTML um Elemente erweitert worden, die sich (fast nur) mit der Gestaltung des Dokuments befassen, was der ursprünglichen Idee der Systemunabhänigkeit entgegen lief.

Dazu gehören die Möglichkeiten Seiten dynamisch zu verändern, z. B. mittels JavaScript. Man spricht dann von DHTML (Dynamic HTML). Da diese Möglichkeiten von den Browser-Herstellern (allen voran Microsoft und Netscape) entwickelt wurden, gibt es erhebliche Probleme mit der Interpretation der Elemente zwischen den verschiedenen Browsern.

Eine Rückbesinnung auf die Trennung von Inhalt (Struktur) und Layout wurde durch die Definition der Cascading Style Sheets (CSS) vorgenommen. So soll das Aussehen des Dokuments in einer separaten Datei (dem sog. Style Sheet) festgelegt werden. Dies ermöglicht es viel besser das Layout an das Ausgabegerät (oder spezielle Bedürfnisse, z.B. von Sehbehinderten) anzupassen. Diese Vorgabe wird allerdings nicht konsequent umgesetzt.

Als zukünftiges universelles Format wird zunehmend XML (eXtensible Markup Langugage), ein selbstbeschreibendes Datenmodell eingesetzt. Dieses arbeitet ebenfalls mit Tags, die jedoch per DTD (Document Type Definition) sehr restriktiv eingesetzt werden können. Zur Umwandlung von in XML gehaltenen Daten in die entsprechenden "Anzeigeformate" kann XSL verwendet werden, eine Style Sheet Sprache zur Transformation z.B. nach XHTML.

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 Arbeiten mag die Arbeit in einem grafischen (so genannten WYSIWYG-Editor) zunächst genügen, allerdings produzieren diese Editoren häufig einen HTML-Code, der die optischen Vorstellungen widerspiegelt. Strukturelle und logische Informationen, die dem Text erst einen echten Mehrwert geben, lassen sich nur einsetzen, wenn man HTML hinreichend gut verstanden hat. Hinzu kommt, dass diese Editoren gelegentlich ungültiges HTML produzieren, was die Darstellung des Dokuments von der Ratekunst des Webbrowsers abhängig macht. Professionelle Webgestalter verwenden visuelle HTML-Editoren daher häufig nur, um das Grundgerüst von Webseiten zu erstellen und optimieren den Code danach manuell.


Referenz-Literatur



Siehe auch: DHTML (Ausdruck für die Kombination von HTML mit JavaScript und CSS), MHTML (MIME HTML) - HTML per mail oder als Archiv mit allen Dateien

Abgerufen von „https://de.wikipedia.org/w/index.php?title=Hypertext_Markup_Language&oldid=1126513“