Wann sollte <span> anstelle von <p> verwendet werden?


91

Wie die Frage zeigt, wenn ich Text habe, den ich in den HTML-Code einfügen möchte, wann <p>und wann soll ich ihn verwenden <span>?

Antworten:


87

Beachten Sie, dass HTML den darin enthaltenen Inhalt BESCHREIBEN soll.

Wenn Sie also einen Absatz übermitteln möchten, tun Sie dies.

Ihr Vergleich ist jedoch nicht genau richtig. Der direktere Vergleich wäre

Wann sollte ein <div>anstelle eines verwendet werden <p>?

da beide Elemente auf Blockebene sind.

A <span>ist inline, ähnlich wie ein Anker ( <a>), eine <strong>Betonung ( <em>) usw., denken Sie also daran, dass ein Absatz standardmäßig sowohl in HTML als auch in natürlicher Schrift eine Unterbrechung vor und nach sich selbst verursacht, wie z <div>.

Manchmal, wenn Sie Dinge stylen - Inline-Dinge -, <span>ist a großartig, um Ihnen etwas zu geben, an das Sie das CSS "binden" können, aber ansonsten ist es ein leeres Tag ohne semantische oder stilistische Bedeutung.


7
Achten Sie beim Vergleich von Inline- und Blockelementen darauf, die visuellen Aspekte nicht zu beschreiben. Wie in der HTML5-Spezifikation angegeben , muss a pnicht unbedingt mit umgebenden Zeilenumbrüchen versehen sein, z. B. könnte ein Inline- Pilcrow- Symbol folgen . Die Begriffe "Inline" und "Block" bedeuten auch für blinde Benutzer nichts. Unterscheiden Sie vielmehr zwischen Flow-Inhalten und Phrasierungsinhalten (siehe diesen Link ).
Chharvey

3
Außerdem verhält sich padding-left anders pals on span. Bei Absätzen wirkt sich das Auffüllen auf jede Zeile (Textblock) aus, während es sich beim Span nur auf die erste Zeile auswirkt.
Diynevala

94

Semantisch verwenden Sie <p>Tags, um Absätze anzugeben. <span>wird verwendet, um den CSS-Stil und / oder die Klasse (n) auf einen beliebigen Textabschnitt und Inline-Elemente anzuwenden.


13

Das <p>Tag ist ein pAbsatz und als solches ein Blockelement (wie zum Beispiel h1und div), während spanes ein Inline-Element ist (wie zum Beispiel bund a).

Blockelemente erstellen standardmäßig einige Leerzeichen über und unter sich selbst, und nichts kann neben ihnen ausgerichtet werden, es sei denn, Sie legen ihnen ein floatAttribut fest.

Inline-Elemente behandeln Textbereiche innerhalb eines Absatzes. Sie haben normalerweise keine Ränder, und als solche können Sie beispielsweise keine festlegen width.


Ja, span hat keine Ränder und daher ist es gut als Tabellenzelle (td), HTML-Markup verwenden zu können
Igor Fomenko

6

Span ist völlig nicht semantisch. Es hat keine Bedeutung und dient lediglich als Element für kosmetische Effekte.

Absätze haben eine semantische Bedeutung - sie teilen einer Maschine (wie einem Browser oder einem Bildschirmleser) mit, dass der Inhalt, den sie einkapseln, ein Textblock ist und dieselbe Bedeutung hat wie ein Textabsatz in einem Buch.


5

Semantisch gesehen ist ap ein Absatz-Tag und sollte zum Formatieren eines Textabsatzes verwendet werden. Ein Bereich ist eine Inline-Formatierungsänderung, die nicht semantisch behandelt wird.



4

Eine praktische Erklärung: Standardmäßig <p> </p>werden Zeilenumbrüche vor und nach dem beigefügten Text hinzugefügt (sodass ein Absatz erstellt wird). <span>tut dies nicht, deshalb heißt es inline .


3

Das p-Tag bezeichnet ein Absatzelement. Es hat Ränder / Polsterung angewendet. Eine Spanne ist ein nicht gestyltes Inline-Tag. Ein wichtiger Unterschied besteht darin, dass p ein Blockelement ist, wenn die Spanne inline ist, was bedeutet, dass <p>Hi</p><p>There</p>es auf verschiedenen Linien erscheint, wenn <span>Hi</span><span>There</span>es nebeneinander aufgewickelt wird.


3

Wenn wir zu diesem Zeitpunkt normalen Text verwenden, möchten <p>wir ein <span>Tag. Wenn wir zu diesem Zeitpunkt normalen Text mit einigen Effekten verwenden, möchten wir ein Tag


2

<span> ist ein Inline-Tag, ein <p> ist ein Block-Tag, das für Absätze verwendet wird. Browser rendern eine leere Zeile unter einem Absatz, während <span> s in derselben Zeile gerendert werden.


0

Tag ist ein Element auf Blockebene, aber Tag ist ein Inline-Element. Normalerweise verwenden wir das span-Tag, um innerhalb von Blockelementen zu formatieren. Sie müssen jedoch das span-Tag nicht verwenden, um den Stil zu inline. Blockelement in Inline-Element konvertieren mit "display: inline"


-6
p {
    float: left;
    margin: 0;
}

Es wird kein Abstand vorhanden sein, es sieht ähnlich aus wie span.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.