W3docs
de
Anmelden

HTML <head>-Tag

Das HTML <head>-Tag enthält Metadaten (Titel, Zeichensatz, viewport, Links, Skripte). Syntax, häufige Meta-Tags und Beispiele.

Das <head>-Tag enthält Metadaten (Dokumenttitel, Zeichensatz, Styles, Links, Skripte) – spezifische Informationen über die Webseite, die dem Benutzer nicht angezeigt werden. Metadaten liefern Browsern und Suchmaschinen technische Informationen über die Webseite.

Wo das <head>-Tag steht

Das <head>-Element ist das erste Element innerhalb von <html> und wird direkt vor dem <body> platziert. Während <body> die sichtbaren Seiteninhalte enthält, enthält <head> die Hintergrundinformationen, die der Browser zum Rendern und Identifizieren der Seite benötigt:

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata goes here -->
  </head>
  <body>
    <!-- visible content goes here -->
  </body>
</html>

Das <head>-Tag ist technisch gesehen erforderlich, aber wenn es weggelassen wird, erstellt der Browser es automatisch und verschiebt Elemente auf Head-Ebene (wie <title> und <meta>) hinein. Das explizite Schreiben hält das Dokument vorhersehbar und valide.

Elemente, die im <head> stehen können

Das <head>-Tag kann folgende Elemente enthalten:

  • Das <title>-Tag definiert den Titel einer Webseite (erforderlich). Es kann mit dem <h1>-Tag verwechselt werden, doch beide unterscheiden sich voneinander. Das <h1>-Tag gibt den Titel des Seiteninhalts an, während das <title>-Tag Metadaten darstellt, die den Titel des gesamten HTML-Inhalts repräsentieren, nicht dessen Inhalt.
  • Das <style>-Tag enthält CSS-Code, der festlegt, wie HTML-Elemente im Browser dargestellt werden sollen.
  • Das <base>-Tag definiert eine absolute (Basis-)URL für alle relativen URLs.
  • Das <link>-Tag legt die Beziehung zwischen dem aktuellen HTML-Dokument und der referenzierten Ressource fest oder enthält einen Link zu einem externen Stylesheet. Es kann zwei Attribute haben: rel="stylesheet" und href.
  • Das <meta>-Tag liefert zusätzliche Informationen (Metadaten) über ein HTML-Dokument. Der <head> einer Seite kann verschiedene <meta>-Elemente enthalten, die die Attribute name und content aufweisen können.
  • Das <script>-Tag enthält ein Skript (in der Regel JavaScript) oder einen Verweis auf eine externe Datei mit Skripten. Dieses Element kann im <head> eingefügt werden. Manchmal ist es besser, es am Ende des <body> zu platzieren, um die Seitenladegeschwindigkeit zu verbessern. Das <script>-Element mag leer wirken, ist es aber nicht.
  • Das <noscript>-Tag definiert einen alternativen Text, der angezeigt wird, wenn der Browser keine Skripte unterstützt oder Skripte vom Benutzer deaktiviert wurden.

Das <head>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<head>) und dem schließenden (</head>) Tag geschrieben.

Beispiele

Beispiel für das HTML-<head>-Tag mit den Tags <title> und <style>:

Beispiel eines HTML-head-Tags

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body{
        background-color: #d3d3d3;
      }
      p{
        color:  #1c87c9;
      }
      a{
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Paragraph</p>
    <a href="#">Link</a>
  </body>
</html>
Probier es selbst »

In diesem Beispiel wird das <head>-Tag zusammen mit den Tags <title> und <style> verwendet. Das <title>-Tag definiert den Titel des Dokuments, der im Browserfenster angezeigt wird. Im <style>-Tag wird der Stil des Dokuments festgelegt: Der Hintergrund des Dokuments ist hellgrau, der Text in den Absätzen, die mit dem <p>-Tag markiert sind, ist blau, und die Links im <a>-Tag sind rot.

Der Inhalt der Seite

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>
Probier es selbst »

Hier verbindet das <link>-Tag die Seite mit einem externen Stylesheet unter css/style.css (eine Datei in einem css-Ordner neben der HTML-Datei). CSS in einer separaten Datei zu halten ist der Standardansatz für echte Projekte, da dasselbe Stylesheet auf vielen Seiten geteilt und vom Browser gecacht werden kann. Die oben gezeigte Seite wird nur dann gestylt angezeigt, wenn die Datei style.css tatsächlich unter dem angegebenen Pfad vorhanden ist.

Beispiel für das HTML-<head>-Tag mit dem <meta>-Tag:

HTML-<head>-Tag

<!DOCTYPE html>
<html>
  <head>
    <meta name="title" content="HTML and CSS Books" />
    <meta name="description" content="HTML and CSS Basics for Beginners" />
    <meta http-equiv="refresh" content="30" />
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>
Probier es selbst »

Das <meta>-Tag liefert Metadaten über die Seite. Der Inhalt von name="description" wird von Suchmaschinen als Snippet unter einem Suchergebnis verwendet. Die Zeile http-equiv="refresh" lädt die Seite alle 30 Sekunden neu – dies ist heute selten angebracht (es beeinträchtigt die Barrierefreiheit und wird üblicherweise durch JavaScript oder HTTP-Header ersetzt), daher sollte es sparsam eingesetzt werden.

Die <meta>-Tags, die fast immer benötigt werden

Einige <meta>-Tags sind so verbreitet, dass sie auf fast jeder modernen Seite vorhanden sind.

Zeichenkodierung und viewport

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Page</title>
</head>
  • <meta charset="UTF-8"> deklariert die Zeichenkodierung, sodass Buchstaben mit Akzenten, Symbole und Emojis korrekt dargestellt werden. Platziere es zuerst im <head>.
  • <meta name="viewport" content="width=device-width, initial-scale=1"> weist mobile Browser an, die Layoutbreite an die Gerätebreite anzupassen, anstatt eine Desktop-große Seite herausgezoomt darzustellen. Das Weglassen ist die häufigste Ursache für „winzige" Seiten auf Smartphones, daher sollte es auf jeder responsiven Seite eingebunden werden.

Open-Graph-Tags für das Teilen in sozialen Netzwerken

Wenn jemand eine URL auf Plattformen wie Facebook, LinkedIn oder Slack teilt, lesen diese Dienste Open-Graph-(og:-)Meta-Tags, um die Vorschaukarte zu erstellen – mit Titel, Zusammenfassung und Vorschaubild.

<head>
  <meta property="og:title" content="Learn HTML - W3docs" />
  <meta property="og:description" content="A beginner-friendly HTML tutorial." />
  <meta property="og:image" content="https://www.example.com/preview.png" />
  <meta property="og:url" content="https://www.example.com/learn-html" />
</head>

Zu beachten ist, dass Open-Graph-Tags das Attribut property verwenden (nicht name). Die URL bei og:image sollte absolut sein (mit https:// beginnen), da die soziale Plattform das Bild von ihren eigenen Servern abruft. Eine vollständige Liste der <meta>-Tags findet sich im Kapitel <meta>.

Attribute

In HTML5 besitzt das <head>-Tag keine spezifischen Attribute. Es unterstützt nur Globale Attribute und die Ereignis-Attribute.

Übungen

Übung
Welches Meta-Tag sollte jede responsive Seite in ihrem head enthalten?
Welches Meta-Tag sollte jede responsive Seite in ihrem head enthalten?
Was this page helpful?