HTML Academy · Lektion

Die Elemente span und div

Verwenden Sie generische Inline- und Block-Container als Ansatzpunkte für die Gestaltung.

Die Elemente span und div ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Generische Container

HTML verfügt über zwei generische, semantisch neutrale Containerelemente:

<div> — ein Container auf Blockebene
<span> — ein Inline-Container

Sie haben für sich genommen keine Bedeutung — sie dienen ausschließlich als Anknüpfungspunkte für Formatierung und Skripte.

Das div-Element

<div> ist ein Container auf Blockebene — es erzeugt davor und danach eine neue Zeile:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

Das span-Element

<span> ist ein Inline-Container — es fließt innerhalb des Textes:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

Wann Sie div statt semantischer Elemente verwenden

Bevor Sie zu <div> greifen, prüfen Sie, ob ein semantisches Element passt:

Seitenkopf → <header>
Navigation → <nav>
Hauptinhalt → <main>
Blogbeitrag → <article>
Seitenleiste → <aside>
Seitenfuß → <footer>

Verwenden Sie <div> nur, wenn kein semantisches Element passt.

Divitis

Divitis — die übermäßige Verwendung von <div> für alles:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

CSS-Anknüpfungspunkte mit class und id

Sowohl <div> als auch <span> werden mit class- oder id-Attributen verwendet, um sie für CSS auszuwählen:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Auswahl mit JavaScript

<div> und <span> können ebenfalls als Ziele für JavaScript dienen:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Regeln für die Verschachtelung

Regeln für die Verschachtelung generischer Container:

<div> kann <div> und <span> enthalten
<span> darf nur <span> und Inline-Inhalte enthalten
Platzieren Sie kein <div> innerhalb eines <span>

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div für Layouts

Ein häufiges Layoutmuster mit div-Elementen:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span für Inline-Formatierung

Häufige Muster für die Inline-Formatierung:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div und span sind unsichtbar

Standardmäßig sind <div> und <span> unsichtbare Wrapper:

<div> fügt über die Blockdarstellung hinaus keine visuelle Formatierung hinzu
<span> fügt überhaupt keine Formatierung hinzu
Das gesamte Erscheinungsbild entsteht durch das von Ihnen angewendete CSS
Dadurch eignen sie sich hervorragend als neutrale Container

Kurzer Test

Welches Element sollten Sie verwenden, um ein einzelnes Wort innerhalb eines Absatzes zu formatieren?

Zusammenfassung: span und div

Das Wichtigste zu generischen Containern:

<div> — auf Blockebene, gruppiert Elemente für Layouts
<span> — Inline-Element, zielt auf Textbereiche für die Formatierung
Beide sind semantisch neutral — sie fügen keine Bedeutung hinzu
Bevorzugen Sie passende semantische HTML5-Elemente
Verwenden Sie class und id, um sie mit CSS und JavaScript zu verbinden

Häufig gestellte Fragen

Ist die Lektion „Die Elemente span und div“ kostenlos?

Ja — der vollständige Text von „Die Elemente span und 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 „Die Elemente span und div“?

Verwenden Sie generische Inline- und Block-Container als Ansatzpunkte für die Gestaltung. 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 4 von 4.

Wie lange dauert die Lektion „Die Elemente span und 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

← Zurück zu HTML Academy