Das <div>-Element verwenden

Das <div>-Element ist ein generisches HTML-Element, das als Block-Container dient. Es hilft, Inhalte zu strukturieren, Layouts zu erstellen und Elemente zu gruppieren.

Was ist ein <div>?

Das <div>-Element hat keine eigene semantische Bedeutung, wird aber häufig verwendet, um ein oder mehrere Elemente wie Textblöcke oder Bilder zu gruppieren. Es ist besonders nützlich beim Anwenden von CSS-Stilen oder JavaScript-Funktionalitäten.

<div>
  <h2>Welcome</h2>
  <p>This is a short paragraph.</p>
</div>

Weblayouts erstellen

Viele moderne Webseiten bestehen vollständig aus <div>-Elementen. Ein gängiges Beispiel ist die Nutzung separater <div>-Container für den Header, den Hauptinhalt und den Footer.

<div class="header">Header content</div>
<div class="main">Main content</div>
<div class="footer">Footer content</div>

Verwendung von class und id

<div>-Elemente enthalten häufig class- oder id-Attribute, die für CSS- oder JavaScript-Anwendungen unerlässlich sind. Eine class kann mehrfach verwendet werden, während eine id eindeutig auf der Seite sein muss.

<div id="sidebar">Sidebar</div>
<div class="card">Card content</div>

Ein div gestalten

<div>-Elemente werden oft mit CSS gestaltet. Dies kann über eine externe CSS-Datei, Inline-Stile oder durch Zuweisung einer Klasse erfolgen. Zum Beispiel kann man ihm einen hellblauen Hintergrund und Innenabstand geben.

<div style="background-color: lightblue; padding: 10px;">
  Styled box
</div>

Verschachtelte <div>-Elemente

Das Verschachteln von <div>-Elementen ermöglicht komplexe Layouts. Dies ist besonders nützlich in Rastersystemen oder bei mehrstufigen Inhaltsstrukturen.

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>

Übermäßige Verwendung vermeiden

Anfänger neigen dazu, <div>-Elemente zu überstrapazieren. Vermeide Strukturen wie 'div div div'. Strebe sauberen und gut lesbaren Code an.

Wann semantische Elemente verwenden?

Obwohl <div> sehr nützlich ist, ist es nicht immer die beste Wahl. Verwende z. B. <article>, <nav> oder <footer>, wenn du Artikel, Navigationsmenüs oder Fußbereiche markieren möchtest.