Lektion 1 von 13 8 Min. Einsteiger Zur Übung Mit Codebeispiel

Struktur

Jede HTML-Seite braucht ein klares Grundgerüst. Browser, Suchmaschinen und Screenreader verlassen sich darauf.

Ansicht

Verstehen

Lies die Kernidee und das Beispiel.

Prüfen

Beantworte die Aktiv-Checks.

Anwenden

Setze die Transferaufgabe um.

Lerninhalt

Verstehen & anwenden

Grundgerüst

Der doctype steht ganz oben und aktiviert den modernen HTML-Modus.

Das html-Element umschliesst die gesamte Seite. Das lang-Attribut hilft Browsern und assistiven Technologien.

Im head stehen technische Informationen. Im body steht alles, was Nutzer im Browser sehen.

!DOCTYPE htmlhtmlheadbody

Minimale HTML-Seite

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <main>
      <h1>Hallo HTML</h1>
      <p>Hier steht sichtbarer Inhalt.</p>
    </main>
  </body>
</html>

Head-Bereich

Der title erscheint im Browser-Tab und ist wichtig für Orientierung.

Meta-Tags beschreiben Zeichensatz, Viewport, Beschreibung oder Autor.

link und script verbinden HTML mit CSS, Icons und JavaScript.

titlemetalinkscript

Semantisches Layout

Semantische Tags beschreiben die Rolle eines Bereichs, statt nur ein neutrales div zu verwenden.

header, nav, main, section, article, aside und footer machen die Seitenstruktur lesbarer und barriereärmer.

headernavmainsectionarticleasidefooter

Semantische Bereiche

<body>
  <header>...</header>
  <nav aria-label="Hauptnavigation">...</nav>
  <main>
    <article>...</article>
    <aside>...</aside>
  </main>
  <footer>...</footer>
</body>

Vertiefung

Semantik ist mehr als Ordnung

Ein sauberes Grundgerüst hilft nicht nur dem Browser, sondern auch Suchmaschinen, Screenreadern und deinem zukünftigen Ich. Landmarken wie header, nav, main und footer machen die Seite navigierbar, ohne dass jemand jede Klasse kennen muss.

Verwende genau ein main pro Seite. Überschriften folgen der inhaltlichen Hierarchie, nicht der gewünschten Schriftgröße. Für rein optische Anpassungen ist CSS zuständig.

Seite mit Landmarken

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio</title>
  </head>
  <body>
    <header>
      <nav aria-label="Hauptnavigation">...</nav>
    </header>
    <main>
      <h1>Meine Projekte</h1>
      <section aria-labelledby="projekte">...</section>
    </main>
    <footer>...</footer>
  </body>
</html>

Merksatz: Struktur beschreibt Bedeutung. Ein einziges main und eine klare Überschriftenfolge sind die Basis für Barrierefreiheit.

Übungsaufgabe

Semantische Portfolio-Seite

Baue das Grundgerüst einer Portfolio-Seite mit Kopfbereich, Navigation, Hauptinhalt und Fuß. Der Hauptinhalt enthält eine Überschrift und zwei Abschnitte.

Das soll dein Programm können

doctype, html mit lang="de", head mit charset und viewport
header, nav, main und footer
Genau ein main und eine h1
Zwei section-Bereiche mit eigenen h2
Ein Skip-Link zum Hauptinhalt

Dein Code

Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.

Dein Code wird automatisch auf diesem Gerät gespeichert.

Hinweis anzeigen

Der Skip-Link zeigt auf die ID des main-Bereichs: <a href="#inhalt">Zum Inhalt</a>. Setze main id="inhalt" tabindex="-1".

Lösung anzeigen

Semantische Portfolio-Seite.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio</title>
  </head>
  <body>
    <a href="#inhalt">Zum Inhalt springen</a>
    <header>
      <nav aria-label="Hauptnavigation">
        <a href="#projekte">Projekte</a>
      </nav>
    </header>
    <main id="inhalt" tabindex="-1">
      <h1>Mein Portfolio</h1>
      <section aria-labelledby="projekte">
        <h2 id="projekte">Projekte</h2>
        <p>Hier stehen ausgewählte Arbeiten.</p>
      </section>
      <section aria-labelledby="ueber-mich">
        <h2 id="ueber-mich">Über mich</h2>
        <p>Kurz zu meinem Hintergrund.</p>
      </section>
    </main>
    <footer>© 2026</footer>
  </body>
</html>

Warum funktioniert das?

Die Landmarken machen die Seite für assistive Technologien navigierbar. Der Skip-Link ist das erste fokussierbare Element und überspringt die Navigation.

Aufgabe geschafft

Aktiv-Check

Teste dein Verständnis

1/6

Erkennen: Welcher Abschnitt passt?

Welcher Abschnitt passt zu diesen Begriffen?

!DOCTYPE htmlhtmlheadbody

Tipp: Erst erinnern, dann prüfen. Fehler sind Teil des Lernens.

Transfer

Mini-Projekt: Deine Lieblingsseite

Baue eine kleine Seite über ein Thema, das dich wirklich interessiert. Nutze die Struktur, die du in dieser Lektion gelernt hast.

Bild im Kopf

HTML ist das Skelett einer Webseite. Es legt fest, welche Teile es gibt und welche Bedeutung sie haben. CSS ist die Kleidung, JavaScript die Muskeln.

Lernziele

Du erkennst die Aufgabe von doctype, html, head und body.
Du unterscheidest sichtbare Inhalte von technischen Seitendaten.
Du nutzt semantische Layout-Tags für verständliche Seitenstruktur.

Begriffe kurz erklärt

!DOCTYPE html: Die erste Zeile einer HTML-Datei. Sie sagt dem Browser, dass modernes HTML verwendet wird.
html: Das Wurzelelement. Es umschließt die gesamte Seite und trägt meist das lang-Attribut.
head: Unsichtbarer Kopfbereich mit Metadaten, Titel, Stylesheets und Skripten.
body: Alles, was im Browser sichtbar ist, steht im body.
meta: Kurze Zusammenfassung der Seite für Suchergebnisse und Vorschauen.
link: Der sichtbare Text eines Links. Er sollte das Ziel beschreiben.

Typische Fehler

✕ Alles mit <div> bauen

✓ Semantische Tags wie <header>, <nav>, <main>, <article> nutzen

Screenreader, Suchmaschinen und andere Entwickler verstehen die Seite dann ohne zusätzliche Erklärung.

✕ Die meta description mit Keywords vollstopfen

✓ In einem Satz den konkreten Nutzen der Seite beschreiben

Suchmaschinen und Nutzer belohnen eine ehrliche Zusammenfassung mehr als eine Keyword-Liste.

Deine Lernnotiz

Schreib in eigenen Worten auf, was du behalten willst. Das ist aktives Lernen.

Du erkennst die Aufgabe von doctype, html, head und body.
Du unterscheidest sichtbare Inhalte von technischen Seitendaten.

Wird automatisch auf diesem Gerät gespeichert.

Selbstcheck

Kann ich das schon?

Hake ab, was du wirklich erklären oder selbst bauen könntest.

0 von 3 geschafft

Fortschritt

Bereit zum Abschließen?

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.