HTML-Kopflemente

Mehr Beispiele

Titel des Dokuments
Das <title>-Element definiert den Titel des Dokuments.
Alle Links haben ein Ziel
Wie man alle Links auf eine neue Zieladresse umleitet, damit sie in einem neuen Fenster geöffnet werden.
Dokumentbeschreibung
Verwenden Sie das <meta>-Element, um das Dokument zu beschreiben.
DokumentKeywords
Verwenden Sie das <meta>-Element, um die Keywords des Dokuments zu definieren.
Benutzer umleiten
Wie man Benutzer auf eine neue URL umleitet.

HTML <head>-Element

Der <head>-Element ist der Container für alle Header-Elemente. Die Elemente im <head> können Skripte enthalten, die dem Browser anweisen, wo er Stylesheets finden kann, Metainformationen bereitstellen und vieles mehr.

Nachfolgende Tags können in den head-Teil eingefügt werden: <title>, <base>, <link>, <meta>, <script> und <style>.

HTML <title>-Element

Der <title>-Tag definiert den Titel des Dokuments.

Das title-Element ist in allen HTML/XHTML-Dokumenten obligatorisch.

Der title-Element kann:

  • Titel in der Browserleiste definieren
  • Titel, der angezeigt wird, wenn die Seite in die Lesezeichen hinzugefügt wird
  • Seitenüberschrift, die in den Suchmaschinenergebnissen angezeigt wird

Ein vereinfachtes HTML-Dokument:

<!DOCTYPE html>
<html>
<head>
<title>Titel des Dokuments</title>
</head>
<body>
Der Inhalt des Dokuments......
</body>
</html>

HTML <base>-Element

Der <base>-Tag legt die Standardadresse oder das Standardziel (target) für alle Links auf der Seite fest:

<head>
<base href="http://www.codew3c.com/images/" />
<base target="_blank" />
</head>

HTML <link>-Element

Der <link>-Tag definiert das Verhältnis zwischen dem Dokument und externen Ressourcen.

Der <link>-Tag wird am häufigsten zur Verknüpfung von Stylesheets verwendet:

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

HTML <style>-Element

Der <style>-Tag wird verwendet, um Stylingsinformationen für das HTML-Dokument zu definieren.

Sie können im style-Element angeben, wie HTML-Elemente im Browser dargestellt werden sollen:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <meta>-Element

Metadaten (Metadata) sind Informationen über Daten.

Der <meta>-Tag bietet Metadaten über das HTML-Dokument. Metadaten werden nicht auf der Seite angezeigt, sind jedoch für Maschinen lesbar.

Typischerweise wird der meta-Tag verwendet, um die Beschreibung der Seite, Schlüsselwörter, den Autor des Dokuments, das letzte Änderungsdatum und andere Metadaten zu definieren.

Der <meta>-Tag befindet sich immer im head-Element.

Metadaten können in Browsern (wie die Anzeige von Inhalten oder das Neuladen der Seite), Suchmaschinen (Schlüsselwörter) oder anderen Webdiensten verwendet werden.

Schlüsselwörter für Suchmaschinen

Einige Suchmaschinen nutzen die name- und content-Attribute der meta-Elemente, um Ihre Seite zu indexieren.

Die folgenden meta-Elemente definieren die Beschreibung der Seite:

<meta name="description" content="Kostenlose Web-Tutorials zu HTML, CSS, XML" />

Die folgenden meta-Elemente definieren die Keywords der Seite:

<meta name="keywords" content="HTML, CSS, XML" />

Die Funktionen der name und content-Attribute sind es, die Inhalt der Seite zu beschreiben.

HTML <script>-Element

Das <script>-Tag wird verwendet, um Client-Skripte wie JavaScript zu definieren.

Wir werden den script-Element im folgenden Kapitel erläutern.

HTML-Kopflemente

Tag Beschreibung
<head> Definiert Informationen über das Dokument.
<title> Definiert den Dokumenttitel.
<base> Definiert die Standardadresse oder das Standardziel aller Links auf der Seite.
<link> Definiert das Verhältnis des Dokuments zu externen Ressourcen.
<meta> Definiert Metadaten des HTML-Dokuments.
<script> Definiert Client-Skripte.
<style> Definiert Stylinformationen des Dokuments.