HTML-Struktur: Die Bausteine
Verstehen Sie die grundlegende Struktur eines HTML-Dokuments.
HTML-Struktur: Die Bausteine ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
HTML-Struktur: Die Bausteine
Willkommen zur zweiten Lektion! Heute lernen Sie die Struktur eines HTML-Dokuments kennen und erfahren, wie seine Bestandteile zusammenspielen. Stellen Sie sich das als das Skelett einer Webseite vor.
Die Struktur eines HTML-Dokuments
Ein HTML-Dokument hat eine bestimmte Struktur, die der Browser versteht. Es ist wie ein Rezept, das dem Browser mitteilt, was er tun soll.
Die grundlegenden Bestandteile eines HTML-Dokuments sind:
- Doctype-Deklaration: Teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt.
- HTML-Tag: Enthält den gesamten Inhalt der Seite.
- Head: Enthält Informationen über die Seite, beispielsweise den Titel.
- Body: Enthält den für den Benutzer sichtbaren Inhalt.
Wie sieht die Struktur aus?
So sieht die grundlegende Struktur eines HTML-Dokuments aus:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
Die Doctype-Deklaration
Die Deklaration <!DOCTYPE html> steht am Anfang jedes HTML-Dokuments. Sie teilt dem Browser mit, dass er HTML5, die neueste HTML-Version, erwarten soll.
Betrachten Sie sie als den Ausgangspunkt Ihres HTML-Rezepts!
Das HTML-Tag
Das Tag <html> ist der Hauptcontainer für den gesamten Code in Ihrem Dokument. Es teilt dem Browser mit: „Alles hier drin ist HTML.“
So sieht es aus:
<html>
<!-- All other HTML tags go here -->
</html>
Der Head-Bereich
Der Bereich <head> enthält Informationen über Ihre Webseite, die nicht direkt auf der Seite sichtbar sind. Zum Beispiel:
- Titel: Der Text, der im Browser-Tab angezeigt wird.
- Meta-Informationen: Zusätzliche Angaben wie die Beschreibung der Seite.
Beispiel:
<head>
<title>My Cool Web Page</title>
</head>
Der Body-Bereich
Der Bereich <body> enthält alles, was für den Benutzer sichtbar ist, etwa Text, Bilder und Links. Dies ist der Hauptinhaltsbereich.
Beispiel:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Alles zusammenfügen
Hier ist ein vollständiges Beispiel für ein HTML-Dokument mit allen Bestandteilen, die Sie gerade kennengelernt haben:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
Sehr gut!
Herzlichen Glückwunsch! Sie haben die Struktur eines HTML-Dokuments kennengelernt. Jetzt wissen Sie, wie alle Bestandteile zusammenspielen und eine Webseite bilden. In der nächsten Lektion beginnen wir damit, unseren Seiten echten Inhalt hinzuzufügen. Machen Sie sich bereit, Ihr erstes Web-Meisterwerk zu erstellen!
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 16
- Lektionen
- 35
Häufig gestellte Fragen
Ist die Lektion „HTML-Struktur: Die Bausteine“ kostenlos?
Ja — der vollständige Text von „HTML-Struktur: Die Bausteine“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „HTML-Struktur: Die Bausteine“?
Verstehen Sie die grundlegende Struktur eines HTML-Dokuments. Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „HTML-Struktur: Die Bausteine“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Was ist HTML?
- HTML-Struktur: Die Bausteine
- HTML-Tags und -Elemente
- Ihre erste HTML-Seite einrichten