Das head-Element der Webseite wird direkt hinter das <html>-Tag und noch vor dem <body>-Tag gesetzt.
<!DOCTYPE html> <html lang="de"> <head> … </head> <body> … </body> </html>
Elemente des head-Tags
An den Elementen für den head-Bereich des HTML-Dokuments hat sich in HTML5 nichts geändert, aber im HTML5-Standard müssen html, body und head-Tag nicht explizit gesetzt werden. Aber diese Tags sind so klein und verschaffen uns einen besseren Einblick ins Markup der HTML-Datei, dass sie nicht fehlen sollten.
Das head-Element kann die folgenden HTML-Tags in beliebiger Reihenfolge enthalten:
- title
- Titel des Dokuments – das einzige Tag, das unterhalb des head-Tags erforderlich ist und gleichzeitig die wichtigste Überschrift der Webseite.
- base
- setzt die Basis-URL
- link
- setzt die Links des Dokuments zu Dateien, die eingebunden werden – meist zu CSS-Dateien, aber z.B. auch zum Favicon der Webseite.
- meta
- setzt Meta-Informationen wie Schlüsselwörter und Beschreibungen, den Zeichensatz für die Webseite
- style
- setzt lokale CSS-Regeln für das aktuelle Dokument
- script
- Früher wurden auch Scripte grundsätzlich innerhalb des head-Tags geladen. Heute sitzen Scripte wie Javascript bevorzugt am Ende des body-Tags, damit sie erst geladen werden, wenn das HTML-Dokument komplett ins Browserfenster geladen wurde.
HTML-Markup für head
Vorlage für HTML-Seiten
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML head | mediaevent.de</title>
<link rel="canonical" href="https://www.mediaevent.de/html/head.html" />
<meta name="description" content="…" />
<meta name="viewport" content="…">
<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500'>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<base />
<style>
.top-menu { height: 46px; background: hsl(225,33%,55%); width:100% }
</style>
</head>
<body>
</body>
</html>
Es gibt keine vorgeschriebene Reihenfolge für die Tags innerhalb des head-Tags. Es ist sinnvoll, den Zeichensatz zuerst zu setzen (auch wenn der Zeichensatz schon vom Server geliefert wird), dann das title-Tag, danach das Metatag für den Viewport.
<head> <meta charset="utf-8"> <style> … </style> <script> … </script> </head>
Quelle: CSS and javascript order
Damit die Seite im Browserfenster so schnell wie möglich angezeigt werden kann, sollten die CSS-Dateien vor script-Tags geladen werden (weil das CSS wichtiger für den Seiteaufbau ist), gefolgt von Metadaten wie <meta property="og:site_name" content="">.