HTML-Layout-Vorlagen

Ein Seitenlayout beschreibt, wie die Hauptbereiche einer Seite — das Banner, die Navigation, der Hauptinhalt, die Seitenleiste und die Fußzeile — auf dem Bildschirm angeordnet sind. Dieses Kapitel zeigt, wie man ein Layout auf moderne Weise erstellt: die Bereiche mit semantischen HTML5-Elementen auszeichnen und sie anschließend mit CSS Flexbox oder CSS Grid positionieren. Am Ende können Sie eine responsive mehrspaltige Seite von Grund auf zusammenstellen.

Der Aufbau einer typischen Seite

Fast jede Website besteht aus denselben fünf Bausteinen:

Bereich	Zweck	Element
Header	Logo, Seitentitel, Banner	`<header>`
Navigation	Hauptmenü / Links	`<nav>`
Hauptinhalt	Der einzigartige Inhalt der Seite	`<main>`
Seitenleiste	Verwandte Links, Werbung, „Extras"	`<aside>`
Fußzeile	Copyright, Kontakt, sekundäre Links	`<footer>`

Vor HTML5 wurden diese Bereiche alle als generische <div>-Elemente mit id- oder class-Attributen wie <div id="header"> geschrieben. Das wird zwar noch korrekt gerendert, trägt aber keine Bedeutung: Ein Browser, ein Screenreader oder eine Suchmaschine kann ein Banner nicht von einer Fußzeile unterscheiden. Die oben genannten semantischen Elemente beschreiben, was jeder Bereich ist, was die Barrierefreiheit und SEO ohne zusätzlichen Aufwand verbessert. Siehe die vollständige Liste unter Semantische Elemente in HTML5.

Ein semantisches Seitengerüst

Beginnen Sie mit dem Markup, bevor Sie CSS für das Layout hinzufügen. Verwenden Sie jedes Landmark-Element einmal an der Stelle, wo es inhaltlich hingehört:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <main>
      <h2>Welcome</h2>
      <p>This is the primary content of the page.</p>
    </main>

    <aside>
      <h2>Related</h2>
      <p>Links, ads, or extra information go here.</p>
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>
  </body>
</html>

Einige wichtige Regeln:

Es sollte nur ein <main> pro Seite geben, und es darf nicht innerhalb von <header>, <nav>, <aside> oder <footer> verschachtelt sein.
<nav> ist für wichtige Navigationsblöcke gedacht, nicht für jede Gruppe von Links.
<aside> enthält Inhalte, die dem Hauptinhalt ergänzend zugeordnet sind — es funktioniert sowohl innerhalb von <main> als auch neben ihm.

Dieses Gerüst hat noch keine Spalten; alles stapelt sich vertikal. Das Layout — die Umwandlung dieser Blöcke in Spalten — ist eine Aufgabe für CSS, die wir als Nächstes hinzufügen.

Ein zweispaltiges Layout mit Flexbox

CSS Flexbox ordnet Elemente entlang einer einzelnen Achse an — einer Zeile oder einer Spalte — und ist ideal für eine Anordnung aus Inhalt und Seitenleiste. Umschließen Sie <main> und <aside> mit einem Flex-Container; display: flex stellt sie nebeneinander, und flex steuert, wie der verbleibende Platz aufgeteilt wird.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flexbox two-column layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      header, footer {
        background: #2c3e50;
        color: #fff;
        padding: 16px;
      }
      .container {
        display: flex;
        gap: 16px;
        padding: 16px;
      }
      main {
        flex: 3;            /* main takes 3 shares of the space */
        background: #ecf0f1;
        padding: 16px;
      }
      aside {
        flex: 1;            /* sidebar takes 1 share */
        background: #dfe6e9;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <header><h1>My Website</h1></header>
    <div class="container">
      <main>
        <h2>Main content</h2>
        <p>This column grows to fill most of the width.</p>
      </main>
      <aside>
        <h2>Sidebar</h2>
        <p>A narrower second column.</p>
      </aside>
    </div>
    <footer><p>&copy; 2024 My Website</p></footer>
  </body>
</html>

flex: 3 und flex: 1 teilen die verfügbare Breite im Verhältnis 3:1 auf die zwei Spalten auf. Da es sich um Proportionen handelt, bleiben die Spalten fluid: Sie schrumpfen und wachsen mit dem viewport, anstatt eine feste Pixelzahl beizubehalten. Um sie auf kleinen Bildschirmen zu stapeln, setzen Sie die Regel in eine Media Query:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Ein vollständiges Layout mit CSS Grid

CSS Grid ordnet Elemente in zwei Dimensionen an — Zeilen und Spalten gleichzeitig — und ist daher das bessere Werkzeug für ein ganzseitiges Layout. Mit grid-template-areas können Sie das Layout als Textgrafik zeichnen und jedes Element einem benannten Bereich zuweisen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Grid page layout</title>
    <style>
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .grid {
        display: grid;
        grid-template-columns: 1fr 3fr;   /* sidebar : content */
        grid-template-areas:
          "header header"
          "nav    main"
          "footer footer";
        gap: 12px;
        padding: 12px;
      }
      header { grid-area: header; background: #2c3e50; color: #fff; }
      nav    { grid-area: nav;    background: #dfe6e9; }
      main   { grid-area: main;   background: #ecf0f1; }
      footer { grid-area: footer; background: #2c3e50; color: #fff; }
      header, nav, main, footer { padding: 16px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <header><h1>My Website</h1></header>
      <nav>Navigation</nav>
      <main>
        <h2>Main content</h2>
        <p>The header and footer span both columns.</p>
      </main>
      <footer><p>&copy; 2024 My Website</p></footer>
    </div>
  </body>
</html>

Die Einheit fr bedeutet „ein Bruchteil des freien Platzes", daher macht 1fr 3fr die Inhaltsspalte dreimal so breit wie die Seitenleiste — wiederum ein fluides Verhältnis statt einer festen Breite. Die visuelle Karte in grid-template-areas ermöglicht es, dass Header und Fußzeile beide Spalten überspannen, indem ihre Namen einfach in einer Zeile wiederholt werden.

Flexbox oder Grid — was soll ich verwenden?

Beide sind modern, werden gut unterstützt und sind oft austauschbar, haben aber eine natürliche Aufgabenteilung:

Wählen Sie Flexbox, wenn Sie Elemente in eine Richtung anordnen — eine Navigationsleiste, eine Toolbar, eine Kartenreihe oder eine Inhalt-plus-Seitenleiste-Aufteilung.
Wählen Sie Grid, wenn Sie Zeilen und Spalten gleichzeitig benötigen, z. B. für ein ganzseitiges Layout (Header / Seitenleiste / Inhalt / Fußzeile) oder eine Bildergalerie.

Ein gängiges, robustes Muster ist die Verwendung von Grid für das übergeordnete Seitengerüst und Flexbox für die kleineren Komponenten innerhalb der einzelnen Bereiche.

Feste Breite vs. fluide Layouts

Die obigen Beispiele sind fluid (auch „liquid" genannt): Breiten werden als Verhältnisse (flex: 3, 3fr) oder Prozentsätze ausgedrückt, sodass sich das Layout an jeden Bildschirm anpasst. Dies ist die Grundlage des Responsive Design.

Ein Layout mit fester Breite setzt Bereiche auf einen genauen Pixelwert, z. B. width: 960px oder flex: 0 0 240px für eine Seitenleiste. Feste Breiten geben präzise Kontrolle, passen sich aber nicht an — auf einem schmalen Smartphone verursachen sie horizontales Scrollen, und auf einem breiten Monitor entstehen leere Flächen. In der Praxis kombinieren die meisten Websites beides: eine Seitenleiste mit fester Breite neben einer fluiden Inhaltsspalte, oft begrenzt durch max-width, damit sehr breite Bildschirme lesbar bleiben.

Info

Der ältere Ansatz für mehrspaltige Layouts verwendete die CSS-Eigenschaft float zusammen mit negativen margin-Werten. Diese Technik gilt heute als veraltet — sie ist fehleranfällig und schwer zu warten. Verwenden Sie stattdessen Flexbox oder Grid für das Layout; float wird heute hauptsächlich zum Umfließen von Text um ein Bild eingesetzt.

Fertige Layout-Vorlagen

Wenn Sie lieber mit einer fertigen Struktur beginnen möchten, bietet die Galerie unten herunterladbare HTML-Layouts — fest, fluid und hybrid, mit zwei oder drei Spalten. Sie sind ein nützliches Referenzmaterial, aber die oben gezeigten modernen Techniken sind der empfohlene Weg, um neue Seiten zu erstellen.

Diese Vorlagen wurden mit der veralteten CSS float- und negativen margin-Technik erstellt. Sie können sie als Ideenquelle studieren, aber bauen Sie die Struktur mit den oben beschriebenen Flexbox- oder Grid-Ansätzen neu auf, um ein wartungsfreundlicheres und von Haus aus responsives Ergebnis zu erzielen.

Eine Vorlage anpassen

Sobald Sie eine Struktur gefunden haben, die Ihnen gefällt, gibt es folgende gängige Möglichkeiten, sie zu Ihrer eigenen zu machen:

Ersetzen Sie den Platzhaltertext und fügen Sie eigene Bilder hinzu.
Passen Sie das semantische Markup an Ihren Inhalt an.
Vertiefen Sie das Markup mit unserem HTML-Tutorial.
Gestalten Sie das Layout mit unserem CSS-Tutorial um.
Fügen Sie Interaktivität mit unserem JavaScript-Tutorial hinzu.

Übungen

Übung

Welche semantischen HTML5-Elemente werden häufig zur Strukturierung eines Seitenlayouts verwendet?

Übung

Welche CSS-Technik eignet sich am besten für ein vollständiges zweidimensionales Seitenlayout mit Zeilen und Spalten?

CSS GridCSS float mit negativen MarginsHTML-TabellenDer <center>-Tag