HTML5 Dokument-Kopfdaten




Bei den Kopfdaten handelt sich um wichtige Anweisungen für den Web-Browser, für Robots von Suchmaschinen und für den Webserver.

Im Kopfbereich eines HTML5-Dokumentes können unter anderem folgende Kopfdaten stehen:

  • Der Titel Des HTML-Dokumentes
  • Metaangaben als nützliche Anweisungen für Webserver, Browser und Suchmaschinen-Programme.
  • Logische Beziehungen und Verknüpfungen mit anderen Ressourcen, wie beispielsweise zu Stylesheets in externen Dateien.
  • Dokumentweite Stylesheet-Definitionen.
  • Bereiche für Scriptsprachen wie z. B. Javascript.
Beispiel einer kompletten HTML5-Datei mit Kopfdaten
<!doctype html>
   <html>

      <head>
         <title>Titel des Dokumentes</title>
         <meta name="description" content="Kurze Inhaltsbeschreibung">
         <meta name="date" content="2013-03-16">
         <meta name="author" content="Perry Rhodan">
         <meta name="keywords" content="Schlüsselwörter, durch, Komma, getrennt">
         <meta name="language" content="de">
         <meta name="organization" content="Rudis Hackstudio">
         <meta charset="utf-8">
         <meta http-equiv="content-type" content="text/html; charset=utf-8">
         <meta name="robots" content="noindex">
         <link rel="stylesheet" type="text/css" href="html5_style.css">
         <style type="text/css">
            h1 {font-family: Arial, Helvetica, sans-serif;
                 font-size: 20px;
                 color: #DD9900;
                 line-height: 1.5em;}
         </style>
         <script type="text/javascript">
            function witz()
                {
                 alert(unescape("Was ist eine Bohrinsel?\n Die Bohrinsel ist ein Erholungsparadies f%FCr Zahn%E4rzte."));
                }
         </script>
      </head>

      <body style="font-family:Arial">
         <h1>Wenn du auf den Link klickst, erzähl ich dir einen Witz:</h1>
         <a href="javascript:witz();">Witz</a>
      </body>
   </html>
So sieht das aus:

Den Quelltext können Sie in eine leere HTML-Datei kopieren und mit dem Browser aufrufen.

Erläuterung:

<title>Titel des Dokumentes</title>
Jedes HTML-Dokument muss einen Titel haben. In einem Web-Projekt mit mehreren Dokumenten, sind eindeutige Titelnamen zu vergeben. Titelnamen sollten aussagekräftig sein.

<meta name="description" content="Kurze Inhaltsbeschreibung">
Kurzbeschreibung des Seiteninhalts. Dieser Text wird häufig von Suchmaschinen gelistet.

<meta name="date" content="2013-03-16">
Das Erstellungsdatum des Dokumentes.

<meta name="author" content="Perry Rhodan">
Das Verfasser des Dokumentes, bzw. der Name der Person, die inhaltlich für den Text verantwortlich ist.

<meta name="keywords" content="Schlüsselwörter, durch, Komma, getrennt">
Möglichst mehrere zutreffende Schlüsselwörter, die im Dokumententext vorkommen. Schlüsselwörter sind wichtig für Suchmaschinen.

<meta name="language" content="de">
Diese Angabe sollte bei Dokumenten mit deutschen Texten nicht fehlen.

<meta name="organization" content="Rudis Hackstudio">
Hier steht die Firma oder die Organisation in der Das Dokument erstellt wurde.

<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Angaben zur Zeichenkodierung. Die erste einfache HTML5-Angabe wird von älteren Browsern nicht erkannt. Deshalb sollte man auch die ältere Notationsweise angeben. Beide Angaben müssen jedoch die gleiche Zeichenkodierung enthalten.

<meta name="robots" content="noindex">
Diese Angabe ist für Robot-Programmen von Suchmaschinen wichtig.
noindex bedeutet, dass Suchmaschinen den Seiteninhalt nicht auslesen.
nofollow bedeutet, dass Suchmaschinen den sich im Dokument befindlichen Hyperlinks nicht folgen.
noindex, nofollow Beide Angaben sind möglich.
follow bedeutet, dass Suchmaschinen den sich im Dokument befindlichen Hyperlinks folgen.

<link rel="stylesheet" type="text/css" href="html5_style.css">
html5_style.css Eine externe CSS-Stylesheet-Datei (hier mit dem Namen html5_style.css)wird eingebunden.

<style type="text/css">
h1 {font-family: Arial, Helvetica, sans-serif;font-size: 20px;color: #DD9900;line-height: 1.5em;}
</style>
So werden Dokumentweite Stylesheets in einem Style-Bereich eingefügt.

<script type="text/javascript">
function witz()
{
alert(unescape("Was ist eine Bohrinsel?\n Die Bohrinsel ist ein Erholungsparadies f%FCr Zahn%E4rzte."));
}

</script>
In einem Script-Bereich wird ein Javascript eingefügt.
Ein Text mit Sonderzeichen wird in einer Alert-Box angezeigt. Dazu gibt es einen nützlichen Link:
Sonderzeichen in Alert- und Confirmmeldungen

Wer mehr über HTML5 Kopfdaten wissen will, findet weitere Informationen im:
HTML 5 Handbuch von Stefan Münz und Clemens Gull
oder bei
SELFHTML: HTML-Kopfdaten