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>