CSS, HTML und Javascript mit {stil}

HTML head – Kopf des Dokuments

HTMl Head: Container für Meta-Tags und title

Unter HTML head liegen die Metadaten (title, meta, style, link, script und base), die Informationen zur Seite liefern, die Darstellung steuern und über die Beziehungen zu anderen Dateien und HTML-Seiten informieren.

Was im head-Tag steht, wird nicht auf der Webseite angezeigt. Die einzige Ausnahme ist das title-Tag, das von den Browsern im oberen Fensterrahmen gezeigt wird.

head wird direkt hinter das <html>-Tag und noch vor dem <body>-Tag gesetzt.

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.

Der Google Styleguide empfiehlt sogar, diese Tags nicht zu setzen. Gewöhnungsbedürftig …

Das kleinste valide HTML-Dokument könnte also wie folgt aussehen:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Lass html, head und body einfach weg</title>

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.
base
setzt die Basis-URL
link
setzt die Links des Dokuments zu Dateien, die eingebunden werden – meist zu CSS-Dateien
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/xhtml/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>
    <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="">.

HTMl Head: Meta-Tags html title meta link style script base article aside audio canvas a blockquote address body head