HTML -Layout-Elemente und -Techniken

Websites zeigen Inhalte oft in mehreren Spalten an (wie ein Magazin oder eine Zeitung).

HTML-Layout-Elemente

HTML hat mehrere semantische Elemente, die die verschiedenen Teile einer Webseite definieren:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

<header>- Definiert eine Kopfzeile für ein Dokument oder einen Abschnitt <nav>- Definiert eine Reihe von Navigationslinks <section>- Definiert einen Abschnitt in einem Dokument <article> - Definiert einen eigenständigen, in sich geschlossenen Inhalt <aside> - Definiert Inhalt neben dem Inhalt (wie eine Seitenleiste) <footer> - Definiert eine Fußzeile für ein Dokument oder einen Abschnitt <details> - Definiert zusätzliche Details, die der Benutzer bei Bedarf öffnen und schließen kann <summary>- Definiert eine Überschrift für das <details>Element Mehr über semantische Elemente erfahren Sie in unserem Kapitel HTML-Semantik .

HTML-Layout-Techniken

Es gibt vier verschiedene Techniken, um mehrspaltige Layouts zu erstellen. Jede Technik hat ihre Vor- und Nachteile:

• CSS-Framework
• CSS-Float-Eigenschaft
• CSS-Flexbox
• CSS-Raster

CSS-Frameworks

Wenn Sie Ihr Layout schnell erstellen möchten, können Sie ein CSS-Framework wie W3.CSS oder Bootstrap verwenden .

CSS-Float-Layout

Es ist üblich, ganze Weblayouts mit der CSS- floatEigenschaft zu erstellen. Float ist leicht zu erlernen - Sie müssen sich nur daran erinnern, wie die Eigenschaften floatund funktionieren. Nachteile: Schwebende Elemente sind an den Dokumentenfluss gebunden, was der Flexibilität schaden kann. Erfahren Sie mehr über Float in unserem Kapitel CSS Float und Clear . clear

CSS-Flexbox-Layout

Die Verwendung von Flexbox stellt sicher, dass sich Elemente vorhersagbar verhalten, wenn das Seitenlayout unterschiedliche Bildschirmgrößen und unterschiedliche Anzeigegeräte berücksichtigen muss.

Erfahren Sie mehr über Flexbox in unserem CSS-Flexbox - Kapitel.

CSS-Grid-Layout

Das CSS-Grid-Layout-Modul bietet ein rasterbasiertes Layoutsystem mit Zeilen und Spalten, das das Entwerfen von Webseiten erleichtert, ohne Floats und Positionierung verwenden zu müssen.

Erfahren Sie mehr über CSS-Grids in unserem Einführungskapitel zu CSS-Grids .