Was ist der Unterschied zwischen den HTML-Tags <div> und <span>?

543

Ich möchte um einige einfache Beispiele bitten, die die Verwendung von <div>und zeigen <span>. Ich habe gesehen, dass beide einen Abschnitt einer Seite mit einem idoder markiert haben class, aber ich bin daran interessiert zu wissen, ob es Zeiten gibt, in denen einer dem anderen vorgezogen wird.

JSchaefer
quelle

Antworten:

582

Dies bedeutet, dass zur semantischen Verwendung von Divs Divs zum Umbrechen von Abschnitten eines Dokuments verwendet werden sollten, während Spans zum Umschließen kleiner Teile von Text, Bildern usw. verwendet werden sollten.

Zum Beispiel:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Beachten Sie, dass es illegal ist, ein Element auf Blockebene in einem Inline-Element zu platzieren.

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...ist illegal.


BEARBEITEN: Ab HTML5 können einige Blockelemente innerhalb einiger Inline-Elemente platziert werden. In der MDN-Referenz finden Sie eine ziemlich klare Auflistung. Das oben Genannte ist immer noch illegal, da <span>nur Phrasierungsinhalte akzeptiert werden und <div>es sich um Flow-Inhalte handelt.


Sie haben nach konkreten Beispielen gefragt, also eines aus meiner Bowling-Website BowlSK :

<div id="header">
  <div id="userbar">
    Hi there, <span class="username">Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, was ist los?

Oben auf meiner Seite habe ich einen logischen Abschnitt, den "Header". Da dies ein Abschnitt ist, verwende ich ein div (mit einer entsprechenden ID). Darin habe ich ein paar Abschnitte: die Benutzerleiste und den eigentlichen Seitentitel. Der Titel verwendet das entsprechende Tag h1. Die Benutzerleiste ist ein Abschnitt und wird in a eingeschlossen div. Darin ist der Benutzername in a eingeschlossen span, damit ich den Stil ändern kann. Wie Sie sehen können, habe ich auch spanungefähr 2 Buchstaben in den Titel eingeschlossen - dies ermöglicht mir, ihre Farbe in meinem Stylesheet zu ändern.

Beachten Sie auch, dass HTML5 eine breite Reihe neuer Elemente enthält, die allgemeine Seitenstrukturen definieren, z. B. Artikel, Abschnitt, Navigation usw.

Abschnitt 4.4 des HTML 5-Arbeitsentwurfs listet sie auf und gibt Hinweise zu ihrer Verwendung. HTML5 ist immer noch eine funktionierende Spezifikation, daher ist noch nichts "endgültig", aber es ist höchst zweifelhaft, ob eines dieser Elemente irgendwohin führt. Es gibt einen Javascript-Hack, den Sie verwenden müssen, wenn Sie diese Elemente in einer älteren Version von IE formatieren möchten. Sie müssen jedes Element mit erstellen, document.createElementbevor eines dieser Elemente in Ihrer Quelle angegeben wird. Es gibt eine Reihe von Bibliotheken, die dies für Sie erledigen - eine schnelle Google-Suche ergab html5shiv .

Chris Marasti-Georg
quelle
5
Chris, dein Text enthält einen Fehler: Selbst wenn du den Stil der Spanne auf "Blockieren" setzt, ist es immer noch illegal, ihn um ein Element auf Blockebene zu wickeln!
Konrad Rudolph
7
Sie können nicht divund spansemantisch verwenden, da sie keine Bedeutung haben. divist ein bedeutungsloses generisches spanElement auf Blockebene, während es ein bedeutungsloses generisches Inline-Element ist.
Apnerve
9
@apnerve Sie haben immer noch eine Semantik in diesem Block. Inline-Elemente bedeuten verschiedene Dinge für den Dokumentfluss, sowohl aus der Parsing-Perspektive als auch aus der Perspektive "Lesen Sie diese Quelle, um herauszufinden, was los ist".
Chris Marasti-Georg
20
"Die Semantik (aus dem Griechischen sēmantiká, neutraler Plural von sēmantikós) [1] [2] ist das Studium der Bedeutung. Sie konzentriert sich auf die Beziehung zwischen Signifikanten wie Wörtern, Phrasen, Zeichen und Symbolen und dem, wofür sie stehen, ihren Denotaten . " Die Bezeichner "div" und "span" stehen mit Sicherheit für etwas. Die HTML-Spezifikation enthält eine schöne Aufschlüsselung dessen, wofür Block- und Inline-Elemente stehen. w3.org/TR/html401/struct/global.html#h-7.5.3 . Der HTML5-Entwurf ordnet sie sogar in separate Gruppen ein - Gruppieren von Inhalten und Semantik auf Textebene. dev.w3.org/html5/spec/Overview.html
Chris Marasti-Georg
16
Sie hatten mich bei "div ist ein Blockelement, span ist inline." :)
Matical
390

Der Vollständigkeit halber lade ich Sie ein, so darüber nachzudenken:

  • In HTML sind viele Blockelemente (Zeilenumbrüche vorher und nachher) definiert und viele Inline-Tags (keine Zeilenumbrüche).
  • Aber in modernem HTML sollen alle Elemente Bedeutungen haben : a <p>ist ein Absatz, a <li>ist ein Listenelement usw., und wir sollen das richtige Tag für den richtigen Zweck verwenden - nicht wie früher eingerückt mit, <blockquote>ob der Inhalt ein Zitat war oder nicht.
  • Also, was tun Sie , wenn es ist keine Bedeutung für das , was Sie zu tun versuchen? Es gibt keine Bedeutung 400px breite Spalte hat , oder? Sie möchten nur, dass Ihre Textspalte 400 Pixel breit ist, da dies zu Ihrem Design passt.
  • Aus diesem Grund fügten sie HTML zwei weitere Elemente hinzu: die generischen oder bedeutungslosen Elemente, <div>und <span>weil die Benutzer sonst wieder die Elemente missbrauchen würden, die Bedeutungen haben.
AmbroseChapel
quelle
20
Dies ist eine richtige Erklärung. Ich frage mich, warum dies nicht als Antwort akzeptiert wurde.
Apnerve
16
weil es zu weit unten auf der Seite ist
Jason Sebring
12
Nur weil eine gute Antwort nicht akzeptiert wurde, heißt das nicht, dass Sie nicht abstimmen können. +1 für eine nützliche Klarstellung.
CyberFonic
8
Gut zu wissen, aber es beantwortet nicht die ursprüngliche Frage, da es die Unterschiede zwischen div- und span-Elementen nicht erklärt.
Tehvan
216

Hier gibt es bereits gute, detaillierte Antworten, aber keine visuellen Beispiele. Hier eine kurze Illustration:

Unterschied zwischen div und span

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>ist ein Block-Tag, während <span>es sich um ein Inline-Tag handelt.

Brian
quelle
16
Sie wirken sich auch ohne CSS unterschiedlich auf das Layout aus! Dies ist das erste Mal, dass ich dies gezeigt habe!
GreenAsJade
2
Vielen Dank, ich stimme dieser Antwort zu, weil sie sehr schnell antwortet, dass div eine nächste Zeile hat
Script Kitty
4
Danke, dass du Neulinge wie mich visuell erklärt hast :-)
Aritra Chatterjee
73

<div> ist ein Element auf Blockebene und <span> ein Inline-Element.

Wenn Sie etwas mit Inline-Text tun möchten , <span>ist dies der richtige Weg, da dadurch keine Zeilenumbrüche eingeführt werden, die a <div>würde.


Wie von anderen angemerkt, gibt es einige Semantiken, die mit jeder dieser Methoden verbunden sind, insbesondere die Tatsache, dass a <div>eine logische Unterteilung im Dokument impliziert, ähnlich vielleicht einem Abschnitt eines Dokuments oder etwas anderem, a la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>
Jason Bunting
quelle
1
divs können inline (Anzeige: inline;) und umgekehrt für span gemacht werden, aber dies ist die beste Erklärung. Sie sind Wrapper-Tags, span wird normalerweise für Sätze oder das Hervorheben von Text verwendet, div für Abschnitte.
Ross
3
Mir ist bewusst, dass Sie dies mit CSS ändern können, aber das führt eine andere Technologie ein. HTML kann für sich allein stehen, und wenn dies der Fall ist, ist ein div nicht inline und es ist nicht beabsichtigt, dies in seiner reinen Form zu tun.
Jason Bunting
Gibt es ein gutes Buch, in dem erklärt wird, wie HTML-Elemente in verschiedenen Situationen richtig verwendet werden?
mko
@mko - Ich weiß nicht, um ehrlich zu sein. Erfahrung ist der beste Lehrer. Letztendlich gibt es keine "richtige" Antwort an sich, es gibt einfach das, was für Ihre Situation und Ihre Zwecke funktioniert. ;)
Jason Bunting
30

Der wirklich wichtige Unterschied ist bereits in Chris 'Antwort erwähnt. Die Auswirkungen sind jedoch nicht für alle offensichtlich.

<span>Kann als Inline-Element nur andere Inline-Elemente enthalten. Der folgende Code ist daher falsch:

<span><p>This is a paragraph</p></span>

Der obige Code ist ungültig. Zum Umschließen von Elementen auf Blockebene muss ein anderes Element auf Blockebene verwendet werden (z. B. <div>). Auf der anderen Seite <div>darf nur an Orten verwendet werden, an denen Elemente auf Blockebene zulässig sind.

Darüber hinaus sind diese Regeln in (X) HTML festgelegt und werden durch das Vorhandensein von CSS-Regeln nicht geändert! Die folgenden Codes sind also auch falsch!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>
Konrad Rudolph
quelle
7
@Faizan Wie ist das relevant? Es ist auch falsch: Nicht jeder Browser liefert konsistente Ergebnisse für dieses Markup. Abhängig vom verwendeten Doctype (und auch vom Browser) wird dies möglicherweise überhaupt nicht ausgeführt und führt eher zu einem Validierungsfehler.
Konrad Rudolph
Ich sehe, dass einige Browser effizient genug sind, um ungültigen Code auszuführen. deshalb lief es. Können Sie mir einen guten Validator für HTML empfehlen?
Faizan
6
"Seien Sie konservativ in dem, was Sie tun, und liberal in dem, was Sie akzeptieren" en.wikipedia.org/wiki/Robustness_principle
jldupont
5
Willkommen in der Suppenkantine. Browser, die ungültiges HTML essen, sind genau der Grund, warum hochoptimierte, aber wählerische HTML-Parser nicht die Norm sind. Jeder Browser, der sein Geld wert ist (dh mit dem 'HTML' da draußen kompatibel ist), verwendet eine (interne) Bibliothek vom Typ 'Suppe', um ihn schmackhaft zu machen.
Bestätigen Sie den
8

Die Bedeutung von "Blockelement" wird impliziert, aber nie explizit angegeben. Wenn wir die gesamte Theorie ignorieren (Theorie ist gut), ist das Folgende ein pragmatischer Vergleich. Folgende:

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

produziert:

This paragraph has a span.

This paragraph

has
a div.

Das zeigt , dass nicht nur sollte ein div nicht gebrauchten inline sein, es wird einfach produzieren nicht die gewünschte beeinflussen.

user34660
quelle
6

Wie in anderen Antworten erwähnt, wird es standardmäßig divals Blockelement gerendert, während spanes in seinem Kontext inline gerendert wird. Aber keiner hat einen semantischen Wert; Sie sind vorhanden, damit Sie Stil und Identität auf einen bestimmten Inhalt anwenden können. Mithilfe von Stilen können Sie eine divAktion wie a spanausführen und umgekehrt.

Einer der nützlichen Stile für divistinline-block

Beispiele:

  1. http://dustwell.com/div-span-inline-block.html

  2. CSS-Anzeige: Inline vs Inline-Block

Ich habe mich inline-blockan einen großen Erfolg in Game-Web-Projekten gewöhnt.

Eric R. Rath
quelle
3
Wenn sie keinen semantischen Wert hätten, gäbe es nur einen von ihnen. Einer soll eine Block-Level-Division sein - der andere eine Inline-Spanne
Chris Marasti-Georg
3

Div ist ein Blockelement und span ist ein Inline-Element und seine Breite hängt vom Inhalt seines Selbst ab, während div dies nicht tut

Jagannath Samanta
quelle
3

Ich würde sagen, wenn Sie ein bisschen Spanisch können, schauen Sie sich diese Seite an , wo sie richtig erklärt wird.

Eine schnelle Definition wäre jedoch das divTeilen von Abschnitten und spandas Anwenden eines Stils auf ein Element innerhalb eines anderen Blockelements wie div.

Pablo Herrero
quelle
Sie müssen kein Spanisch sprechen, die englische Version ist <span> - HTML | MDN .
user34660
3

Ich wollte nur einen historischen Kontext hinzufügen, wie es zu spanvs kamdiv

Geschichte von span:

Am 3. Juli 1995 schlägt Benjamin CW Sittler ein generisches Textcontainer- Tag zum Anwenden von Stilen auf bestimmte Textblöcke vor. Das Rendering ist neutral, außer wenn es in Verbindung mit einem Stylesheet verwendet wird. Es gibt eine Debatte über und über Lesbarkeit, Bedeutung. Bert Bos erwähnt die Erweiterbarkeit des Elements durch das Klassenattribut (mit Werten wie Stadt, Person, Datum usw.). Paul Prescod befürchtet, dass beide Elemente missbraucht werden. Er ist gegen einen Text, der erwähnt, dass "jedes neue Element auf einem alten sein sollte" und "Wenn wir ein Tag ohne Semantik erstellen, kann es überall verwendet werden, ohne jemals falsch zu liegen.Wir müssen die Autoren zwingen, die Semantik ihres Dokuments richtig zu kennzeichnen. Wir müssen die Anbieter von Redakteuren zwingen, diese Auswahl in ihren Schnittstellen explizit zu treffen. "

- Quelle (w3 Wiki)

Aus dem RFC-Entwurf, der Folgendes vorstellt span:

Erstens wird ein generischer Container benötigt, um die Attribute LANG und BIDI zu übertragen, wenn kein anderes Element geeignet ist. Zu diesem Zweck wird das SPAN-Element eingeführt.

- Quelle (IETF-Entwurf)

Geschichte von div:

DIV-Elemente können verwendet werden, um HTML-Dokumente als Hierarchie von Abteilungen zu strukturieren.

...

CENTER wurde von Netscape eingeführt, bevor das HTML 3.0 DIV-Element unterstützt wurde. Es wird aufgrund seiner weit verbreiteten Bereitstellung in HTML 3.2 beibehalten.

HTML 3.2 Spec

Kurz gesagt, beide Elemente entstanden aus der Notwendigkeit eines semantisch generischeren Containers. Span wurde als allgemeinerer Ersatz für ein <text>Element zum Stylen von Text vorgeschlagen. Div wurde als generische Methode zum Teilen von Seiten vorgeschlagen und hatte den zusätzlichen Vorteil, dass das <center>Tag für die Ausrichtung der Inhalte in der Mitte ersetzt wurde. Div war aufgrund seiner Geschichte als Seitenteiler immer ein Blockelement. Span war schon immer ein Inline-Element, da sein ursprünglicher Zweck das Text-Styling war und heute sowohl div als auch span zu generischen Elementen mit Standardblock- bzw. Inline-Anzeigeeigenschaften geworden sind.

Alex W.
quelle
2

In HTML gibt es Tags, die dem Inhalt Struktur oder Semantik hinzufügen. Beispielsweise wird das <p>Tag verwendet, um einen Absatz zu identifizieren. Ein weiteres Beispiel ist das <ol>Tag für eine geordnete Liste.

Wenn in HTML kein geeignetes Tag verfügbar ist, wie oben gezeigt, wird normalerweise auf die Tags <div>und <span>zurückgegriffen.

Das <div>Tag wird verwendet, um einen Blocklevel-Abschnitt / eine Blockebene eines Dokuments zu identifizieren, der / die zuvor und nachher einen Zeilenumbruch aufweist.

Beispiele dafür, wo div-Tags verwendet werden können, sind Kopf- und Fußzeilen, Navigationen usw. In HTML 5 wurden diese Tags jedoch bereits bereitgestellt.

Das <span>Tag wird verwendet, um einen Inline-Abschnitt / eine Inline-Unterteilung eines Dokuments zu identifizieren.

Beispielsweise kann ein Span-Tag verwendet werden, um einem Element Inline-Piktogramme hinzuzufügen.

Robert Rocha
quelle
2

Denken Sie daran, im Grunde genommen und sie selbst führen auch keine Funktion aus. Sie sind nicht nur aufgrund ihrer Tags spezifisch für die Funktionalität .

Sie können nur mit Hilfe von CSS angepasst werden.

Nun zu Ihrer Frage:

SPAN-Tags zusammen mit etwas Styling sind nützlich, wenn Sie innerhalb einer Zeile, z. B. in einem Absatz, im HTML-Code halten. Dies ist eine Art Zeilen- oder Anweisungsebene in HTML.

Beispiel:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

Die DIV-Tag-Funktionalität kann, wie gesagt, nur mit Styling unterstützt werden und kann große Teile des HTML-Codes enthalten.

DIV ist Blockebene

Beispiel:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

Beide haben ihre Zeit und ihren Fall, wann sie verwendet werden sollen, basierend auf Ihren Anforderungen.

Ich hoffe, die Antwort ist klar. Vielen Dank.

yatheendra kv
quelle
Die ideale Antwort, nach der ich gesucht habe.
PHPFan