Banner

Was gehört in den HTML-Head?


01. <!DOCTYPE html> 02. <html lang="de"> 03. <head> 04. <title>Beispieltitel</title> 05. <meta charset="UTF-8" /> 06. <meta name="Description" content="Was wir eben so machen." /> 07. <meta name="keywords" content="Dies, das, anderes" /> 08. <link rel="stylesheet" type="text/css" href="style.css" /> 09. <link rel="author" href="humans.txt" /> 10. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 11. <link rel="start" href="/"/> 12. <link rel="copyright" href="/?l=impressum&info=Impressum"/> 13. <link rel="help" href="/?l=kontakt&info=Kontakt"/> 14. <link rel="apple-touch-icon-precomposed" href="/media/ati.png" /> 15. <script type="text/javascript" src="functions.js"></script> 16. </head>


In Zeile 1 steht die Doctypedeklaration. Hier wird das Dokument als HTML-5-Dokument ausgewiesen.

In Zeile 2 wird der HTML-Code eingeleitet und in diesem ersten Element auch gleich die Sprache der Seite angegeben.

In Zeile 3 folgt die head-Einleitung, diese sollte bekannt sein.

In Zeile 4 wird der Titel der Seite definiert. Ein gut gewählter Titel ist wichtig für Suchmaschinen.

In Zeile 5 wird die Codierung des Dokuments hinterlegt. Das erspart Browsern die Codierung selbst zu ermitteln.

Die Description sollte 150-160 Zeichen lang sein. Weniger nutzt das Potential nicht voll aus, mehr wird in der Regel abgeschnitten.

Keywords sollten mit Bedacht gewählt werden. Sie sollten den Inhalt der Seite gut beschreiben, ohne einfach zu wiederholen, was darauf steht. Wird auf der Seite beispielsweise eine schwarze Limonade beworben, könnte in den Keywords das Wort Erfrischungsgetränk zu finden sein.

Im Folgenden können zusätzliche Ressourcen mit eingebunden werden.

Wichtig ist das Stylesheet, welches hiermit Layout und Content voneinander sauber trennt.

Die humans.txt ist eine Möglichkeit ganz formlos "Menschlichkeit" zu hinterlegen. Schreiben Sie, wer sie sind und wem sie danken möchten. Innerhalb der Datei gibt es keine Formatierungsregeln.

Das Shortcuticon ist im Browsertab und den Bookmarks sichtbar.

Die Ressourcen start, copyright und help geben verschiedene Aufgaben von Seiten an.

Zeile 14 ist explizit für Apple-Benutzer vorgesehen. Hier kann ein Bild hinterlegt werden, welches als Link auf einem Apple-Gerät auf dem Desktop abgelegt werden kann.

In Zeile 15 wird eine externe Javascript-Datei hinterlegt, die dynamische Aufgaben innerhalb des HTML-Codes festlegen kann.


Die Reihenfolge innerhalb von head muss NICHT eingehalten werden.


Es können noch deutlich mehr Zeilen in den HTML-Head eingefügt werden. Die subjektiv sinnvollen wurden hier aufgelistet.