Verwenden Sie nur diesen DOCTYPE. Damit machen Sie dem Browser klar, dass
Sie HTML in der Version 5 verwenden.
HTML hat sich in den letzten 30
Jahren stetig verändert. Deshalb gibt es verschiedene Versionen und dazu passende
DOCTYPE Deklarationen.
Jedes HTML-Dokument verwendet ein paar grundlegende Elemente. Diese strukturieren noch nicht den Inhalt der Webseite. Sie dienen als Rahmen für den eigentlichen Inhalt und definieren ein paar Metainformationen. Das Grundgerüst einer Webseite sieht wie folgt aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Reiseblog von Bob</title>
</head>
<body>
<!-- Inhalt -->
</body>
</html>
Wir notieren alle Elemente aus diesem Grundgerüst für jede Webseite in dieser Reihenfolge.
DOCTYPE
Der DOCTYPE definiert, welche Sprache (im Sinne von Auszeichnungssprache
)
für die Webseite verwendet wird. Wir notieren ihn in der ersten Zeile des Dokuments.
<!DOCTYPE html>Links
The Root element: <html>
Das html-Element ist das erste Element im Dokument. Es beinhaltet
alle anderen Elemente. Es wird deshalb auch als Wurzelelement (eng. root
element) bezeichnet. Es gibt pro Dokument exakt ein html-Element.
<html>
<!-- Alle anderen HTML-Elemente -->
</html>
Links
The Document Metadata element: <head>
Das head-Element beinhaltet Informationen, die nicht direkt für den
Benutzer im Browser sichtbar sind (mit einer Ausnahme). Im head-Element
notieren wir deshalb keinen Inhalt, sondern Metainformationen. Diese sind
nicht für den Benutzer gedacht, sondern werden durch Computerprogramme
verarbeitet. Typischerweise werden im head-Element die (Zeichen-)
Codierung des Dokuments definiert, Styles für grafische Anpassungen verlinkt,
Angaben zur Darstellung auf Mobilgeräten definiert oder suchmaschinenfreundliche
Beschreibungen der Webseite notiert.
<head>
<!-- Metainformationen, Titel, Links zu Style und/oder Skriptdateien -->
</head>
Das
head-Element darf nicht mit dem header oder thead-Element
verwechselt werden!
Links
The metadata element: <meta>
Das meta-Element erlaubt Metainformationen über die Webseite zu definieren. Es gibt
verschiedene Metainformationen, die man angeben kann. Im Grundgerüst wird das meta-Element
dazu benutzt, um die Zeichencodierung des Dokuments anzugeben. Damit weiss der Browser, wie er die
Binärdaten decodieren muss. Wir müssen sicherstellen, dass das Dokument auch wirklich mit der
spezifizierten Zeichenkodierung gespeichert wurde.
<meta charset="UTF-8">- Das
meta-Element hat keinen Closing-Tag! - Verwenden Sie immer
UTF-8als Zeichencodierung.
Links
The Document Title element: <title>
Das title-Element definiert den Titel der Webseite. Obwohl das Element nicht innerhalb
des
body-Elements notiert wird, benutzt der Browser den Titel zur Anzeige im Browser-Tab.
Es
wird auch von Suchmaschinen für die Trefferanzeige benutzt oder von Screenreadern vorgelesen. Es
empfiehlt sich, möglichst für jede Webseite einen passenden Titel zu vergeben.
<title><!-- Titel der Webseite --></title>
Häufiger Tippfehler:
title (eng.) nicht Titel (dt.)!
Links
The Document Body element: <body>
Das body-Element beinhaltet alle Informationen, die für den Benutzer sichtbar sein
sollen.
Es
gibt nur ein body-Element pro Dokument und es sollte nach dem head-Element
das
zweite Element innerhalb des html-Elements sein.
<body>
<!-- Alle sichtbaren Inhalte -->
</body>
Das
body-Element darf nicht mit dem tbody-Element
für Tabellen verwechselt werden!