1.4 Das head-Element

Das head-Element enthält Informationen für den Webbrowser bzw. Suchmaschinen.

1.4.1 Zeichenkodierung der Textdatei

Ein HTML-Dokument wird in einer Textdatei gespeichert. Beim Speichern wird stellvertretend für jedes verwendete Zeichen (Buchstaben, Ziffern, Sonderzeichen usw.) ein Binärwort bzw. Bitmuster (eine Folge von Nullen und Einsen) gespeichert. Welches Bitmuster für ein bestimmtes Zeichen steht, regelt die verwendete Zeichenkodierung.

Im World Wide Web wird in der Regel UTF-8 eingesetzt. UTF-8 ermöglicht es neben Umlauten auch andere Sonderzeichen unmittelbar im HTML-Dokument zu verwenden. Unicode-Zeichen, die nicht auf der Tastatur vorhanden sind, können mit Hilfe des Kürzels &# gefolgt von dem jeweiligen Zeichencode und einem abschließendem Strichpunkt eingefügt werden. Zum Beispiel steht → für einen nach rechts weisenden Pfeil (→).

Beim Erstellen einer HTML-Datei muss dazu in dem verwendeten Texteditor als Zeichenkodierung UTF-8 ausgewählt werden. Notepad++ bietet hierfür im Menü Kodierung den Eintrag UTF-8.

Damit auch Umlaute und Sonderzeichen vom Webbrowser korrekt dargestellt werden, geben wir im head-Element mit Hilfe eines meta-Elements an, mit welcher Zeichenkodierung das HTML-Dokument gespeichert wurde. Die verwendete Zeichenkodierung wird dabei dem Attribut charset zugewiesen:

<meta charset="UTF-8">

Das meta-Element ist ein leeres Element. Leere Elemente bestehen ausschließlich aus ihrem Start-Tag und besitzen keinen Inhalt und keinen Schluss-Tag.

Merke: Zeichenkodierung

1.4.2 Titel des HTML-Dokuments

Im head-Element wird Mit Hilfe des title-Elements dem HTML-Dokument ein Titel zugewiesen.

<title>Titel des HTML-Dokuments<title>

Merke: Zeichenkodierung

Dieser Titel wird unter anderem

  • in der Titelleiste des Browsertabs angezeigt,
  • beim Setzen eines Lesezeichens als Name vorgeschlagen,
  • in der Liste der bereits besuchten Webseiten angezeigt sowie
  • von Suchmaschinen ausgewertet und in der Trefferliste angezeigt.
HTML
<!DOCTYPE html>

<html lang="de">

   <head>
      <meta charset="UTF-8">
      <title>Startseite der Kaufmännischen Schule Tauberbischofsheim</title>
   </head>

   <body>

   </body>

</html>
Abb. 1-9: Zwischenstand Startseite index.html Webprojekt KSTBB