HEAD-Bereich in HTML

Der HTML-Code einer Webseite ist in einer bestimmten Struktur angeordnet und in mehrere Teilbereiche aufgeteilt. Im oberen Bereich wird die Dokumenttyp-Deklaration (DTD) angegeben. Danach erfolgen innerhalb des HTML-Tags (<html> ... </html>) die eigentlichen Befehle für die Webseite. Der HTML-Bereich stellt das Wurzelelement dar und ist unterteilt in die Bereiche HEAD und BODY. Zusammen mit der DTD zählen sie zum Grundgerüst einer Webseite.

HEAD-Bereich in HTML

Der HEAD-Bereich wird mit den Tags <head> ... </head> angegeben und umfasst alle darin enthaltenen Elemente. Hier werden die im Browser nicht sichtbaren Elemente untergebracht. Die einzigen Befehle, die man im HEAD-Bereich platziert und die eine sichtbare Wirkung im Browser haben, sind die Befehle für den Titel und für das favicon.ico. Das bedeutet jedoch nicht, dass der HEAD-Bereich nicht wichtig ist. Im HEAD-Bereich können wichtige Befehle eingegeben werden, die das grundlegende Verhalten einer Webseite beeinflussen können. Dazu zählen insbesondere folgende Angaben, die typischerweise im HEAD-Bereich eingefügt werden.

  • META-Angaben, z.B. für auslesende Suchmaschinen bzw. Bots
  • Angabe der Zeichenkodierung
  • Titel der Webseite
  • CSS-Angaben für die Gestaltung der Elemente
  • Links zu einzubindende Dateien (auch CSS-Dateien möglich)
  • Angaben zu verwendeten Scripten (üblicherweise JavaScript)
  • Basisadresse der Webseite
  • Spezifische Angaben

META-Angaben

Mit den META-Angaben können einige grundlegende Informationen über die Webseite bereitgestellt werden. Damit werden häufig Angaben für Suchmaschinen bzw. Bots bereitstellt, jedoch nicht nur. Näheres dazu ist auf der Seite META-Angaben zu finden. Ein Beispielcode für die Beschreibung der Seite wäre wie folgt.

<meta name="description" content="Beschreibung">

Angabe zur verwendeten Zeichenkodierung

Mit der Zeichenkodierung wird angegeben, wie die Zeichen in Bytes umgewandelt werden und umgekehrt. Eine ausführliche Beschreibung dazu ist auf der Seite Zeichenkodierung zu finden. Die Zeichenkodierung kann über die META-Tags angegeben werden. Ein Beispielcode in HTML5 für die Zeichenkodierung UTF-8 wäre wie folgt.

<meta charset="utf-8">

Titel der Webseite

Der Titel ist sehr wichtig, da darüber die Webseite zusammenfassend beschrieben wird. Es wird von externen Webseiten häufig als maßgebenden Linktext verwendet, z.B. in Suchmaschinen. Im Browser ist es in der Titelleiste bzw. in den Tabs sichtbar. Wenn man den Mauszeiger über den Tab bewegt, wird der Titel als Tooltip angezeigt. Es wird innerhalb des TITLE-Tags angegeben. Ein Beispielcode.

<title>Titel einer Webseite</title>

CSS-Angaben für die Gestaltung

Bei Webseiten sollte der Code so gestaltet werden, dass Inhalt und Design getrennt werden. Um das Aussehen der Elemente zu gestalten, verwendet man CSS (Cascading Style Sheets). Im HEAD-Bereich können die Stile z.B. mit dem STYLE-Tag direkt eingegeben werden. Ein Beispielcode.

<!-- Direkte Eingabe der Stile, z.B. für H1-Tag -->
<style type="text/css">
<!--
h1 { font-size: 30px; }
-->
</style>

Links zu Dateien, die eingebunden werden

Der HEAD-Bereich kann auch Links zu Dateien enthalten, die eingebunden werden. So kann man z.B. CSS-Dateien einbinden. Ein Beispielcode.

<!-- CSS-Datei einbinden -->
<link rel="stylesheet" href="datei.css">

Angaben zu verwendeten Scripten

Auf Webseiten werden häufig kleine clientseitige Programme eingesetzt, die in der Regel mit JavaScript erstellt wurden. Im HEAD-Bereich kann man JavaScript-Code direkt einfügen oder auf eine JavaScript-Datei verlinken. Ein Beispielcode.

<!-- Direkte Eingabe des JavaScript-Codes -->
<script type="text/javascript">  
/* Beliebiger JavaScript-Code */  
</script>

<!-- JavaScript-Datei einbinden -->
<script type="text/javascript" src="javascript-datei.js">
</script>

Basisadresse der Webseite angeben

Wenn man auf einer Webseite Dateien mit relativen Pfadangaben verknüpft oder referenziert, dann kann man hierfür im HEAD-Bereich eine Basisadresse angeben und somit einen Bezugspunkt herstellen. Wenn man beispielsweise ein Bild mit dem Pfad /bild.jpg einfügt und als Basisadresse www.example.com angibt, dann interpretiert der Browser den Pfad für das Bild automatisch als www.example.com/bild.jpg. Die Basisadresse wird mit dem BASE-Tag angegeben. Ein Beispielcode.

<base href="http://www.example.com">

Spezifische Angaben

Im HEAD-Bereich können nicht nur Angaben gemacht werden, die zu den offiziellen HTML-Spezifikationen zählen. Beispielsweise verifizieren viele Systeme die Eigentümerschaft einer Webseite über selbst definierte META-Angaben. Dabei wird zwischen dem Systemanbieter und dem Eigentümer der Webseite ein spezieller Code vereinbart. Der Eigentümer der Webseite setzt dann den speziellen Code im HEAD-Bereich ein und der Systemanbieter bzw. das System kann automatisiert die Webseite auslesen und bei Vorhandensein des vereinbarten Codes davon ausgehen, dass der Eigentümer die Person ist, mit der man kommuniziert. Denn, man geht davon aus, dass eine fremde Person erstens keinen Zugang zu der Webseite hätte, um den Code einzufügen und zweitens den speziell vereinbarten Code nicht wüsste. Ein Beispielcode.

<meta name="Vom-Systemanbieter-berücksichtigter-Name"
 content="Über-diesen-Code-verifiziere-ich-mich-als-Eigentümer">

Meistens vereinbart man hierbei eine spezielle META-Angabe. Was man beim META-Tag unter name="..." und content="..." einfügt, ist unterschiedlich und daher speziell. Häufig verwendet man einen Namen wie z.B. "verify..." oder ähnlich. Beim Inhalt ist der einzufügende Code in der Regel eine beliebige Anordnung aus Zahlen und Buchstaben.