HTML/Tutorials/Grundgerüst

Aus SELFHTML-Wiki
< HTML‎ | Tutorials(Weitergeleitet von Grundgerüst)
Wechseln zu: Navigation, Suche

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

Im fünften Kapitel werden Metaangaben im Detail erklärt, was Anfänger gerne ü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 Grundgerüst hinausgehen.

Kopiervorlage ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
    <p>Sehen Sie sich den Quellcode dieser Seite an.
      <kbd>(Kontextmenu: Seitenquelltext anzeigen)</kbd></p>
  </body>
</html>
Kopiervorlage: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>

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 aus der Angabe des Dokumententyps und aus folgenden Elementen:

  • html
  • head
  • title
  • body

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

Beispiel
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

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 die heutigen Browser wird nur noch die DTD für HTML5 benötigt[1], weshalb wir die vielfältigen DTDs älterer 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.

Angabe einer Dokumenttyp-Deklaration
<!DOCTYPE HTML>

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

Empfehlung: Erstellen Sie HTML5-Dokumente.
  • Jeder Browser „versteht“ diesen Doctype.
  • Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
  • Der doctype ist kürzer und übersichtlicher ;-)

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 die allgemeine Benutzbarkeit der Seite. (für deutschsprachige Seiten: <html lang="de">; für englischsprachige "en")

Es wird unterteilt in

  • head – Informationen über die Seite, die von Programmen wie z. B. Suchmaschinen oder Browsern ausgewertet werden
  • body – die eigentlichen, vom Browser darzustellenden Informationen
Beispiel
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Der head: unsichtbar, aber unverzichtbar

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

head 
<head></head>

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

der Titel

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

  • Browser zeigen 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 der Titel beim Wechsel auf eine Seite als erstes vorgelesen.

Dem Titel kommt also eine besondere Bedeutung zu und er sollte daher aussagekräftig sein. Um die 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.

title -Element im head 
<head>
  <title>aussagekräftiger Seitentitel</title>
</head>

Zeichencodierung

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

Zeichencodierung
<meta charset="utf-8">
Beachten Sie: Wenn Sie für HTML-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.
Des Weiteren muss das Dokument auch mit 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 einstellen. Ohne Angabe setzen Browser die Breite einer Webseite 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:

Beispiel
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Folgende Angaben sind möglich:

  • initial-scale: (Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt)
  • user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no), der default-Wert ist yes.
  • minimum-scale bzw. maximum-scale: 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 mit 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 erfolgen. Die entsprechende Regel @viewport {} ist aber auch schon wieder zurückgezogen worden.

Sie können dieses meta-Element ohne jegliche Nebenwirkungen für jede Ihrer Webseiten einsetzen, um die 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 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Der body: sichtbarer und strukturierter Aufbau

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

body 
<body>
  <!-- Inhalt Ihrer Seite -->
</body>

Im folgenden Kapitel werden die Elemente vorgestellt, 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 der Erstellung von Webseiten. In realen Projekten ist der 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, sowie link-Elemente, die weitere Ressourcen einbinden.

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

Head des SELFHTML-Forums 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML">
    <meta name="keywords" content="SELFHTML Forum, SELFHTML, Forum, SELFForum">

    <link rel="icon" href="/favicon.ico" sizes="48x48" >
    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="manifest" href="manifest.json">
    
    <link rel="stylesheet" href="/css/app-cfa00....css?vsn=d" media="all" title="SELFHTML Forum Stylesheet">

    <link rel="alternate" title="Atom-Feed (alle Foren)" type="application/atom+xml" href="https://forum.selfhtml.org/all/feeds/atom">
    <link rel="alternate" title="RSS-Feed (alle Foren)" type="application/rss+xml" href="https://forum.selfhtml.org/all/feeds/rss">
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 Sie eine Beschreibung, die sich als Bookmark-Info eignet.
meta keywords
Kann von Suchmaschinen ausgewertet werden und wenn's zu 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 Missbrauch 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: browserconfig.xml. Auch mausetot.
meta name=theme-color
Angabe einer Theme-color
link rel=apple-touch-icon
Wird von iOS für's Favicon gebraucht.
→ Favicon
link rel=icon
Wird vom Rest der Welt 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 meta-Element kann das Attribut http-equiv 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 entsprechend 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 http-equiv 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 Hilfe einer Meta-Angabe erzwingen, dass die Daten nicht aus einem Cache-Speicher serviert werden, sondern vom Original-Server. Zu empfehlen ist diese Angabe, wenn Sie die Daten einer HTML-Datei häufig ändern und neu ins Web hochladen.

Beispiel
<meta http-equiv="expires" content="0">

Mit <meta http-equiv="expires" content="0"> 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 content="43200" 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 die Daten dieser Datei nach dem angegebenen Zeitpunkt auf jeden Fall vom Original-Server geladen werden sollen. Datum und Uhrzeit müssen Sie im internationalen Format angeben. Beispiel: content="Sat, 12 Jun 2010 12:00:00 GMT". 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 sie je nach Einstellung ignorieren. Ebenso folgen viele Suchmaschinen-Robots den Weiterleitungen nicht. Ein weiteres Problem ist die Zeitdauer, nach der die Weiterleitung erfolgen soll. Enthält 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 die Wartezeit auf 0 gesetzt, sodass die Weiterleitung sofort erfolgt. Dies ist besonders problematisch: Nutzt der Besucher nämlich die Zurück-Navigationsfunktion (Back-Button), wird er direkt wieder nach vorne katapultiert. Somit hängt er auf einer Seite fest.

Benutzt wird diese Angabe in der 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 zu benutzen. Dies ist allerdings nur mit serverseitigen Techniken möglich, siehe etwa das Apache-Modul mod_alias.

Beispiel 
  <meta http-equiv="refresh" content="5; URL=https://wiki.selfhtml.org/">

Mit <meta http-equiv="refresh" content="…"> veranlassen Sie die Weiterleitung zu einer anderen Adresse. Mit content="5; … bestimmen Sie, nach wie vielen Sekunden die Weiterleitung starten soll. Die 5 im Beispiel bedeutet also, dass die aktuelle Seite, nachdem sie geladen ist, 5 Sekunden lang angezeigt wird. Bei einer Wartezeit von 0 wird die angegebene nächste Datei sofort geladen. Nach der angegebenen Zeit wird die Adresse aufgerufen, die mit url=…" angegeben wird. Setzen Sie Ihre gewünschte Anzeigedauer und den Namen der aufzurufenden Adresse ein. Dabei gelten die üblichen Regeln zum Referenzieren in HTML.

Wenn Sie keine URL angeben, wird nach der angegebenen Zeit die aktuelle Seite neu geladen. Dieses Verfahren sollten Sie keinesfalls verwenden, etwa um eine "Push"-Technologie zu implementieren. Sie können nicht vorhersagen, wie lange ein Benutzer zum Lesen der Seite benötigt; die Aktualisierung lässt die Anzeige wieder zum Anfang der Seite springen und verwirrt den Benutzer[3]. Browser bieten eine eingebaute Funktion zum Aktualisieren der Seite, überlassen Sie es Ihren 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 die Webseite als Wallboard dient. Ein Refresh der Seite ist aber auch dort nicht zu empfehlen, weil die Anzeige dabei flackern kann. Programmieren Sie statt dessen mit JavaScript und AJAX-Techniken eine Datenabfrage und den Update der geänderten Bildschirmbereiche. Man spricht hier von einer Poll-Technik (poll bedeutet abfragen). Wenn die 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 http-equiv Wert findet man immer noch an einigen Stellen und in manchen HTML-Vorlagen.

Empfehlung: Bitte verwenden Sie ihn nicht. Die heutigen Browser, Microsoft Edge eingeschlossen, ignorieren x-ua-compatible, 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üssen 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 die Standards angepasst. Die Folge war, dass alte Seiten, die auf das Verhalten älterer IE-Versionen ausgelegt waren, nicht mehr korrekt dargestellt wurden. Mit x-ua-compatible 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
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Grundgerüst&oldid=98689“