0Pricing
Frontend Academy · Lektion

Dokumentstruktur: DOCTYPE, html, head, body

Schreiben Sie ein gültiges HTML5-Dokument von Grund auf: die DOCTYPE-Deklaration, das html-Stammelement, den head für Metadaten und den body für Inhalte.

Dokumentstruktur: DOCTYPE, html, head, body ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Jedes HTML-Dokument hat dasselbe Grundgerüst

Ein gültiges HTML5-Dokument beginnt immer mit einer DOCTYPE-Deklaration, enthält ein html-Root-Element und darin einen head-Bereich für Metadaten sowie einen body-Bereich für sichtbare Inhalte. Das Verständnis dieser Struktur ist der erste Schritt.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Die DOCTYPE-Deklaration

<!DOCTYPE html> ist kein HTML-Tag, sondern eine Anweisung an den Browser, die Seite im Standards Mode zu rendern. Ohne diese Deklaration wechseln Browser in den „Quirks Mode“, der Seiten uneinheitlich darstellt. Setzen Sie sie immer in Zeile 1.

Das &lt;html&gt;-Element und das lang-Attribut

Das <html>-Element ist die Wurzel des Dokuments. Fügen Sie ein lang-Attribut hinzu, um die Sprache der Seite anzugeben. Bildschirmleseprogramme verwenden es, um die richtige Aussprache-Engine auszuwählen, und Suchmaschinen nutzen es für lokalisierte Ergebnisse.

<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">

Das &lt;head&gt;-Element

Der <head> enthält Metadaten – Informationen über die Seite statt über den Seiteninhalt selbst. Nichts im head ist für Benutzer direkt sichtbar, beeinflusst jedoch, wie der Browser und Suchmaschinen die Seite behandeln.

charset- und viewport-Meta-Tags

<meta charset="UTF-8"> weist den Browser an, die Datei als UTF-8 zu dekodieren, wodurch alle internationalen Zeichen unterstützt werden. <meta name="viewport"> sorgt dafür, dass responsives Design auf Mobilgeräten funktioniert.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Das &lt;title&gt;-Element

Der Text von <title> erscheint im Browser-Tab, in Lesezeichen und in den Ergebnissen von Suchmaschinen. Halten Sie ihn kurz (50–60 Zeichen), aussagekräftig und setzen Sie den Markennamen ans Ende.

<title>Getting Started with HTML | CoddyKit</title>

CSS und Schriftarten verknüpfen

Verknüpfen Sie externe Stylesheets mit <link> innerhalb des head. Verwenden Sie rel="stylesheet" und das korrekte href. Auch Google Fonts und andere Schriftartendienste werden auf diese Weise verknüpft.

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

Das &lt;body&gt;-Element

Alles, was auf der Seite sichtbar ist, befindet sich innerhalb von <body>: Überschriften, Absätze, Bilder, Schaltflächen, Formulare und Skripte. Der body enthält das, was Benutzer sehen und womit sie interagieren.

Script-Tags: Wo sie platziert werden

Platzieren Sie <script src="app.js" defer></script> im <head>. Das defer-Attribut lädt das Skript parallel herunter und führt es aus, nachdem das HTML vollständig geparst wurde – die sicherste Standardwahl.

<head>
  <script src="app.js" defer></script>
</head>

Kommentare in HTML

Verwenden Sie <!-- comment -->, um Ihrem HTML Notizen hinzuzufügen. Kommentare werden Benutzern nicht angezeigt, sind aber in der Quelltextansicht sichtbar. Nutzen Sie sie, um Absichten zu erläutern, Abschnitte zu markieren oder Code während des Debuggings vorübergehend zu deaktivieren.

<!-- Navigation section -->
<nav>
  ...
</nav>
<!-- End navigation -->

Validierung: Der W3C Validator

Fügen Sie Ihr HTML in validator.w3.org ein, um es auf Fehler zu prüfen. Valides HTML verringert browserübergreifende Inkonsistenzen, hilft Bildschirmleseprogrammen, die Seite korrekt zu interpretieren, und zeugt von professioneller Sorgfalt.

Schnelltest

Wo sollte das <meta charset="UTF-8">-Tag platziert werden?

Rückblick: Das HTML-Dokumentgerüst

Jede HTML-Datei benötigt: → → (charset, viewport, title, CSS-Links) → (alle sichtbaren Inhalte). Dieses Grundgerüst gewährleistet browserübergreifende Konsistenz, Barrierefreiheit und eine korrekte SEO-Indexierung.

Häufig gestellte Fragen

Ist die Lektion „Dokumentstruktur: DOCTYPE, html, head, body“ kostenlos?

Ja — der vollständige Text von „Dokumentstruktur: DOCTYPE, html, head, body“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dokumentstruktur: DOCTYPE, html, head, body“?

Schreiben Sie ein gültiges HTML5-Dokument von Grund auf: die DOCTYPE-Deklaration, das html-Stammelement, den head für Metadaten und den body für Inhalte. Du übst Frontend Academy 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy 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 1 von 4.

Wie lange dauert die Lektion „Dokumentstruktur: DOCTYPE, html, head, body“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-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

  1. Dokumentstruktur: DOCTYPE, html, head, body
  2. Semantische Tags: header, nav, main, article, footer
  3. Text, Bilder, Links und Listen
  4. Formulare: input, label, button
← Zurück zu Frontend Academy