Head-Bereich

Der Head-Bereich dient zum Definieren von Merkmalen über die enthaltenen Daten. Dabei enthält jedoch der Head-Bereich nicht die eigentlichen Daten selbst, denn diese sind im Body-Bereich zu finden. Der Head-Bereich befindet sich durch das head-Element direkt im html-Element. Neben den verschiedenen Metadaten im Head-Bereich, sind dort auch Einbindungen von externen Daten wie Stylesheets und Skripte zu finden.

Titel

Der Titel einer Seite wird ebenfalls innerhalb des Head-Bereichs definiert. Hierfür notieren wir den Titel innerhalb der title-Tags. Der Titel ist eigentlich der einzige für den Endbenutzer sichtbare Teil des Head-Bereichs. Hier nochmals ein Beispiel für einen Titel in HTML:

<title>Meine erste Webseite</title>

Meta-Angaben

Als Metadaten (oder auch Metainformationen) werden, wie bereits erwähnt, Informationen und Merkmale anderer Daten (zumeist die, welche im Body-Bereich zu finden sind) bezeichnet. Um diese Merkmale festzulegen, gibt es in HTML das leere Element meta. Um Metainformationen festzulegen, benötigen wir neben dem meta-Element die Attribute name und content. name legt dabei den Typ der Metainformation fest, wohingegen das content-Attribut für den Inhalt zuständig ist. Wichtig zu wissen ist, dass keine der Meta-Angaben für ein gültiges (valides) HTML-Dokument notwendig sind. Die Angaben aller Metadaten sind also optional.

Gerade im Bereich Suchmaschinenoptimierung (SEO, Search Engine Optimization) sind die Meta-Angaben description und keywords sehr wichtig. Die Seitenbeschreibung, welche mittels description definiert wird, sollte ungefähr 100 bis 150 Zeichen lang sein und wird bei den Suchmaschinen zumeist unterhalb des Webseitentitels und der URL angezeigt (siehe Bild). Ist die Beschreibung zu lang, so schneiden die Suchmaschinen die Beschreibung ab, was oft unschön ist. Grundsätzlich sollte die Beschreibung klar formuliert werden und Suchende dazu animieren, Ihre Webseite aufzurufen. Hier nun das erste Beispiel zu einer Meta-Angabe:

<meta name="description" content="Hier finden Sie alle Informationen über die Auszeichnungssprache HTML: vom Aufbau, über Listen und Tabellen bis hin zu Videos" />

Die Meta-Angabe keywords dient zum Festlegen von Schlüsselwörtern. Unter anderem mit diesen Schlüsselwörtern, können die Benutzer einer Suchmaschine Ihre Webseite finden. Schlüsselwörter (auch Stichwörter genannt) müssen durch Kommas getrennt werden. Für eine bessere Lesbarkeit wird nach dem Komma zumeist ein Leerzeichen notiert.

<meta name="keywords" content="HTML, Head, Body, Überschrift, Text, Link, Liste, Tabelle, Formular" />

Mit dem Typ author können wir den Autor und somit die Person, welche für den Inhalt verantwortlich ist, festlegen:

<meta name="author" content="Max Mustermann" />

Des Weiteren können wir mit dem Typ publisher die Person oder Firma festlegen, welche den Webauftritt herausgegeben hat. Bei privaten und selbst erstellten Webseiten haben die Meta-Angaben für den Autor und Herausgeber meist den gleichen Wert.

<meta name="publisher" content="Max Mustermann" />

Um die Steuerung von Webcrawlern festzulegen, können wir im name-Attribut des meta-Elements den Wert robots eintragen. Webcrawler sind Programme, welche die Aufgabe haben, das Internet zu durchsuchen und sich dabei von Link zu Link durchzuarbeiten. Dadurch ist eine Erfassung eines Großteils des Internets möglich. Als Wert für das content-Attribut kommen hauptsächlich die Schlüsselwörter index und follow sowie die gegenteiligen Schlüsselwörter noindex und nofollow zum Einsatz. Daraus ergeben sich nun theoretisch 4 verschiedene Möglichkeiten.

Die Kombination index,follow bedeutet, dass die aktuelle Seite in den Seitenindex der Suchmaschine aufgenommen (fachsprachlich indexiert) werden soll und die darin enthaltenen Links vom Webcrawler verfolgt (also ebenfalls aufgerufen und geprüft) werden sollen. Dies ist die gängigste Notation, wenn es darum geht, dem Webcrawler explizit mitzuteilen, dass diese Webseite vollständig verarbeitet werden soll.

<meta name="robots" content="index,follow" />

Als gegensätzliche Notation zu index,follow gibt es die Kombination noindex,nofollow. Damit teilen wir dem Webcrawler mit, die aktuelle Webseite weder zu indexieren, noch die dort enthaltenen Links zu verfolgen. Dies eignet sich ideal für Seiten, welche für Besucher nicht relevant sind bzw. nicht zugänglich sein sollten (z. B. ein Admin-Bereich).

<meta name="robots" content="noindex,nofollow" />

Durch die Anweisung noindex,follow wird dem Webcrawler mitgeteilt, die aktuelle Seite zwar nicht in den Seitenindex aufzunehmen, jedoch die auf der Seite enthaltenen Links weiter zu verfolgen.

<meta name="robots" content="noindex,follow" />

Als 4. und letzte Möglichkeit ergibt sich die Kombination index,nofollow. Dadurch wir die Seite in den Index aufgenommen, die dort enthaltenen Links jedoch nicht verfolgt.

<meta name="robots" content="index,nofollow" />

Eine weitere wichtige Meta-Angabe ist die Angabe der Zeichenkodierung. Hierfür benötigen wir ebenfalls das meta-Element, jedoch nicht das name und content Attribut. Die Angabe der Zeichenkodierung erfolgt mittels des charset-Attributs. Gültige Werte sind z. B. UTF-8 oder ISO-8859-1. Die Angabe dieser Meta-Angabe ist ebenfalls keine Pflicht, sollte jedoch in keinem HTML-Dokument fehlen. Die HTML5-Spezifikation schreibt vor, dass sofern die Angabe vorhanden ist, die Kodierungs-Angabe innerhalb der ersten 1024 Bytes der Seite liegen muss. Der folgende Code legt die Zeichenkodierung UTF-8 fest:

<meta charset="UTF-8" />

Einbindung externer Daten

Um externe Daten bzw. Dateien einzubinden gibt es in HTML das link-Element. Auch dieses ist leer bzw. einteilig und wird im Head-Bereich platziert. Über das rel-Attribut wird angegeben, um was für eine Ressource oder vereinfacht gesagt, um was für eine Datei es sich handelt. Dieses Attribut ist erforderlich und muss bei Verwendung des link-Elements immer angegeben werden. Über das Attribut href (Hyper Reference) können wir die URL zu der Datei angeben. Bei einigen Ressourcen, wie z. B. Icons oder Stylesheets, sollte zusätzlich das type-Attribut verwendet werden, in welchem der MIME-Typ der jeweiligen Datei angegeben werden muss.

Die folgende Tabelle zeigt die verschiedenen Werte, welche im rel-Attribut eingesetzt werden können (links) und eine kurze Beschreibung dazu (rechts):

icon	Link zu einem Favicon (Icon, welches in der Browserzeile angezeigt wird)
stylesheet	Link zu einem Stylesheet (Dokument, welches Style-Angaben wie z. B. CSS enthalten)
alternate	Link zu einer alternativen Version des Dokuments (Druckversion, Backup-Version, aber auch Versionen in anderen Inhalten wie RSS-Feeds)
prev	Link zur vorherigen Seite (z. B. bei Kapiteln oder Tutorials, bei welchen es mehrere Seiten gibt, welche zusammengehören)
next	Link zur nächsten Seite (z. B. bei Kapiteln oder Tutorials, bei welchen es mehrere Seiten gibt, welche zusammengehören)
search	Link zur "Suchmaschine" der Website
author	Link zu einem Dokument über den Autor (z. B. "Über uns"-Seite)
license	Link zu einem Dokument über Copyright- und Lizenz-Informationen
help	Link zu einem Dokument, welches eine Hilfe enthält

Hier nun einige Code-Beispiele zu den oben aufgelisteten Link-Typen:

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

<link rel="stylesheet" href="/layout.css" type="text/css" />

<link rel="alternate" href="/feed.rss" type="application/rss+xml" />

<link rel="prev" href="/HTML/einleitung.php" />

<link rel="next" href="/HTML/text.php" />

<link rel="search" href="/suche.html" />

<link rel="author" href="/Ueber-Uns/" />

<link rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/" />

<link rel="help" href="/Hilfe/" />

Eine Ausnahme ist die Einbindung externer Skripte (wie z. B. JavaScript-Dateien). Hier benötigen wir nicht das link-Element, sondern das script-Element. Dieses verfügt über das Attribut type, in welchem wir, wie beim type-Attribut des link-Elements, den MIME-Typ festlegen müssen (für JavaScript ist dies text/javascript). Mit Hilfe des Attributs src legen wir die URL zu der Datei fest. Das script-Element ist zweiteilig und kann sowohl im Head- als auch im Body-Bereich notiert werden.

<script type="text/javascript" src="/JS/Google-Analytics.js"></script>