Grundstruktur einer HTML-Seite

Diese Lektion behandelt den Aufbau einer vollständigen HTML-Seite. Ziel ist zu verstehen, welche Elemente in jedem HTML-Dokument vorhanden sein sollten und wie sie organisiert sind.

1. HTML-Dokumenttyp und Root-Element

Jedes HTML-Dokument beginnt mit der Deklaration des Dokumenttyps und einem Root-Element <html>.

<!DOCTYPE html>
<html lang="de">
  ...
</html>

Die Deklaration <!DOCTYPE html> sorgt dafür, dass der Browser den HTML5-Standard verwendet.

2. Kopfbereich: <head>

Der Kopfbereich enthält Metainformationen über das Dokument, die nicht direkt angezeigt werden.

<meta charset="utf-8"> – Zeichenkodierung
<meta name="viewport" content="width=device-width, initial-scale=1"> – responsive Darstellung
<title> – Titel im Browser-Tab
<link rel="stylesheet" href="style.css"> – CSS-Datei einbinden
<link rel="icon" href="favicon.ico"> – Favicon

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Webseite</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
</head>

3. Körperbereich: <body>

Der <body>-Bereich enthält alle sichtbaren Inhalte der Webseite: Texte, Bilder, Links, Tabellen, Formulare usw.

<body>
  <h1>Willkommen</h1>
  <p>Dies ist ein Beispieltext.</p>
  <a href="seite2.html">Zur nächsten Seite</a>
</body>

4. Strukturprinzipien

HTML ist hierarchisch: <html><head></head><body></body></html>
Elemente können verschachtelt sein
Semantik beachten: Überschriften, Absätze, Listen, Artikel, Sektionen

5. Kommentare

Kommentare werden nicht angezeigt und helfen bei der Dokumentation:

<!-- Dies ist ein Kommentar -->

6. Zusammenfassung

Jede HTML-Seite beginnt mit <!DOCTYPE html> und <html>
<head> enthält Metainformationen und Verweise auf CSS/JS
<body> enthält alle sichtbaren Inhalte
Semantische Strukturierung ist wichtig
Kommentare dienen der Dokumentation