Abschluss: eine ganze Seite bauen

Der letzte Schritt: alles zusammensetzen. Nichts davon ist neu, jedes Stück hast du einzeln geübt.

01 / 03So sieht das Ziel aus

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linsensuppe in 30 Minuten | Mein Kochblog</title>
    <meta name="description" content="Ein Rezept, das unter der Woche klappt.">
    <link rel="stylesheet" href="stil.css">
  </head>
  <body>
    <a href="#main">Direkt zum Inhalt</a>

    <header>
      <nav>
        <ul>
          <li><a href="/">Start</a></li>
          <li><a href="/rezepte">Rezepte</a></li>
        </ul>
      </nav>
    </header>

    <main id="main">
      <article>
        <h1>Linsensuppe in 30 Minuten</h1>
        <p>Braucht wenig und hält drei Tage.</p>

        <figure>
          <img
            src="/lernen/media/demo-600.jpg"
            alt="Rotes Demobild mit der Aufschrift Demo 600 x 338"
            width="600"
            height="338"
          >
          <figcaption>Abbildung 1: So sieht es fertig aus.</figcaption>
        </figure>

        <section>
          <h2>Zutaten</h2>
          <ul>
            <li>200 g Linsen</li>
            <li>1 Bund Suppengrün</li>
          </ul>
        </section>

        <section>
          <h2>Zubereitung</h2>
          <ol>
            <li>Gemüse klein schneiden</li>
            <li>Alles 30 Minuten köcheln lassen</li>
          </ol>
        </section>
      </article>
    </main>

    <footer>
      <p>Alle Rechte vorbehalten</p>
    </footer>
  </body>
</html>

Geh sie einmal von oben nach unten durch und schau, was dir alles wieder begegnet.

Im head: Sprache, Zeichenkodierung, viewport, ein aussagekräftiger title, die Beschreibung, das eingebundene Stylesheet. Das war Abschnitt 9.

Direkt im body der Sprunglink zum Inhalt, aus Abschnitt 11. Dann die drei Landmarks header, main, footer aus Abschnitt 6, mit der Navigation als Liste aus Abschnitt 4.

Im main ein article, der für sich steht, mit genau einer h1. Darin eine figure mit Bild, alt-Text, Maßen und Bildunterschrift aus Abschnitt 5, und zwei section, jede mit ihrer h2. Die Zutaten als ungeordnete Liste, die Zubereitung als geordnete, weil dort die Reihenfolge zählt. Das war Abschnitt 3.

02 / 03Das Gerüst ohne Inhalt

<header>
  <nav>...</nav>
</header>

<main id="main">
  <article>
    <h1>...</h1>
    <figure>
      <img src="/lernen/media/demo-600.jpg" alt="...">
      <figcaption>...</figcaption>
    </figure>
    <section>
      <h2>...</h2>
    </section>
    <section>
      <h2>...</h2>
    </section>
  </article>
</main>

<footer>...</footer>

Derselbe Aufbau, nur ohne Text. Wenn du beim Bauen den Faden verlierst, ist das die Landkarte: außen die Landmarks, innen der Artikel, darin Überschrift, Abbildung und Abschnitte.

Diese Struktur trägt weit über dieses eine Beispiel hinaus. Ein Blog-Post, eine Produktseite, ein Portfolio-Eintrag: alle folgen demselben Muster, nur mit anderem Inhalt.

Ein Rat zum Vorgehen: Bau von außen nach innen. Erst die drei Landmarks header, main und footer untereinander, dann den article in das main, dann die figure und die beiden section in den article. Wer zuerst die Zutatenliste schreibt und danach den Rahmen darum herum baut, verliert schneller den Überblick über offene Tags.

Und rück dabei konsequent ein. Dem Browser ist es egal, dir nicht: Bei acht Verschachtelungsebenen ist die Einrückung das Einzige, woran du siehst, was noch offen ist.

03 / 03Worauf die Prüfung schaut

Die Prüfliste unter dem Aufgabentext hat vierzehn Einträge, und alle sind Regeln, die im Kurs vorkamen. In dieser Reihenfolge:

• ganz oben ein Sprunglink auf #main, noch vor dem header
• im header eine Navigation als Liste von Links
• genau ein main, und es trägt die id aus dem Sprunglink
• darin genau ein article
• im article genau eine h1
• eine figure mit einem Bild, das einen beschreibenden alt-Text trägt
• eine figcaption in derselben figure
• zwei section im article
• jede der beiden mit einer eigenen h2
• die Zutaten als ungeordnete Liste
• die Zubereitung als geordnete Liste
• die beiden Listen in verschiedenen Abschnitten, nicht zusammen in einem
• ein footer
• kein einziges div

Der letzte Punkt ist der interessanteste. Für diese Seite braucht es keins, weil es für jeden Bereich ein Element gibt, das sagt, was er ist. Das ist die Zusammenfassung des ganzen Kurses in einer Zeile.

Lass dir Zeit damit. Und wenn etwas nicht bestehen will, geh die Prüfliste bei der Aufgabe Punkt für Punkt durch, statt alles auf einmal zu suchen.