<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
... die eigentlichen Webinhalte ...
</body>
</html>
Erklärung der einzelnen Zeilen:
<!DOCTYPE html>
Der Tag <!DOCTYPE> definiert über das Attribut "html" den Dokumenttyp und die verwendete HTML-Version. In diesem Fall handelt es sich um HTML5. Somit wird dem Browser mitgeteilt, dass alles was nun folgt nach dem Standard HTML5 dargestellt werden soll. Diese Zeile muss stets die erste Zeile sein - und bitte nur die aktuelle Definition verwenden. Bei älteren Webseiten findet man hier noch kryptische Zeilen wie zum Beispiel:
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html lang="de">...</html>
Der Tag <html> markiert den Beginn eines HTML-Dokuments (Webseite). Mit </html> wird das Ende des Bereichs festgelegt. Das Ende dieses Bereichs ist zugleich das Ende des HTML-Dokumments. Es ist immer die letzte Zeile. Der <html>-Tag soll immer in Verbindung mit dem Attribut "lang" verwendet werden. Das Attribut "lang" steht für englisch "language", also Sprache. Hier bekommt der Brwoser mitgeteilt in welcher Hauptsprache das Dokument verfasst ist. Der Browser braucht diese Information unter anderem für die automatische Silbentrennung. Dieses Attribut dient auch Suchmaschinen dazu, die Seite als Dokument der jeweiligen Sprache zu erfassen. Es ist übliche Praxis sowohl Attribute als auch deren Wert in Kleinbuchstaben zu schreiben.
Es gibt jedoch auch solche Werte für das Attribut: <html>lang="de-AT">
Damit wird dem Browser mitgeteilt dass die Seite in deutscher Sprache ist, jedoch auch österreichische Begriffe vorkommen können (z.B. "Jänner" für Januar). Hier wiederum hat es sich verfestigt, diese erweiterte Angabe zur Sprache in Großbuchstaben anzugeben. Für die Funktion des Attributes ist die schreibweise egal.
Eine Übersicht über die Länderkennungen findet ihr im Glossar - Länderkennungen.
<head>...</head> und
<body>...</body>
Ein HTML-Dokument ist immer in zwei Bereiche unterteilt. Dem Bereich <head> und dem Bereich <body>. Der Bereich <head> enthält keine Informationen für den Besucher der Seite (mit einer Ausnahme, siehe eigenes Kapitel "<head>"). Hier sind primär Informationen hinterlegt für Server, Browser und Suchmaschinen.
Im Bereich <body> befindet sich die eigentlich zu präsentierende Webseite. Hier werden alle Informationen abgelegt welche wir dem Besucher der Seite vermitteln wollen. Während im <head>-Bereich eher klar definierte Namen-Werte-Paare aneinander gereiht werden ist im <body>-Bereich das "Zentrum der Gestaltung und Kreativität".