HTML-Kurs / Wann verwendet man div und span?

div und span gruppieren Inhalte, ohne ihnen besondere Bedeutung zu geben. Verwenden Sie sie, wenn CSS oder JavaScript ein Ziel benötigt und kein spezifischeres HTML-Element den Inhalt beschreibt. Ein div gruppiert normalerweise größere Teile; ein span gruppiert einen Teil eines Satzes.

Worin unterscheiden sich div und span?

Ein div kann fließenden Inhalt wie Absätze, Listen oder eine ganze Karte enthalten. Ein span ist für Text und andere sogenannte phrasierende Inhalte innerhalb eines Textabschnitts vorgesehen. Keines von beiden gibt an, dass sein Inhalt eine Überschrift, eine Schaltfläche oder besonders wichtig ist. Standardmäßig beginnt ein div als Block und ein span bleibt inline, aber CSS kann ihre Anzeige ändern. Wählen Sie basierend auf der Struktur des Inhalts, nicht nur auf seinem Aussehen. Für einen Bereich mit Seitenrollen wählen Sie zunächst ein geeignetes semantisches Element in Seiten mit semantischen Elementen strukturieren.

Setzen Sie keinen Absatz oder ein div in ein span. Wenn Ihr einziges Ziel ein Zeilenumbruch ist, entscheiden Sie zunächst, ob Sie einen neuen Absatz oder eine Änderung des CSS-Layouts anstelle eines anderen Containers benötigen.

Gruppieren Sie nur das, was gestylt werden muss

Setzen Sie dieses HTML in ein body eines Dokuments und das CSS in ein style in sein head.

<div class="product-card">

  <h2>Reisetasse</h2>

  <p>Preis: <span class="price">15 $</span></p>

</div>

.product-card {

  padding: 16px;

  border: 1px solid #dadada;

}

.price {

  color: #075cb4;

  font-weight: 700;

}

Die gesamte Karte erhält einen Rand, während sich nur der Preis in Farbe und Schriftstärke ändert. Das Attribut class gibt dem CSS einen Namen zum Auswählen. Selbst ohne CSS bleibt der Produktname eine Überschrift und der Preis bleibt in einem Absatz. Wenn der Preis nicht blau wird, überprüfen Sie, ob class="price" im HTML mit .price im CSS übereinstimmt. Der Punkt zeigt einen Klassenselektor an; er ist kein Teil des HTML-Klassennamens.

Bevorzugen Sie ein Element mit passender Bedeutung

Für die Hauptnavigation ziehen Sie nav einem generischen div vor. Für einen unabhängigen Artikel ziehen Sie article in Betracht. Für eine Aktion, die Benutzer ausführen können, verwenden Sie button, anstatt ein klickbares span zu erstellen. Das richtige native Element vermittelt bereits Bedeutung und bietet oft Tastaturverhalten. Die verschiedenen Schaltflächentypen erklärt der Beitrag Formulare mit textarea, select, option und button.

Der Preis in diesem Beispiel benötigt keine spezielle Datenverarbeitung, daher reicht span aus. Sie können eine CSS-Klasse beibehalten und gleichzeitig ihr Element später durch ein bedeutsameres Element ersetzen. Schauen Sie sich die Liste der HTML-Elemente von MDN an, wenn Sie ein passendes Element auswählen.

Trennen Sie den erlaubten Inhalt von der CSS-Anzeige

Fließender Inhalt ist eine Kategorie, die für den Inhaltsfluss einer Seite verwendet wird, einschließlich Absätze, Listen und Abschnitte. Satzinhalt wird innerhalb von Textabschnitten verwendet, wie Text, Betonung, Links und Bilder. div gruppiert fließenden Inhalt; span gruppiert Satzinhalt. Diese Kategorien unterscheiden sich von den CSS-Regeln zur Zeilenbelegung.

<!-- Nicht konform: ein Absatz in span -->
<span class="card"><p>Produktbeschreibung</p></span>

<!-- Ein Container, der Absätze enthalten darf -->
<div class="card"><p>Produktbeschreibung</p></div>

span { display: block; } zu schreiben erzeugt keinen gültigen Absatz innerhalb eines span. Vergleichen Sie die Fragmente separat und behalten Sie dann dieselbe CSS-Klasse auf dem korrigierten Container bei. Wählen Sie ein Element aus dem Inhaltsmodell, anstatt die Tags einfach zu ändern, um ein visuelles Problem zu verbergen.

Referenz für span auf MDN · Referenz für div auf MDN

Häufige Fehler

Bauen Sie nicht jede Seitenregion nur mit div, um das Styling des Layouts zu erleichtern. Geben Sie einem Container im Gegenzug kein semantisches Element, dessen Bedeutung nicht passt. Ein gestaltetes span wird nicht automatisch zu einer Überschrift oder zu einem Button, nur weil es so aussieht. Beginnen Sie mit Inhalt und Interaktion und fügen Sie generische Container nur dort hinzu, wo sie notwendig sind.