Lädt...

HTML Grundlagen

In den früheren Lektionen haben Sie HTML kennengelernt und einen Editor gewählt. Jetzt bauen Sie eine vollständige Basiseite: das Standardgerüst, mit dem jede moderne HTML-Datei beginnen sollte, plus etwas sichtbaren Inhalt.

Was ist ein grundlegendes HTML-Dokument?

Ein grundlegendes HTML-Dokument ist eine Textdatei mit fester äußerer Struktur. Darin platzieren Sie den Inhalt, den Besucher sehen. Fast jede Seite in diesem Kurs nutzt dasselbe äußere Gerüst und ändert nur den Inhalt im body.

Direkte Antwort: das nötige Gerüst

Eine moderne Basiseite enthält diese Teile in dieser Reihenfolge:

<!DOCTYPE html> — erklärt ein HTML5-Dokument
<html> — das Wurzelelement, das die ganze Seite umschließt
<head> — Informationen über die Seite (nicht der sichtbare Hauptartikel)
<title> im head — Text für Browser-Tab und Lesezeichen
<body> — der Inhalt, den Menschen auf der Seite sehen

Grundlegendes HTML-Dokument

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<h1>Das ist eine Überschrift</h1>
<p>Das ist ein Absatz.</p>
</body>
</html>

Das Beispiel Zeile für Zeile

Der Doctype muss zuerst kommen, damit der Browser moderne HTML-Regeln nutzt
Alles andere liegt in <html> ... </html>
<head> hält den Titel; Besucher sehen ihn vor allem im Tab-Namen
<body> hält Überschrift und Absatz im Seitenbereich
Die meisten Elemente brauchen ein passendes schließendes Tag mit Schrägstrich, z. B. </p>

Head vs. Body

Stellen Sie sich <head> als Backstage-Notizen und <body> als Bühne vor. Suchmaschinen und Browser nutzen Titel und andere Head-Daten. Leser schauen auf den Body. Den Hauptartikeltext nur in den Head zu legen ist ein typischer Anfängerfehler.

Verschachtelung und Reihenfolge

HTML-Elemente verschachteln sich: Ein Element kann in einem anderen liegen. Halten Sie Tags in einem klaren Baum. Schließen Sie innere Tags vor äußeren. Für das Basisgerüst behalten Sie diese Reihenfolge: Doctype, dann html, dann head (mit title), dann body.

Selbst ausprobieren

Erstellen Sie eine Datei namens basic.html in Ihrem Editor
Fügen Sie das Beispiel oben ein
Ändern Sie Titeltext und Überschrift
Speichern Sie und öffnen Sie die Datei im Browser
Prüfen Sie nach Speichern und Aktualisieren, dass Tab-Titel und Seitenüberschrift beide aktualisiert sind

Kleine Tipps, die später Zeit sparen

Bevorzugen Sie Kleinbuchstaben bei Tagnamen (<p>, nicht <P>) für modernen HTML-Stil
Rücken Sie verschachtelte Zeilen ein, damit Sie sehen, welche Tags zusammengehören
Behalten Sie in frühen Beispielen ein klares <h1> als Hauptüberschrift
Charset, Links, Bilder und mehr kommen später; meistern Sie zuerst dieses Gerüst

Häufige Fehler

<!DOCTYPE html> oben vergessen
Tags in falscher Reihenfolge schließen (z. B. html vor body)
Die sichtbare Überschrift nur in <head> legen
Ohne .html-Endung speichern und sich über seltsames Browserverhalten wundern
Ein öffnendes Tag ohne schließendes Pendant schreiben, wenn beides nötig ist

Zusammenfassung

Eine grundlegende HTML-Seite nutzt Doctype, html, head, title und body
Der Titel erscheint vor allem im Browser-Tab
Sichtbarer Inhalt gehört in den Body
Elemente verschachteln sich; innere Tags zuerst schließen
Üben Sie mit einer kleinen Datei und Browser-Aktualisierung
Spätere Lektionen fügen mehr Elemente auf demselben Gerüst hinzu

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache