0Pricing
HTML Academy · Lektion

Das section-Element gegenüber div

Erkennen Sie, wann Sie section statt eines einfachen div verwenden sollten

Das section-Element gegenüber div ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das section-Element

Das <section>-Element gruppiert verwandte Inhalte zu einem thematischen Abschnitt:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

section vs div

Die entscheidende Frage lautet: Hat diese Gruppe ein Thema oder einen Zweck, der sich benennen ließe?

  • <section> — ja; es stellt eine thematische Gruppierung dar und sollte eine Überschrift haben
  • <div> — nein; es ist lediglich ein Container für Styling oder Skripte

section benötigt eine Überschrift

Jedes <section> sollte eine Überschrift (<h2>-<h6>) haben:

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Wann Sie section verwenden

Verwenden Sie <section> für:

  • Kapitel eines Dokuments
  • Tabs oder Schritte in einem Assistenten
  • Teile eines langen Artikels (Einleitung, Methoden, Ergebnisse)
  • Marketingabschnitte auf einer Startseite (Funktionen, Preise, Kundenstimmen)

Wann Sie div verwenden

Verwenden Sie <div>, wenn Sie lediglich einen Container für CSS oder JavaScript ohne semantische Bedeutung benötigen:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

section in einem langen Artikel

Verwenden Sie sections, um innerhalb eines article Kapitel zu erstellen:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Abschnitte einer Startseite

Strukturierte Startseite mit sections:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

section schafft einen Überschriftenkontext

Sections schaffen im Gliederungsalgorithmus für HTML5-Dokumente neue Kontexte für Überschriften:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby für Sections

Verknüpfen Sie eine section für Screenreader mit ihrer Überschrift:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Entscheidungsdiagramm

Welches Container-Element sollten Sie verwenden?

  • Hauptnavigation? → <nav>
  • Primärer Seiteninhalt? → <main>
  • In sich geschlossener Inhalt? → <article>
  • Thematische Gruppierung mit einer Überschrift? → <section>
  • Sidebar oder verwandte Inhalte? → <aside>
  • Nur ein Styling-Container? → <div>

section ohne Überschrift: Verwenden Sie div

Wenn Sie einer section keine Überschrift geben können, verwenden Sie stattdessen div:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Schnelltest

Wann sollten Sie div gegenüber section bevorzugen?

Zusammenfassung: section vs div

Die wichtigsten Merkmale von section vs div:

  • <section> — thematische Gruppe, sollte eine Überschrift haben
  • <div> — semantisch neutraler Container für Styling oder Skripte
  • section erstellt einen benannten Orientierungsbereich für die Navigation mit Screenreadern
  • Fügen Sie aria-labelledby hinzu, um die section mit ihrer Überschrift zu verknüpfen
  • Im Zweifel — verwenden Sie div; Sie können es später jederzeit zu section erweitern

Häufig gestellte Fragen

Ist die Lektion „Das section-Element gegenüber div“ kostenlos?

Ja — der vollständige Text von „Das section-Element gegenüber div“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das section-Element gegenüber div“?

Erkennen Sie, wann Sie section statt eines einfachen div verwenden sollten Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Das section-Element gegenüber div“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. header nav main und footer
  2. Das article-Element: eigenständige Inhalte
  3. Das section-Element gegenüber div
  4. time address und mark
← Zurück zu HTML Academy