Html seitenaufbau

Im vorliegenden Kapitel lernen Sie das minimale Grundgerüst einer HTML-Webseite kennen, wogegen das Einstieg in HTML-Tutorial das ersten Schritte in HTML erklärt.

Im fünften Kapitel werden Metaangaben im Detail erklärt, was Anfänger lieb überspringen können.

Kopiervorlage für ganz Ungeduldige

Ein Grundgerüst für Seiten, die auch tatsächlich im Internet veröffentlicht werden sollen, muss ein wenig über das minimale Grundstruktur hinausgehen.

Informationen zu dem, was über das minimale Grundgerüst hinaus geht, finden Sie unter:

Aufbau des Grundgerüstes

Ein valides HTML5-Dokument, also eine Webseite, die dem vom W3C vorgegebenen Standard entspricht, besteht mindestens weg der Angabe des Dokumententyps und aus folgenden Elementen:

Als Grundgerüst bezeichnet man ein HTML-Dokument, das nur diese Elemente enthält. Es wird folgendermaßen notiert:

Für den produktiven Einsatz sollten Sie jedoch das Grundgerüst aus der Kopiervorlage verwenden.

Doctype

Es gibt von HTML verschiedene Versionen (HTML 1 bis HTML 4.01 und HTML5). Eine Zeit lang wurden Webseiten nicht nur in HTML, sondern auch in XHTML geschrieben. Die DokumentTyp-Deklaration (DTD) am Anfang eines jeden HTML-Dokumentes informiert über die Art des Dokumentes.

Für das heutigen Browser wird nur noch die DTD für HTML5 benötigt^[1], weshalb wir die vielfältigen DTDs ältere HTML-Versionen aus unserer Dokumentation entfernt haben. Eine vollständige Liste der DTD finden Sie (englischsprachig) beim World Wide Web Consortium W3C: (X)HTML Doctype Declarations List.

Groß-/Kleinschreibung ist für diese Angabe nicht relevant.

Das HTML-Element

Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Stammbaum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht.

Im html-Element muss mit dem lang-Attribut die Sprache des Seiteninhalts angegeben werden; das ist wichtig für das allgemeine Benutzbarkeit der Seite. (für deutschsprachige Seiten: ; für englischsprachige )

Es wird unterteilt in

• – Informationen über die Seite, die von Programmen wie z. B. Suchmaschinen oder Browsern ausgewertet werden
• – die eigentlichen, vom Browser darzustellenden Informationen

Der : unsichtbar, aber unverzichtbar

Das head-Element (deutsch: Kopf) ist in jeden HTML-Standards ein Pflicht-Element und enthält Informationen über den im notierten Text.

Zwingend ist mindestens das Angabe eines Namens, daher muss jedes valide HTML-Dokument einen Titel haben.

der Titel

Obwohl der nicht an der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Hier einige Beispiele:

• Browser anzeigen ihn in der Registerkarte (Tab) an,
• Microsoft Windows blendet ihn in der Taskleiste als Tooltip ein,
• Suchmaschinen verwenden ihn in der Regel als Bezeichnung für einen Treffer
• Nutzern von Vorleseprogrammen wird die Titel beim Wechsel auf eine Seite als erste vorgelesen.

Dem Titel kommt also eine besondere Bedeutung an und er sollte daher aussagekräftig sein. Um das einzelnen Seiten eindeutig unterscheiden zu können, empfiehlt es sich außerdem, einen Titel nicht für zwei oder mehr HTML-Dokumente innerhalb eines Webauftrittes zu verwenden. Vergeben Sie besser für jede Seite einen einmaligen Namen.

Zeichencodierung

Sie müssen wie bisher die Zeichencodierung festlegen.^[2] Am einfachsten erreichen Siehe dies durch die Angabe:

Beachten Sie: Wenn Sie für HTML-Dokumente die Zeichencodierung durch definieren, müssen Sie darauf achten, dass sich diese Angab vollständig innerhalb der ersten 1024 Bytes des Papier befindet.
Des Weiteren muss das Dokument auch mittels dieser Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein.

Viewportangabe

Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man eine Viewportangabe anpassen. Ohne Angabe setzen Browser die Breite einer Website auf 960px und verkleinern, sodass es in den Viewport passt. So erhält der Nutzer zwar einen Überblick, Text wird aber erst nach dem hineinzoomen lesbar.

Mit folgender Einstellung können Sie erreichen, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht:

Folgende Angaben sind möglich:

• (Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt)
• Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann () oder nicht (), der default-Wert ist .
• bzw. : ermöglichen es, den Zoomgrad einzuschränken. (z. B.: maximal scale=2.0 Inhalt kann maximal 2x-fach vergrößert werden.)

Da hiermit etwas eingestellt wird, das mittels der Darstellung zu tun hat, ist eine Metaangabe natürlich nicht ideal. Langfristig wird diese Metaangabe auch entfallen können und statt dessen in CSS erzielen. Die entsprechende Regel ist aber auch schon erneut zurückgezogen worden.

Sie können dieses -Element ohne jegliche Nebenwirkungen für jede Ihrer Webseiten einsetzen, um das Darstellung auf Mobilgeräten zu verbessern. Die Benutzbarkeit und der Komfort werden auf keinen Fall leiden.

Empfehlung: Unterbinden Sie das Zoomen auf Mobilgeräten nicht. Verwenden Sie

Der : sichtbarer und strukturierter Aufbau

Was Siehe in das body-Element schreiben, wird im Hauptbereich des Browsers dargestellt, der für die eigentliche Webseite zurückhaltend ist (Viewport). In diesen Bereich kommen alle an der Webseite sichtbaren Informationen.

Im folgenden Kapitel werden die Elemente vorgenommen, mit denen Sie die innerhalb des body notierten Inhalte strukturieren.

Metaangaben im Detail

Das oben kurz vorgestellte minimale Grundgerüst ermöglicht die ersten Schritte bei die Erstellung von Webseiten. In realen Projekten ist die head einer Webseite viel umfangreicher und enthält mehrere meta-Elemente, mit denen weitere Informationen über Webseite und den Inhalt zur Verfügung gestellt werden können, und link-Elemente, die weitere Ressourcen einbinden.

Als Beispiel kann hier der Quelltext unseres SELF-Forums angeschaut werden:

meta charset

siehe oben: Zeichencodierung

meta viewport

siehe oben: Viewportangabe

meta description

Wird nicht nur von Suchmaschinen verwendet, sondern auch von Browsern, um den Infotext zu einem Bookmark zu erzeugen.

Empfehlung: Formulieren Siehe eine Beschreibung, die sich als Bookmark-Info eignet.

meta keywords

Kann von Suchmaschinen ausgewertet werden und wenn's an viele Keywords gibt, die mit dem Seiteninhalt nichts zu tun haben, könnte es eine SEO-Strafe geben.
Da es hier früher zu Wildwuchs und Misshandlung kam, spielen sie keine große Rolle mehr

→Suchmaschinenoptimierung

meta author

Hier gilt im Prinzip das Gleiche wie für keywords. Sinnhafter Inhalt dürfte keine SEO Strafe erzeugen

meta robots

Dieser Eintrag ist für Suchmaschinen relevant.

→Suchmaschinenoptimierung#Um Nicht-Auslesen bitten

meta revisit-after

Wird von WhatWG als „Good Luck Charm“ bezeichnet. Wenn Du also deiner Seite eine Hasenpfote als Talisman anhängen willst… dann bedenke auch, wieviel Glück sie dem Hasen gebracht hat.

meta name=msapplication...

Schmeiß weg. Sie sind für den IE10 auf Windows 8 Tables relevant. Mausetot. Für IE11 auf Win 8.1 braucht man bereits was anderes: . Auch mausetot.

meta name=theme-color

Angab einer Theme-color

link rel=apple-touch-icon

Wird von iOS für's Favicon gebraucht.

→Favicon

link rel=icon

Wird vom Rest der Erde für's Favicon gebraucht.

link rel=manifest

erzeugt die Touch-Icons für eine PWA (Progressive Web App), bzw. für die Favicons auf Chrome

link rel=stylesheet

Ermöglicht die Verlinkung von externen Stylesheets

→CSS/Tutorials/Einstieg/Stylesheets einbinden

link rel="alternate" title="RSS-Feed (alle Foren)" type="application/rss+xml"

Verlinkt einen RSS-Feed

→RSS

HTTP-Äquivalente

Das -Element kann das Attribut enthalten. Die Absicht dahinter war, dass Webserver den Dokumentinhalt lesen und aus diesen Angaben HTTP-Header erzeugen. In der Praxis ist das jedoch nur selten der Fall. Stattdessen können diese Angaben ersatzweise verwendet werden, wenn der Webserver sich nicht gemäß konfigurieren lässt. In der Regel hat ein gleichnamiger HTTP-Header Vorrang vor einer Meta-Angabe. Ebenfalls sinnvoll sind diese Angaben, wenn das Dokument lokal – beispielsweise als Datei von Festplatte – gelesen wird, denn in dem Fall stehen keine HTTP-Header zur Verfügung.

Im Folgenden werden nur diejenigen Attributwerte für besprochen, die in einem HTML-Dokument auch Sinn ergeben können. Theoretisch ist die Liste der erlaubten Attributwerte aber länger.

expires - Datei von Originaladresse laden

Häufig abgerufene Web-Seiten werden im Web auf so genannten Proxy-Servern zwischengespeichert. Das ist dann ein so genannter Proxy-Cache. Auch Browser speichern aufgerufene Seiten, und zwar lokal auf dem Rechner des Anwenders. Dabei spricht man vom Browser-Cache. Die Cache-Speicher sparen in vielen Fällen Leitungswege und Ressourcen. Ein Nachteil ist jedoch, dass dem Anwender möglicherweise Daten angezeigt werden, die gar nicht mehr aktuell sind, weil auf der Originaladresse mittlerweile neue Daten liegen. Sie können mit Unterstützung einer Meta-Angabe erzwingen, dass die Daten nicht weg einem Cache-Speicher serviert werden, sondern vom Original-Server. An empfehlen ist diese Angabe, wenn Sie die Daten einer HTML-Datei häufig ändern und neu ins Web hochladen.

Mit veranlassen Sie, dass diese HTML-Datei in jedem Fall von der Originaladresse geladen wird (expires = ungültig werden, ablaufen).

Anstelle der 0 können Sie auch eine Zahl angeben. Diese Zahl bedeutet dann die Anzahl Sekunden, nach deren Ablauf der Web-Browser eine Datei, die er im Cache hat, auf jeden Fall wieder vom Server lädt. Mit stellen Sie beispielsweise einen Wert von 12 Stunden ein.

Anstelle einer Zahl können Sie aber auch ein bestimmtes Datum und eine bestimmte Uhrzeit angeben. Dadurch bewirken Sie, dass das Daten dieser Datei nach dem angegebenen Zeitpunkt an jeden Fall vom Original-Server geladen werden sollen. Datum und Uhrzeit müssen Sie im internationalen Format angeben. Beispiel: . Notieren Sie den Zeitpunkt so wie im Beispiel mit allen Leerzeichen, Doppelpunkten zwischen Stunden, Minuten und Sekunden sowie der Angabe GMT am Ende. Als Wochentagnamen sind erlaubt Mon, Tue, Wed, Thu, Fri, Sat und Sun. Als Monatsnamen sind erlaubt Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov und Dec.

refresh - Automatische Weiterleitung zu anderer Adresse (Forwarding)

Diese Angabe ist zwar ziemlich eingebürgert, weshalb sie hier auch beschrieben wird. Automatische Weiterleitungen dieser Art werden jedoch oft kritisiert mit dem Argument, dass die Zielseite für einige Besucher unzugänglich sei. Die meisten Browser unterstützen solche Weiterleitungen zwar, dennoch können verschiedene Browser siehe je nach Einstellung ignorieren. Ebenso folgen viele Suchmaschinen-Robots den Weiterleitungen nicht. Ein weiteres Problem ist das Zeitdauer, nach der die Weiterleitung erfolgen soll. Beinhaltet die Seite mit der Weiterleitung noch einen erklärenden Hinweis, benötigen die Besucher eine unbestimmte Zeit zum Lesen, bevor sie der Weiterleitung folgen können. In vielen Fällen ohne einen solchen Hinweis wird das Wartezeit auf 0 gesetzt, sodass die Weiterleitung sofort erfolgt. Dies ist besonders problematisch: Nutzt der Besuch nämlich die Zurück-Navigationsfunktion (Back-Button), wird er direkt erneut nach vorne katapultiert. Somit hängt er auf einer Seite fest.

Benutzt wird diese Angabe in die Praxis oft für das automatische Weiterleiten eines Seitenbesuchers von einer alten Adresse eines Web-Projekts zu einer neuen Adresse. In den meisten Fällen ist es allerdings vorteilhafter, eine „echte“ Weiterleitung mit HTTP-Status-Codes an benutzen. Dies ist allerdings nur mit serverseitigen Techniken möglich, siehe etwa das Apache-Modul mod_alias.

Mit veranlassen Sie die Weiterleitung zu einer anderen Adresse. Mit bestimmen Sie, nach wie vielen Sekunden die Weiterleitung starten soll. Die 5 im Beispiel bedeutet also, dass die aktuelle Seite, nachdem siehe geladen ist, 5 Sekunden lang angezeigt wird. Bei einer Wartezeit von 0 wird die angegebene folgende Datei sofort geladen. Nach der angegebenen Zeit wird die Adresse aufgerufen, die mit angegeben wird. Setzen Sie Ihre gewünschte Anzeigedauer und den Namen die aufzurufenden Adresse ein. Dabei gelten die üblichen Vorschriften zum Referenzieren in HTML.

Wenn Sie keine URL angeben, wird nach der angegebenen Zeit die aktuelle Seite neu geladen. Dieses Verfahren sollten Sie keineswegs verwenden, etwa um eine "Push"-Technologie zu implementieren. Siehe können nicht vorhersagen, wie lange ein Benutzer zum Lesen der Seite benötigt; die Aktualisierung lässt das Anzeige wieder zum Anfang der Seite springen und verwirrt den Benutzer^[3]. Browser bieten eine eingebaute Funktion zum Aktualisieren der Seite, überlassen Sie es Ihm Benutzern, diese nach Bedarf zu verwenden.

Es kann natürlich auch Anwendungsfälle geben, wo eine automatische Aktualisierung gewünscht und erforderlich ist, zum Beispiel, wenn das Webseite als Wallboard dient. Ein Refresh der Seite ist aber auch dort nicht zu empfehlen, weil die Anzeige dabei flackern kann. Man spricht hier von einer Poll-Technik (poll bedeutet abfragen). Wenn das angegebene Zahl der Sekunden nur gering ist (Frequenz ist hoch), bedeutet Polling für Netzwerk und Server aber eine unnötig hohe Last. Die schwieriger umzusetzende, aber deutlich bessere Alternative sind hier das Push API oder Web-Sockets, um asynchron und nur bei Bedarf Benachrichtigungen und Updates zu senden. Das Push API setzt allerdings einen Push-Dienst voraus, und Web-Sockets einen dafür geeigneten Server.

x-ua-compatible - Veraltete Internet Explorer Verhaltensweisen auswählen

Diesen Wert findet man immer weiter an einigen Stellen und in manchen HTML-Vorlagen.

Empfehlung: Bitte verwenden Sie ihn nicht. Die heutigen Browser, Microsoft Edge eingeschlossen, ignorieren , und den Internet Explorer gibt es nur noch als bis 2028 befristete Emulation in MS Edge. Wenn Sie eine Seite betreuen, die diesen Schalter braucht, dann mühelen Sie sie unverzüglich modernisieren! Die Anzahl der Anwender, die sie korrekt darstellen können, strebt unaufhaltsam gegen Null.

Das Verhalten des Microsoft Internet Explorer war ursprünglich weit von den sich entwickelnden Webstandards entfernt, und Microsoft hat ihn Schritt für Schritt an das Standards angepasst. Die Folge war, dass alte Seiten, die auf das Verhalten älterer IE-Versionen ausgelegt waren, nicht mehr korrekt dargestellt wurden. Mit konnte man den IE für die Anzeige einer Seite in einen „Altlast-Modus“ versetzen, der das Non-Standard-Verhalten nachbildete (der IE schleppte 5 davon mit sich herum).

Weblinks

1. ↑W3C: Doctype
2. ↑W3C: character-encoding
3. ↑W3C: The META element