Grundstruktur einer HTML-Seite
Damit eine Webseite korrekt dargestellt wird, muss sie einem bestimmten Aufbau folgen – ähnlich wie ein Brief, der immer eine Anschrift, einen Textkörper und eine Unterschrift hat.
HTML-Seiten haben ebenfalls eine Grundstruktur, die dem Browser sagt,
was der Inhalt ist, wie er interpretiert werden soll und wo der sichtbare Bereich beginnt.
In dieser Lektion lernst du, wie jede HTML-Seite aufgebaut ist und was die wichtigsten Bestandteile bedeuten.
1. Der Aufbau im Überblick
Jede HTML-Datei folgt dieser Grundform:
<!DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<h1>Überschrift</h1>
<p>Inhalt der Seite.</p>
</body>
</html>
2. Die Bestandteile im Detail
2.1 Der Dokumenttyp
<!DOCTYPE html>
Teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt.
Ohne diese Zeile könnten manche Browser die Seite im „alten“ Kompatibilitätsmodus anzeigen.
2.2 Das Wurzelelement <html>
<html>
...
</html>
Der gesamte HTML-Code steht zwischen diesen beiden Tags.
Es ist das „äußere Gerüst“ deiner Seite.
Tipp: Du kannst hier auch eine Sprache angeben, z. B.:
<html lang="de">
So weiß der Browser (und Screenreader), dass der Text deutsch ist.
2.3 Der Kopfbereich <head>
<head>
<title>Meine Seite</title>
<meta charset="UTF-8">
</head>
Der <head> enthält Metadaten, also Informationen über die Seite – nicht deren sichtbaren Inhalt.
Typische Elemente:
| Tag | Zweck |
|---|---|
<title> | Text im Browser-Tab |
<meta charset="UTF-8"> | Zeichensatz (Umlaute korrekt darstellen) |
<meta name="description"> | Kurzbeschreibung für Suchmaschinen |
<link> | Verweis auf CSS-Dateien |
<script> | Einbindung von JavaScript |
2.4 Der Hauptteil <body>
<body>
<h1>Willkommen!</h1>
<p>Das ist der sichtbare Inhalt der Seite.</p>
</body>
Alles, was du im Browser siehst, steht im <body>.
Dazu gehören Texte, Überschriften, Bilder, Tabellen, Formulare usw.
3. Ein komplettes Beispiel
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine erste Seite</title>
<meta name="description" content="Dies ist meine erste eigene HTML-Seite.">
</head>
<body>
<h1>Willkommen auf meiner Seite!</h1>
<p>Hier lerne ich die Grundstruktur von HTML.</p>
</body>
</html>
4. Mini-Übung
Erstelle mit einem Texteditor (z. B. Visual Studio Code, Notepad++, Sublime Text) eine Datei namens:
grundstruktur.html
und füge folgendes ein:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Über mich</title>
</head>
<body>
<h1>Über mich</h1>
<p>Ich bin Azubi im Bereich Fachinformatik und lerne HTML.</p>
</body>
</html>
Speichere die Datei, öffne sie im Browser und überprüfe:
Wird der Titel oben im Tab angezeigt?
Sind die Umlaute korrekt?
Wird der Text richtig dargestellt?
5. Häufige Fehler
| Fehler | Ursache | Lösung |
|---|---|---|
| Umlaute werden falsch angezeigt | Zeichensatz fehlt | <meta charset="UTF-8"> einfügen |
| Kein Titel im Browser-Tab | <title> fehlt | <title>Meine Seite</title> hinzufügen |
| Seite zeigt nur Quellcode | Datei nicht als .html gespeichert | Richtige Dateiendung verwenden |
6. Vergleich: Mit vs. Ohne Struktur
Ohne Grundstruktur:
<h1>Hallo Welt!</h1>
<p>Einfacher Text.</p>
→ funktioniert zwar im Browser, ist aber nicht standardkonform.
Mit Grundstruktur:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Beispiel</title></head>
<body><h1>Hallo Welt!</h1><p>Einfacher Text.</p></body>
</html>
→ korrekt, valide, sauber interpretierbar.
7. Fazit
Jede HTML-Seite beginnt mit
<!DOCTYPE html>Der Inhalt ist in
<html>eingeschlossenIm
<head>stehen Infos über die SeiteIm
<body>steht alles SichtbareNur mit dieser Struktur können Browser Seiten richtig darstellen