Zum Inhalt. Zur Navigation.

W3Basis » Inhalt » HTML Glossar

HTML ist keine Raketenwissenschaft

Bevor Sie weiterlesen, darf ich darauf hinweisen, dass diese Seite nicht als Tutorium gedacht ist. Sie ist ein Glossarium und soll als solches nur einen schnellen Überblick über die Bedeutung einiger innerhalb dieser Website verwendeten Begriffe verschaffen.

Akribisch recherchierte und didaktisch sauber strukturierte Online-Tutorien finden Sie bei:

Beide Angebote sind gratis. Wenn Sie ernsthaft in Erwägung ziehen, sich mit dem Thema Webseiten-Erstellung näher zu beschäftigen, dann sollten Sie wenigstens eines dieser Standardwerke durcharbeiten. SelfHTML kann auch als Archiv für den Offline-Einsatz herunter geladen werden.

Hier folgt jetzt nur:

Ein schneller Überblick

HTML
HTML ist die Abkürzung von HyperText Markup Language und bezeichnet jenen Nachkommen der so genannten Structured General Markup Language (SGML), der speziell für die Auszeichnung von Dokumenten im World Wide Web entwickelt wurde.
HTML stellt eine Methode zur Verfügung mit der man durch Einfügung von so genannten Tags in ein Text-Dokument einer aufrufenden Software (Browser) mitteilen kann, wie das Dokument am Bildschirm darzustellen sei.
Mehr gibts im Rahmen dieses Dokumentes nicht dazu zu sagen. Für den wirklich interessierten Leser empfehle ich die oben genannten Tutorials, oder einen Besuch auf den Seiten des World Wide Web Consortium. Reservieren Sie viel Zeit für diesen Besuch. Das Infomationsangebot ist faszinierend und riesig!
Kopfeinträge
Der HTML Standard stellt Kopfeinträge für verschiedene Aufgaben bereit. In der Hauptsache dienen Sie dazu dem aufrufenden Browser einen schnellen Überblick über das nachfolgende Dokument zu geben. Ein minimalistischer Kopfeintrag kann z.B. so aussehen: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8">
<meta name="keywords" content="Jede,Menge,durch,Kommata,
getrennte,Stichworte">
<meta name="description" content="Unglaublich präzise
    komprimierte Wiedergabe des Inhaltes 
Ihrer Website">
<link rel="stylesheet" type="text/css" media="screen" href="ihrstil.css">
<title>Griffiger Titel Ihrer Website</title>
</head>
Jedes wohlgeformte Dokument, das eine Auszeichnungssprache benutzt, sollte ganz oben mit dem so genannten Public Identifier und einem Verweis auf eine Document Type Definition oder kurz DTD beginnen. Dieses Element ist ein wichtiger Bestandteil aller auf SGML basierenden Auszeichnungssprachen, und gehört somit nicht nur zur HTML Syntax.
Der Public Identifier teilt dem Browser mit, welche Auszeichnungssprache und welche Version dieser Auszeichnungssprache im nachfolgenden Dateikörper verwendet wird. Durch den Verweis auf eine DTD gibt man dem Browser die Möglichkeit, im Zweifelsfall dort nachzuschauen. Unser Beispiel verwendet HTML in der "strikten" Variante der Version 4, wie Sie viele moderne Websites verwenden. Mehr zu DTDs.

Mit HTML5 wird sich das alles etwas ändern. Unter anderem kann ein Dokument dann einfach mit <!DOCTYPE html> beginnen. Den Unterschied zwischen HTML Modus und XML Modus möchte hier jetzt nicht näher erläutern. Schlagen Sie beim W3C nach.

Mit dem Tag "content-type" teilt man dem Browser mit, welchem MIME-Type das Dokument entspricht und an welchem Standard-Zeichensatz sich die so genannten Character-Encodings orientieren. Ausführliche Erklärungen dieser Attribute würden den Umfang dieser Site sprengen. Ich habe deshalb Verweise zu entsprechenden Dokumenten in meinem Link-Verzeichnis bereitgestellt.
Die nachfolgenden so genannten Meta-Tags "keywords" und "description" sind im Beispiel selbsterklärend dargestellt.
Der link-Tag dient für Verweise auf einzubindende Dokumente und verweist in unserem Beispiel auf die Addresse einer Formatvorlage, einem so genannten Stylesheet.
Das <title>-Element ist obligatorisch. Seiten ohne dieses Element sind ungültig. Es macht allerdings auch nicht nur deswegen Sinn, seinen Seiten griffige Titel zu geben.

Die meisten Suchmaschinen stellen bei Suchtreffern bis zu 66 Zeichen des <title> dar. Preiswerter kann man nicht werben!

Zum Seitenanfang
Public Identifier - Das seltsame Paarungsverhalten von Browsern und Dokument-Typen
Rein theoretisch kann ein Dokument im Web einfach mit dem Tag <html> beginnen, und die meisten Browser werden es trotzdem irgendwie darstellen. Die Betonung liegt dabei allerdings ganz stark auf irgendwie.
Die Anforderungen an die Browser verlangen nämlich von keiner Anwendung, dass sie innerhalb einer Website Elemente interpretiert, die ihr nicht angekündigt wurden. Ganz im Gegenteil! Die Empfehlung lautet sogar, diese Elemente lieber zu ignorieren, als sie möglicherweise falsch zu interpretieren.
Man kann sich also (hoch theoretisch) bereits in den Fuß schießen, indem man ein Frameset verwendet, nachdem man dem Browser das Dokument als HTML 4.01 Transitional angekündigt hat.
Vom wackeligen zum korrekten Modus in einer Zeile
Viele Browser (darunter alle neueren Internet Explorer) schalten je nach Form des übergebenen Public Identifier in einen unterschiedlichen Interpretations-Modus. Ihre Site wird also mit diesem Public Identifier: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

Ganz anders aussehen, als wenn Sie diesen verwenden: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Bei Verwendung der zweiten Form schalten die meisten Browser in einen so genannten Quirks-Modus und emulieren die fehlerhafte Darstellungsweise des Internet Explorer 5 (Win).
Für eine Website kann das bedeuten, dass alle Elemente mit einer so genannten Kastenform, wie z.B. das Strukturelement <div> mit falschen Bemaßungen wiedergegeben werden. Was das für Ihre sorgsam platzierten Layouts bedeuten kann, dürfen Sie sich selbst vorstellen.
Für vollkommen Unerschrockene hier ein Verweis zu einem Artikel von Henri Sivonen, der sich ausführlich mit dem Umschaltverhalten der Browser beschäftigt und auch umfangreiche Vergleichstabellen enthält.
XHTML - der mißverstandene Ableger
Aus unerfindlichen Gründen hat sich in neuerer Zeit die Verwendung von XHTML Transitional in Kreisen schusseliger Agenturen und Autoren zu einem Modetrend entwickelt. Wegen der dort weit verbreiteten Mischung aus Ahnungslosigkeit und schlechtem Projektmanagement entstehen dann solche ungültigen Mixturen, wie man sie in fast jeder durch eine Agentur produzierten CMS Seite findet.
Die Begeisterung der Agentursklaven für diesen Dokument-Typ ist nicht nachvollziehbar, denn die Unterstützung der Microsoft-Browser für XHTML mit XML-Verarbeitungsanweisung und dem korrekten Mime-Type application/xhtml+xml ist derzeit inexistent.
IE 6 und IE 7 schalten angesichts einer XML-Verarbeitungsanweisung sogar in den Quirks Modus.
Die gängige, plumpe Notlösung besteht darin, XHTML mit MIME-Type text/html und ohne XML-Verarbeitungsanweisung zu servieren.

XHTML, das als text/html und ohne XML-Verarbeitungsanweisung angeboten wird, ist aber eigentlich nur HTML mit einer etwas seltsamen Syntax, und schafft, besonders in schlecht organisierten Projekten, mehr Probleme als es löst. Siehe auch Diesen Artikel von Ian Hickson.

Webseiten sollten also in nächster Zeit eher darauf verzichten. Wer modern und zukunftssicher arbeiten will, sollte HTML 4.01 Strict verwenden, denn das wird auch nach der Einführung von HTML 5 immer noch gültiges HTML sein. XHTML 1.0 ist dagegen noch nicht einmal voll kompatibel mit XHTML 1.1.
Für technisch interessierte Leser gibt es eingehendere Erläuterungen in diesem Artikel von Tina Holmboe, einem Mitglied der XHTML-Arbeitsgruppe des Worldwide Web Consortiums. Der Artikel ist in Englisch.
Die Ausnahme - wo es einen Sinn ergäbe
XHTML erlaubt die Einbindung sogenannter "Namensräume", wodurch man bei der Einbettung bestimmter Anwendungen, wie z.B. Google Maps oder MathML, dem Browser wichtige Mitteilungen übergeben könnte, so er sie denn verstünde.
Das durchschnittliche deutsche Agenturprodukt ist allerdings von solchen modernen Verwendungsweisen der Variante XHTML weit entfernt.
Zum Seitenanfang
Frames
Methode um in einem einzigen Browser-Fenster die Inhalte mehrerer Dateien gleichzeitig anzuzeigen. Meist wird diese Darstellungsmethode dann noch mit einer Navigation verknüpft, die ohne Javascript nicht funktioniert.

Diese Methoden erfreuen sich aus ungutem Grund großer Beliebtheit bei verschlafenen, rückständigen deutschen Internet-Agenturen, die es ja bekanntermassen lieben, die Surfer so richtig schön zu gängeln und zu bevormunden.

Eine der größten Schwächen der Frames ist ihre Undurchsichtigkeit für alle Browser ohne graphische Darstellung, wie z.B. die von blinden Surfern genutzten ScreenReader.
Es geht auch anders
Um Ihnen ein paar Argumente an die Hand zu geben, mit denen Sie sich gegen die Einflüsterungen der Herren mit den schmalen Rodenstockbrillen wehren können, habe ich das Thema Frames einmal etwas ausführlicher behandelt.
Frames - total von gestern.
Zum Seitenanfang
Blindtabellen
HTML stellt mit dem Element <table> ein Werkzeug zur tabellarischen Darstellung von Daten bereit. Seit HTML 3 gibt es die Möglichkeit, die Darstellung des Gitternetzes einer solchen Tabelle zu unterdrücken.
Die kleinen Cleverchen in den Agenturen erkannten sofort, dass ihnen jetzt ein Instrument zur Verfügung stand, mit dem man Layouts so richtig schön in Beton gießen konnte. Über Nacht entstanden tausende von Webseiten, die das <table>-Element als Layout-Werkzeug missbrauchten.
Mittlerweile ist bekannt, wie sehr dieser Missbrauch die Zugänglichkeit und Flexibillität einer Website beeinträchtigt. Totzdem halten die meisten Agenturen unbelehrbar an solchen Layouts fest. Hauptsächlich, weil man dort meist mit Programmen für Hobby-Autoren arbeitet, die kein anderes Layout-Werkzeug kennen.
Die Nachteile der Layouts auf Basis einer Blindtabelle:
  1. Screen-Reader, Spider, Bots und Crawler werden ausgeschlossen. Mit dieser Form des Layouts weist man also Blinden und Suchmaschinen die Tür.
  2. Festgeschriebene Höhe und Breite des Layouts machen die Darstellung und Benutzbarkeit von der Grösse des Bildschirms abhängig.
  3. Die Positionierung von Text und Grafik ist in den Zellen des <table>-Elementes nicht zu 100% beeinflussbar. Deshalb werden durchsichtige GIFs, so genannte spacer zwischen einzelne Einträge gepackt. Diese sind instabil und gehen gerne kaputt. Mögliche Resultate:
    1. Der Internet Explorer (Marktanteil immer noch ca. 50%) und einige andere Browser zeigen dann so einen kaputtes Bild Platzhalter für jedes defekte spacer GIF und die Site sieht aus wie ein Trümmerhaufen.
    2. Manchmal sind die Dinger auch so kaputt, dass der Server keinen Stream erzeugen kann. Der Browser scheint dann stillzustehen, während in der Statuszeile erscheint: "Bild laden "spacer.gif" 0 Bytes von 500 Bytes, 0 Bytes/sec.". Ein kleines defektes Bröckchen von nur 500 Bytes kann also die Darstellung der ganzen Website verhindern.
  4. Zum unflexiblen Layout gehört natürlich auch eine unflexible Schriftgröße. Um das "kostbare Layout" zu schützen, wird dem User also per Agentur-Dekret verboten, die Schriftgröße an sein Sehvermögen anzupassen.
Da die meisten Agenturen es lieben, den User zu bevormunden, werden solche Tabellen-Layouts besonders gerne für Dateien verwendet, die man in irgendwelche antiquierten Framesets der betonierten Grösse 1024 x 768 Pixel hineinlädt.
Wer seiner Agentur sowas durchgehen lässt, könnte auch gleich ein Schild an seiner Firma anbringen auf dem steht: „Wir denken in veralteten Paradigmen aus dem vergangen Jahrtausend.“
Zum Seitenanfang
CSS Stylesheets
Im Rahmen der Entwicklung des WWW bemerkte man irgendwann, dass es praktischer und flexibler ist, Inhalt und Struktur eines Dokumentes von den Anweisungen für das Erscheinungsbild zu trennen.
Für die Formatanweisungen wurde eine eigene Sprache entwickelt, die so genannten Cascading Stylesheets oder kurz CSS.
CSS hat sich mittlerweile zu einem mächtigen Werkzeug entwickelt, das die Verwaltung von Websites sehr erleichtert. Wenn man in den Anfangstagen des WWW das Aussehen einer Website ändern wollte, musste man jede einzelne Datei öffnen, dort die Formatanweisungen ändern und die Datei dann wieder auf den Server laden.
Dank CSS kann man das heute durch Änderung einer einzigen Datei erledigen, und die Veränderung wird sich auf alle Dateien auswirken, in denen diese Formatvorlage referenziert ist.
Die grösste Stärke von CSS liegt darin, für jedes Dokument einer Website Formatvorlagen für unterschiedliche Ausgabemedien anzubieten, so daß z.B. ein Browser für die Bildschirmdarstellung und die Ausgabe an den Drucker auf unterschiedliche Formatanweisungen zugreifen kann.
Man braucht also nicht für jedes Ausgabemedium eine eigene Datei anzulegen, sondern kann mit Hilfe so genannter Medienselektoren dem aufrufenden Gerät oder Programm die Wahl lassen, wie es die Daten empfangen will.
Einige Worte zur Rückwärtskompatibillität
CSS hat sich rasend schnell entwickelt und nicht alle Browser haben mitgehalten. Besonders die Form der Einbindung von Stylesheets in WWW-Dokumente wird von allen Browsern irgendwie unterschiedlich gehandhabt. Die Einbindung nach HTML-Syntax, durch ein link Element, ist wohl immer noch die sicherste Methode.

Die Spezifikation CSS 2.01 sagt ganz klar: Per Definition schliessen sich Medien gegenseitig aus.
Viele Webseiten mischen aber immer noch Medienselektoren und sehen in standard-konformen Browsern deshalb aus wie eine Müllhalde.

Zum Seitenanfang
Zeichenkodierung
Die Zeichenkodierung ist nach wie vor eine Art Geheimwissenschaft. Der Webseiten-Autor muss nur wissen:

„Die Angaben, die der Browser erhält, müssen mit dem Kodierungsverhalten des verwendeten Editors übereinstimmen.“

Das klingt leider einfacher, als es ist, denn fast jede Station im Arbeitsfluss kann ihre Eigenarten erzeugen. Viele Projekte leiden darunter, dass niemand sich Gedanken darüber machte, wie man den Arbeitsfluss normiert. Schauen wir uns ein Beispiel an:
Die Kaskadierungsregel sagt: "Sendet der Server im HTTP-Header eine Angabe zur Zeichenkodierung, so hat diese Angabe Vorrang vor einer entsprechenden Angabe im Dokument."
Mischmasch entsteht schnell. Ein seit Jahren nicht mehr rekonfigurierter Server (in Deutschland bei provinziellen Möchtegern-Providern weit verbreitet) sendet iso-8859-1, die Vorlage des Content-Management Systems wurde aber in einem modernen Editor erstellt und verwendet utf-8, einen Subset von Unicode.
Brummt ihnen schon der Kopf? Nun - dem Browser ihres Besuchers gehts genauso. Nach der Kaskadierungsregel hält er sich streng an die Angaben des Servers und trifft dadurch im Dokument auf jede Menge Zeichen, die er nicht versteht. Das Resultat im Browserfenster? "?ble Sache das. H?tten wir nur sorgf?ltiger geplant."
Für Wiss- und Lernbegierige gibt es zu diesem Thema Hilfreiche Lektüre beim W3C
Zum Seitenanfang