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

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.

• divist ein Blockelement
• spanist ein Inline-Element .

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?

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 .

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.

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

<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.

<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>

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>

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.

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.

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

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.

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.

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.

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.