Head Bereich

Title

Das title - Element sollte mit wenigen Worten, das Thema der Seite definieren. Dieser Titel erscheint in der oberen Leiste des Browserfensters und wird in der Favoritenliste angezeigt.

Der title erscheint bei erfolgreichem Suchergebnis auf der Google Seite.

Der title wird von Suchmaschinen besonders berücksichtigt, daher sollten potentielle Suchbegriffe im title aufgeführt werden. Er sollte für jede Seite neu gesetzt werden.

Die Suchmaschinen zeigen die ersten 50 bis 60 Zeichen des title-Tags.

Der title erscheint:

• in der Titelleiste des Tabs
• als Standardname beim Setzen von Lesezeichen
• im Verlauf des Browsers
• als Überschrift von Einträgen in Suchmaschinen

Meta-Angaben

Es gibt das HTML Element meta für innerhalb des Head Bereichs.
siehe Meta Tags

Verknüpfungen und logische Beziehungen

Verknüpfungen zu anderen Ressourcen z.B.: externe CSS Dateien, Javascript Dateien können im Head bereich mittels des link Elements definiert werden. So kann man CSS oder Script Dateien einbinden, die zentral definiert sind. Diese Dateien können in einer zentralen Stelle des Projekts liegen oder sogar aus dem Netz geladen werden (framework). Somit lassen sich projektweit Aussehen und Funktionen definieren. siehe CSS

CSS Bereich

Bereich für dokumentweite Stylesheet Angaben. siehe CSS

Script-Bereich

Ein Bereich für Javascript oder anderen Scriptsprachen siehe Script auslagern

Favicon

Man kann den Seiten ein Bildsymbol / Icon zuweisen, welches im Tabulator oder den Lesezeichen des Browsers angezeigt wird. Es sollte ein 16x16 Pixel großes Bild sein. Es gibt 2 Möglichkeiten dieses favicon einzubinden.

1. Man nennt es favicon.ico und lädt es ins Hauptverzeichnis des Webprojektes
2. Man bindet es im Head Bereich der HTML Seite ein. In diesem Falle, kann es auch ein png oder gif Bild sein. Im standalone Element link wird mittels dem href Attribut ein Verweis auf das Icon gelegt. Außerdem wird mit dem rel (Relation, Beziehung) die Art der Verlinkung angegeben. Das Attribut type erwartet den Mime Type.

   <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

Auf der Seite http://www.favicon.cc/ kann man online ein Bild in das ico Format umwandeln.
Auch auf dieser Seite gibts einen Favicon Generator.

Apple Touch Icon

weitere Infos

Wenn man sich auf dem Homescreen eines Iphones / Tablets eine Website abspeichert, wird als Icon eine verkleinerter Screenshot der Seite genommen. Mit einem Apple Touch Icon kann man stattdessen ein eigenes Icon zur Verfügung stellen. Man braucht dazu ein PNG- Bild  im Format 128×128 Pixel. Glanzeffekt und abgerundete Ecken müssen nicht erstellt werden.

Im Head Bereich wird folgender Code eingefügt:

<link rel="apple-touch-icon" href="http://deinedomain.de/apple-touch-icon.png"/>

Basis URLs und Basis Zielfenster Element

Mit dem basic Element kann man ein Basis Zielfenster und / oder eine Basis Adresse definieren.

Problemlösungen für ältere Browser

Damit auch ältere Browser die neuen HTML5 Elemente problemlos behandeln sind einige Eingriffe im Head Bereich nötig. Siehe dazu HTML5 und ältere Browser