HTML <head>-Tag
Das <head>-Tag enthält Metadaten (Dokumenttitel, Zeichensatz, Stylesheets, Links, Skripte), also spezifische Informationen zur Webseite, die nicht direkt für den Benutzer angezeigt werden. Metadaten liefern Browsern und Suchmaschinen technische Informationen über die Webseite.
Der <head>-Bereich enthält die folgenden Elemente:
- Das
<title>-Tag definiert den Titel einer Webseite (erforderlich). Es kann mit dem<h1>-Tag verwechselt werden, sie sind jedoch unterschiedlich. 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 jedoch den Inhalt selbst. - Das
<style>-Tag enthält CSS-Code, der festlegt, wie HTML-Elemente in einem Browser gerendert werden sollen. - Das
<base>-Tag definiert eine absolute (Basis-)URL für alle relativen URLs. - Das
<link>-Tag definiert die Beziehung zwischen dem aktuellen HTML-Dokument und der Ressource, auf die es verweist, 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>-Bereich einer Seite kann verschiedene Arten von<meta>-Elementen enthalten, die name- und content-Attribute aufweisen können. - Das
<script>-Tag enthält ein Skript (meist JavaScript) oder einen Verweis auf eine externe Datei mit Skripten. Dieses Element kann in den<head>-Bereich eingebettet werden. Manchmal ist es jedoch besser, es am Ende des<body>-Bereichs unterzubringen, um die Ladeleistung der Seite zu verbessern. Das<script>-Element mag leer erscheinen, ist es aber nicht. - Das
<noscript>-Tag definiert einen alternativen Text, der angezeigt wird, wenn der Browser keine Skripte unterstützt oder diese vom Benutzer deaktiviert wurden.
Syntax
Das <head>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<head>) und dem schließenden (</head>)-Tag geschrieben.
Beispiel für das HTML <head>-Tag in Kombination mit <title>- und <style>-Tags:
Beispiel für ein HTML <head>-Tag
<!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>Im obigen Beispiel wird das <head>-Tag zusammen mit den <title>- und <style>-Tags verwendet. Das <title>-Tag definiert den Titel des Dokuments, der im Browserfenster angezeigt wird. Im <style>-Tag wird das Styling des Dokuments festgelegt: Der Hintergrund des Dokuments ist hellgrau, der Text in den mit dem <p>-Tag markierten Absätzen ist blau, und die Links innerhalb des <a>-Tags sind rot.
Beispiel für das HTML <head>-Tag in Kombination mit dem <link>-Tag:
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>Ergebnis
In diesem Beispiel wurde ein Link zur Datei style.css im CSS-Ordner bereitgestellt.
Beispiel für das HTML <head>-Tag in Kombination 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>Das <meta>-Tag enthält Metadaten für Suchmaschinen – Meta-Titel und Meta-Beschreibung.
Attribute
In HTML5 besitzt das <head>-Tag keine spezifischen Attribute. Es unterstützt lediglich Globale Attribute und Ereignis-Attribute.
Praxis
Welche der folgenden Elemente können innerhalb des HTML <head>-Tags verwendet werden?