head und body
Was im head-Tag steht, wird nicht auf der Webseite angezeigt. Die einzige Ausnahme ist das title-Element, das von den Browsern im oberen Fensterrahmen gezeigt wird.
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>
Die wichtigsten Elemente für HTML head:
<title>Seitentitel</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8">
Elemente des head-Tags
An den Elementen für den head-Bereich des HTML-Dokuments hat sich seit vielen Jahren nichts geändert. html-, body- und head-Tag müssen sogar eigentlich nicht explizit eingesetzt werden. Aber diese Tags sind so klein und verschaffen den Suchmaschinen und den Browsern 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 Sprache der Webseite und den Viewport für die kleinen Monitore der mobilen Geräte. |
| style | setzt lokale CSS-Regeln für das aktuelle Dokument |
| script | Scripte werden bevorzugt innerhalb des head-Elements geladen. Damit sie erst auf HTML-Elemente zugreifen, wenn diese in der Seite geladen sind, werden sie mit den Attributen defer oder async notiert. |
HTML-Tags für HTML Head
<!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 rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<base />
<style>
.top-menu { height: 46px; 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>
Damit die Seite im Browserfenster so schnell wie möglich aufgebaut wird, werden CSS-Dateien vor script-Tags geladen (weil das CSS wichtiger für den Seiteaufbau ist), gefolgt von Metadaten wie <meta property="og:site_name" content="">.
