Die Struktur eines HTML-Dokuments
HTML ist die Grundlage jeder Website. Beim Abrufen einer Website durch den Browser wird eine Anfrage an einen Webserver geschickt, welcher entweder eine HTML-Dokument erstellt oder ein bereits bestehendes HTML-Dokument dem Borwser bereitstellt. Wenn man mit schreiben von HTML-Code anfängt, ist es wichtig die Grundstruktur eines HTML-Dokuments wie z. B. der index.html zu verstehen. Die index.html-Datei ist das Dokument, was vom Webserver zurückgegeben wird, wenn man eine Website ansurft und NICHT zu einer spezifische URL wie etwas andreas-moor.de/kontakt navigiert.
Jedes HTML-Dokument hat eine Grundstruktur, in welcher sich der Code, bestehend aus HTML-Elementen bzw. – Tags und ihren Attributen, befindet. Die Grundstruktur sieht wie folgt aus:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokumenttitel</title>
</head>
<body>
<!-- Hauptinhalt der Seite -->
<h1>Willkommen zu meiner Webseite!</h1>
<p>Das ist ein einfacher Absatz.</p>
</body>
</html>
<!DOCTYPE html>
An erster Stelle befindet sich das Doctype, eine Deklaration des Dokumententyps. Ja, Überraschung es ist wie zu sehen ist html. Der aktuelle Stand ist, dass HTML in der Version 5 ist, die Zahl aber nicht angegeben wird das HTML als ein lebender Standard gehandhabt wird. Auch ältere Verisonen wie 4. und XHTML wurde spezifische deklariert. Spezifisch benötigt man diese Angabe, damit der Browser weiß, wie er die Website rendern soll.
<html lang=“de“> … </html>
Das html-Element ist das Wurzelelement und ist das hierarchisch gesehen oberste Element und umfasst bzw. klammert den ganzen Inhalt der Webseite. Alle anderen Elemente sind Kinder-Elemente, sie sind also in html verschachtelt. Im Umkehrschluss ist html das Eltern-Element.
Der Browser erkennt, durch das Element, dass alles was sich in dem Element befindet HTML-Code ist.
lang=“de“
Das lang-Atributt gibt im oberen Beispiel dem Browser an, dass die Webseite in der deutschen Sprache verfasst ist. Die Länderkennungen können im IANA-Register gefunden werden.
dir=“ltr“ bzw. dir=“rtl“
Ein weiteres Atributt, das man im html-Element finden könnte, ist das dir-Atributt. Dieses gibt ob die genutzte Sprache von ltr = left-to-right (zum Beispiel eine Sprache wie Deutsch) oder von rtl= right-to-left (zum Beispiel Arabisch) ausgegeben wird.
<head>…</head>
Der Head-Bereich beinhaltet Meta-Informationen über die Webseite, welche beim normalen Aufruf der Webseite für den Nutzer nicht sichtbar sind. Diese können jedoch durch die Developer-Tools (Strg+Shift+I) dargestellt werden.
<body>…</body>
Das body-Element beinhaltet alle im Browser sichtbaren Elemete der Webseite. Alles was sich auf einer Webseite befindet kommt folglich hier rein: Überschriften, Paragrafen, Bilder, Links etc.
Zusammenfassung
Die Grundstruktur eines HTML-Dokuments ist relativ easy. Wir merken uns, dass es mit der Deklaration startet, das html-Element als Wurzelelement beinhaltet, welches head und body enthält.
>> Die Funktion des Head-Bereichs einer Webseite
<< Pausenloser Autopilot oder doch lieber Pause vom Autopilot?