Dokumentation
HTML

HTML Grundstruktur

DOCTYPE, html, head, body, title, meta charset, viewport und lang-Attribut.

HTML Grundstruktur

DOCTYPE, html, head, body, title, meta charset, viewport und lang-Attribut. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

  • den Grundaufbau eines gültigen HTML-Dokuments schreiben
  • head und body fachlich unterscheiden
  • wichtige Meta-Angaben für Sprache, Zeichensatz und mobile Darstellung setzen

Erklärung

Ein HTML-Dokument beginnt mit dem DOCTYPE. Danach folgt das Wurzelelement <html>. Im <head> stehen Metadaten für Browser, Suchmaschinen und Geräte. Im <body> steht der sichtbare Inhalt.

Das lang-Attribut hilft Screenreadern und Suchmaschinen, die Sprache korrekt zu behandeln. meta charset="UTF-8" verhindert kaputte Umlaute. Der Viewport-Meta-Tag ist die Grundlage für responsive Darstellung auf Smartphones.

Beispiele

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CAP Profilseite</title>
  </head>
  <body>
    <main>
      <h1>Mein CAP-Profil</h1>
      <p>Willkommen auf meiner ersten Webseite.</p>
    </main>
  </body>
</html>

Diese Struktur ist kurz, gültig und enthält alle Grundlagen für eine moderne HTML-Seite.

<html>
  <body>
    <h1>Hallo</h1>
  </body>
</html>

Der Browser zeigt auch unvollständiges HTML an. Für Ausbildung, Prüfung und echte Projekte solltest du trotzdem vollständig und sauber schreiben.

Typische Fehler

  • DOCTYPE weglassen und dadurch unerwartete Browserdarstellung riskieren.
  • Das lang-Attribut vergessen.
  • Alles in den body schreiben, auch Metadaten und CSS-Links.

Best Practices

  • Nutze diese Grundstruktur als Startpunkt für neue Aufgaben.
  • Setze genau ein sinnvolles <title> pro Seite.
  • Prüfe im Browser-Tab, ob der Titel zur Seite passt.

Kleine Übung

Schreibe eine vollständige HTML-Datei für eine Dokumentationsseite zum Thema Passwortsicherheit. Verwende lang, charset, viewport, title, header, main und footer.

Zusammenfassung

HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.

Weiterführende Seiten

Zuletzt aktualisiert: 7. Juni 2026

Formulare

Formularelemente, Labels, Eingabetypen, Validierung und Barrierefreiheit.

Links und Navigation

Links, relative Pfade, Sprungmarken, Navigation und sichere externe Links.