Lädt...

HTML Layout

Nach Semantik kommt Layout: Regionen zusammensetzen; CSS platziert.

Zuerst Struktur, dann visuelle Platzierung

Seitenstory klären, dann Spalten — keine Riesentabelle.

Direkte Antwort

Gerüst mit Landmarks. Einzigartiger Inhalt in main. Spalten per CSS. Kein Layout-<table>.

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

Landmark-Seitengerüst

Header, Zeile, main+article, aside, footer. div.row nur CSS-Haken.

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

Gerüst lesen

Story in main
aside verwandt
ohne CSS vertikal gestapelt

Mini-CSS für Spalten

Gleiche Landmarks; .row mit flex.

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

Flex-Vorschau lesen

Bedeutung gleich
main breiter
keine td-Spalten

Tabellen für Daten, nicht Seitenchrome

Layout-Tabellen vermeiden.

Übung

header/main/aside/footer
article in main
kein Layout-table

Typische Fehler

Layout-Tabelle
main vergessen
row als Landmark sehen

Kurzfassung

HTML benennt; CSS platziert
keine Layout-Tabellen
als Nächstes: Responsive

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache