4.1.4 Elemente im HTML Header

In die Elemente des HTML-Headers können wir Anweisungen für Webserver, Browser oder Suchmaschinen (“Robots”) schreiben. Diese Elemente können außerdem Angaben zum Autor oder Inhalt der Datei beinhalten, oder HTTP-Befehle, wie z.B. eine Weiterleitung zu einer anderen Adresse. Die Elemente des HTML-Headers werden in den Header zwischen <head> und </head> gesetzt.

Suchmaschinen werten die Elemente des HTML-Headers aus, doch für ein gutes Ranking sind sinnvolle und mit dem Inhalt der Webseite übereinstimmende Daten wichtiger als "zu viele Daten". Ein sinnvoller Einsatz von Beschreibungen in den Elementen des HTML-Headers gehört zu einer sauber entwickelten Website unbedingt dazu.

Sechs im Header erlaubte Elemente

  • <title> - enthält den Text, der im Browser-Tab angezeigt wird. Dieser Tag ist wichtig und muss immer vorhanden sein. Er enthält normalerweise keine Attribute.

  • <style> - einbinden von CSS Stylesheet-Angaben, die für die aktuelle Seite gelten. Das Element <style> sollte man nicht "von Hand" in Webseiten einbauen, sondern viele CMS-Systeme verwenden dies, um Anpassung des Designs dynamisch in die Seite einzufügen. <style> enthält normalerweise keine Attribute.

  • <script> - einbinden von JavaScript-Code, der in der aktuellen Seite ausgeführt werden kann. Das Element <script> sollte ebenfalls nicht "von Hand" in Webseiten eingebunden werden und enthält normalerweise keine Attribute. Das <script>-Element ist das Einzige der hier aufgeführten Elemente, das auch im HTML-Body vorkommen darf.
    JavaScript sollte mit <script> am Ende der HTML-Seite geladen werden. Ausnahmen sind Tracking und Analytics, die z.B. das Ladeverhalten messen. Also nur wenn es gute Gründe gibt kann man JavaScript auch im HTML-Header einbinden. Im Kapitel JavaScript gehen wir hierauf noch genauer ein.

  • <base> - definiert die Basis-URL der Webseite und kann von Content-Management-Systemen automatisch eingebunden werden. Die Einbindung von Hand ist nicht zu empfehlen. Das typische Attribut ist href="meineURL.de/aktuelleSeite.html".

  • <link> - einbinden von CSS- und JavaScript-Dateien. Auch kann die aktuelle Webseite in Relation zu anderen Webseiten stehen. Hier zwei Beispiele des Elements <link> mit typischen Attributen
    (a) <link rel# "stylesheet" href"main.css" media# "screen"> Stylesheet einbinden
    (b) <link rel"icon" href# "favicon.ico" type"image/x-icon"> Favicon einbinden. Das "Favicon" ist die kleine Grafik, die im Tab des Browsers angezeigt wird.

  • <meta> - enthält Angaben über den Seiteninhalt (z.B. Autor, Keyword, etc.) für Browser, Webserver oder Suchmaschinen und hat so viele unterschiedliche Attribute, dass wir uns die Attribute und ihre Auswirkungen im nächsten unterkapitel genauer ansehen.

Die Elemente <base>, <link> und <meta>'' sind leere Elemente.

Somit können Sie nun die Zeilen im Header verstehen. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html lang="de">
<head>
    <title>Mein Titel</title>
    <link rel="stylesheet" href="main.css" media="screen">
    <meta charset="utf-8">
    <meta name="author" content="Thomaschewski">
    ...
</head>
<body>
    ...
</body>
</html>

Hinweis

  • Der Titel einer HTML-Datei ist besonders wichtig. Er wird im Browser-Tabs gezeigt, als Lesezeichentitel verwendet und von Suchmaschinen genutzt. Es ist also sinnvoll den Titel aussagekräftig, aber nicht zu lang zu gestalten. Die wichtigsten Wörter sollten am Titelanfang stehen. Für den Titel können alle Zeichen, sowie Sonderzeichen und HTML-eigene Zeichen verwendet werden.

  • Das Favicon ist ebenfalls wichtig. Das Favicon wird heutzutage in vielen verschieden Auflösungen und Namen benötigt: z.B. für iPhone, Android,... siehe: https://wiki.selfhtml.org/wiki/Grafik/Favicon. Es gibt einige Konvertierungsdienste, z.B. https://realfavicongenerator.net/, die ein komplettes Favicon-Package erstellen und die Metadaten gleich mitliefern. Nur für das Favicon hat man dann mehrere Zeilen im HTML-Header.

    1
2
3
4
5
6
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

Aufgabe

Sehen Sie sich die Metadaten dieser HTML-Seite an. Mit der rechten Maustaste können wir in vielen Browsers einen Eintrag "Seitenquelltext anzeigen" aufrufen, der uns den HTML-Sourcecode der aktuellen Webseite anzeigt. Machen Sie dies und sehen Sie sich die Metadaten dieser Webseite genau an. Wiederholen wir die Aufgabe für eine andere Webseite Ihrer Wahl.