Grundlagen des HTML-Layouts
Das HTML-Layout definiert die Struktur einer Webseite – das Grundgerüst, entlang dem der Inhalt organisiert ist, inklusive Header, Navigation, Hauptinhalt und Footer.
Typische Layout-Struktur
Ein einfaches HTML-Layout enthält oft <header>-, <nav>-, <main>-, <aside>- und <footer>-Abschnitte. Diese semantischen Elemente sorgen für eine klare Seitenstruktur.
html
<body>
<header>Header content</header>
<nav>Navigation</nav>
<main>Main content area</main>
<aside>Sidebar</aside>
<footer>Footer content</footer>
</body>Warum semantisches HTML wichtig ist
Semantische Elemente helfen Suchmaschinen und Tools für Barrierefreiheit, die Struktur deiner Seite besser zu verstehen. Sie werden auf modernen Webseiten empfohlen.
Layout mit CSS-Unterstützung
Zur Umsetzung von Layouts verwenden wir oft CSS Grid oder Flexbox. Diese ermöglichen präzise Positionierung und anpassbare Gestaltung auf verschiedenen Bildschirmgrößen.
css
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}Einfaches Layout-Beispiel
Das folgende HTML-Beispiel zeigt eine grundlegende Layoutstruktur, bei der der Inhalt in einem Container organisiert und in logische Abschnitte unterteilt ist.
html
<div class="container">
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>Flexibilität des Layouts
HTML-Layouts sind nicht auf eine bestimmte Struktur beschränkt. Du kannst Rasterlayouts, ein- oder mehrzeilige Inhalte oder responsive Designs umsetzen.
Best Practices
Strebe stets nach einem einfachen, gut strukturierten Layout. Verwende semantische Tags und verlasse dich bei Layoutanpassungen auf CSS – nicht auf <table> oder übermäßiges <div>-Verschachteln.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
