Das Tag <head> enthält die Hauptelemente des HTML-Dokuments, die den Suchmaschinen und Browsern technische Information über die Webseite mitteilen (Metainformatione, Stile, Links usw.). Den Benutzern wird diese Information nicht angezeigt.
Syntax
Der Inhalt des Tages wird zwischen den Start- (<head>) und Endtags (</head>) geschrienen.
Das Tag <head> kann folgende Elemente enthalten:
- Das Tag <title> definiert die Fensterkopfzeile der Webseite (obligatorisches Element).
- Das Tag <style> teilt mit, dass im HTML-Dokument ein CSS-Code verwendet wird.
- Das Tag <base> definiert absolute Grund-URL für alle relative URL-Adressen.
- Das Tag <link> definiert die Beziehungen zwischen dem aktuellen HTML-Dokument und der URL, worauf es basiert oder enthält einen Link zur externen Stiltabelle.
- Das Tag <meta> teilt zusätzliche Information (Metadaten) über HTML-Dokument.
- Das Tag <script> enthält Skript (in der Regel in der Sprache JavaScript) oder weist auf externe Datei mit der Skript.
- Das Tag <noscript> definiert einen alternativen Text, der angezeigt wird, wenn der Browser keine Skripte unterstützt oder der Benutzer hat diese selbst ausgeschaltet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style type="text/css">
body {
background-color: #d3d3d3;
}
p {
color: #1c87c9;
}
a {
color: red;
}
</style>
</head>
<body>
<p>Absatz</p>
<a>Link</a>
</body>
</html>Ergebnis
Im angegebenen Beispiel wird das Tag <head> mit den Tags <title> und <style> verwendet. Das Tag <title> definiert den Titel des Dokuments, das im Browserfenster angezeigt wird. Im Tag <style> wird der Style des Dokuments definiert: Der Hintergrund des Dokuments ist orange, der Text in den Abschnitten, die mit dem Tag <p> markiert sind, ist blau, und die Links innerhalb des Tages <a> sind pink.
Beispiel
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<p>Der Inhalt der Seite</p>
</body>
</html>Ergebnis
In diesem Beispiel haben wir einen Link auf das Dokument style.css im CSS-Ordner bereitgestellt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML und CSS Bücher">
<meta name="description" content="HTML und CSS Basics für Anfänger">
<meta http-equiv="refresh" content="30">
</head>
<body>
<p>Der Inhalt der Seite</p>
</body>
</html>Ergebnis
Das Tag <meta> enthält Metadaten für Suchmaschinen - Meta-Titel, Meta-Beschreibung.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| profile | URL | Es definiert die URL von Metadaten.
Es wird in HTML5 nicht unterstützt. |
| media | media_query | Es gibt an, für welches Media/Gerät die Mediaressource optimiert ist. Neu in HTML5. |
| type | text/css | Es gibt den Mediatyp des Tages <style> an. Neu in HTML5. |
Das Tag <head> unterschtützt Globale Attribute und Globale Eventhandler.
Übe dein Wissen
