Das <head>-Element einer HTML Seite dient als Container für Metadaten und befindet sich zwischen dem <html> -Tag und dem <body> -Tag. Es ist nach allen HTML-Standards ein Pflichtelement und darf somit nicht weggelassen werden, da sich darin wesentliche Informationen über das HTML Dokument finden lassen. Innerhalb eines HTML Dokuments darf nur ein <head>-Element vorkommen.
Optimalerweise enthält das Element zumindest Informationen über die Zeichenkodierung, ein <title> -Element und eine kurze Beschreibung der Webseite. Die beiden letzteren sind wichtig, um über Suchmaschinen gefunden zu werden. Sie sollten deswegen möglichst viele Schlagwörter zu den Schwerpunkten der Seite enthalten. Ist die Seite responsiv, sollten auf jeden Fall Informationen über den Viewport (der Anzeigebereich, der für die Darstellung des Inhaltes tatsächlich zur Verfügung steht) angegeben werden, damit der Inhalt auf kleineren Anzeigegeräten nicht einfach nur verkleinert dargestellt wird. Denn dies führt in der Regel dazu, dass der Nutzer dementsprechend hineinzoomen muss.
Falls man ein oder mehrere externe Stylesheets einbinden möchte, so muss dies ebenfalls innerhalb des <head>-Tags geschehen. Dabei sollte beachtet werden, dass es für die Performance besser ist, eine große CSS-Datei zu laden als mehrere kleine. Dies kann ansonsten negative Auswirkungen auf die Zugriffszeiten haben. Das Einbinden von JavaScript-Dateien funktioniert hingegen auch im <body>-Element. Im <head>-Element sollten nur solche JavaScript-Dateien geladen werden, die von der Seite direkt von Beginn an benötigt werden. Diese sollten nach den CSS-Dateien geladen werden.
Beispiel für den Head einer HTML Seite:
<!DOCTYPE html>
<html lang="de">
<head> <meta charset="utf-8"> <title>Der Titel ist sehr wichtig für Suchmaschinen</title>
<meta name="description" content="Dieser Text sollte möglichst viele Schlagwörter enthalten und besteht im Idealfall aus zwei Sätzen" />
<meta name="language" content="de" /> <!-- Bei responsivem Design auf jeden Fall einfügen --> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS Datei --> <link rel="stylesheet" type="text/css" href="/standard.css" />
<!-- JS Datei --> <script type="text/javascript" src="/standard.js"></script> </head>