CSS, HTML und Javascript mit {stil}

HTML head – Kopf der Webseite

HTML Head Tag

Unter HTML head liegen die Metadaten (title, meta und base), die Informationen zur Seite liefern, die Darstellung steuern und über die Beziehungen zu anderen Dateien (style, link, script) 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.

18-12-15 SITEMAP

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="">.