Das Element div

Geschätzte Lektüre: 5 Minuten 401 Ansichten

Das <div>-Element (kurz für „Division“, dt. „Abschnitt“) ist ein generischer Container, der dazu dient, HTML-Elemente zu gruppieren und mit CSS oder JavaScript zu stylen oder zu manipulieren. Im Gegensatz zu semantischen Elementen wie <article> oder <footer> hat <div> keine eigene Bedeutung – es wird hauptsächlich für Layout- und Strukturierungszwecke verwendet.

Eigenschaften von <div>

• Block-Element: Ein <div> nimmt die gesamte verfügbare Breite ein und erzeugt einen Zeilenumbruch.
• Keine semantische Bedeutung: Es dient nur als „Kasten“ für andere Elemente.
• Wird oft mit CSS/JS verwendet: Meistens werden <div>-Container für Layouts (z. B. Grid, Flexbox) oder dynamische Funktionen genutzt.

Beispiele für <div>

Einfacher Container für Styling

<div style="background: lightblue; padding: 20px; border: 1px solid black;">
  <h2>Überschrift</h2>
  <p>Ein Absatz innerhalb des Div-Containers.</p>
</div>

Auswirkung:
• Ein blauer Hintergrund mit Innenabstand (padding) und Rahmen.
• Die Elemente <h2> und <p> sind nun gruppiert und können gemeinsam gestaltet werden.

Layout-Struktur (z. B. Header, Content, Footer)

<div class="header">
  <h1>Webseiten-Titel</h1>
</div>

<div class="content">
  <p>Hauptinhalt der Seite...</p>
</div>

<div class="footer">
  <p>© 2023 Meine Webseite</p>
</div>
.header { background: #333; color: white; padding: 10px; }
.content { padding: 20px; }
.footer { background: #eee; text-align: center; }

Hinweis: Heute würde man dafür eher <header>, <main> und <footer> verwenden, aber <div> war früher der Standard.

Gruppierung für Flexbox/Grid-Layout

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>
.container {
  display: flex;
  gap: 10px;
}
.box {
  background: coral;
  padding: 10px;
}

Ergebnis: Drei gleichmäßig verteilte Boxen in einer flexiblen Zeile.

JavaScript-Manipulation (z. B. dynamischer Inhalt)

<div id="counter">0</div>
<button onclick="increaseCounter()">Erhöhen</button>

<script>
  function increaseCounter() {
    const counterDiv = document.getElementById("counter");
    let currentValue = parseInt(counterDiv.textContent);
    counterDiv.textContent = currentValue + 1;
  }
</script>

Funktion: Beim Klicken auf den Button wird der Zahlenwert im <div> erhöht.

Beispiel-Code (komplett):

<!DOCTYPE html>
<html>
<head>
  <title>Div-Beispiel</title>
  <style>
    .card {
      background: #f4f4f4;
      border: 1px solid #ddd;
      padding: 15px;
      margin: 10px;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h3>Produkt 1</h3>
    <p>Preis: 10€</p>
  </div>
</body>
</html>

Am häufigsten verwendeten HTML-Elemente

Das <div> ist eines der am häufigsten verwendeten HTML-Elemente, da es extrem flexibel ist. Allerdings sollte man es bewusst einsetzen und wo möglich semantische Alternativen bevorzugen.

Dieses Dokument teilen

Das Element div

Oder Link kopieren

INHALT

Abonnieren

×
Cancel