<span> vs. <div>

[DerOetzi]

Servus Forum,

ich möchte in einem längeren Absatz verschiedene Satzteile unterschiedlich formatieren. Ich denke, ich kann hierfür sowohl <span> als auch <div> verwenden und dann jeweils mit dem Style-Attribut dort die Formatierung hinzufügen.

Wann macht es Sinn <span> zu verwenden und wann <div>. In diesem Kontext kommen mir die beiden sehr ähnlich vor, außer dass <div> mir mehr Möglichkeiten bietet? Warum gibt es denn überhaupt <span>?

 

[Oliver77]

<span> nutzt man klassischer Weise zum Formatieren. Wenn du zum Beispiel eine Überschrift in Rot und Schwarz hast stylest du es mit span.
<div> dient für Abschnitte.

 

[msi]

Siehe https://wiki.selfhtml.org/wiki/HTML/Elemente/span und https://wiki.selfhtml.org/wiki/HTML/Elemente/div

 

[DerFrager]

Siehe https://wiki.selfhtml.org/wiki/HTML/Elemente/span und https://wiki.selfhtml.org/wiki/HTML/Elemente/div

Ich weiss ja nicht, aber diese SelfHTML Beschreibungen sind irgendwie auch nicht so richtig gut verständlich. Hier einmal die Kernaussagen der Links die Du geteilt hast.

Zitat:

Das span-Element ist ein Element ohne semantische Bedeutung. Es dient nur dazu Textbereiche anders formatieren zu können.

und Zitat 2:

Das div-Element gruppierendes Element ohne semantische Bedeutung. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können.

Also beide haben keine semantische Bedeutung. (Irgendwie unwichtig für die Fragestellung). Span formatiert nur "Texte", Div formatiert "Bereiche". Im Grunde also ist Span dann eine Unterklasse von Div, aber im Grunde kannst Du wohl Texte mit beidem formatieren.

 

[AndreasB]

<div> hat display: block
<span> hat display: inline

Das ist so der einzige Unterschied.

 

[admin]

Super Antwort @AndreasB!

Hier nochmal etwas ausführlicher:

Die HTML-Tags <span> und <div> dienen beide dazu, ähnliche Teile einer Webseite zu gruppieren, jedoch weisen sie wichtige Unterschiede auf.

<span> ist ein inline-Element, während <div> ein block-Element ist. Das bedeutet, dass <span>-Elemente inline mit anderen Elementen erscheinen, während <div>-Elemente einen neuen Abschnitt beginnen.

<span> wird meistens verwendet, um Text zu formatieren, während <div> genutzt wird, um die Struktur einer Webseite zu definieren. Zum Beispiel kann ein <span>-Element verwendet werden, um Text fett oder kursiv zu formatieren, während ein <div>-Element genutzt wird, um einen Absatz oder eine Überschrift zu erstellen.

Beide Tags können auch kombiniert werden. Zum Beispiel kann ein <div>-Element verwendet werden, um den Rahmen für ein Formular zu erstellen, während <span>-Elemente dazu dienen können, die einzelnen Felder des Formulars zu formatieren.

Hier ist eine Übersicht der Unterschiede zwischen <span> und <div>:

Eigenschaft	<span>	<div>
Elementtyp	inline	block
Verwendung	Textformatierung, allgemeine Gruppierung	Strukturierung von Webseiten
Beispiele	Fetter Text, kursiver Text, farbiger Text	Absatz, Überschrift, Menü

Die Entscheidung, ob <span> oder <div> besser geeignet ist, hängt von den spezifischen Anforderungen des Webprojekts ab. Wenn es darum geht, Text zu formatieren, ist <span> in der Regel die bessere Wahl. Wenn es darum geht, die Struktur einer Webseite zu definieren, ist <div> in der Regel die bessere Wahl.

 

[tk1234]

Zum Beispiel kann ein <span>-Element verwendet werden, um Text fett oder kursiv zu formatieren, während ein <div>-Element genutzt wird, um einen Absatz oder eine Überschrift zu erstellen.

Nein. Um Text hervorzuheben gibt es u.a. <em> oder <strong>, um Absätze zu erstellen <p>, für Überschriften <h1>, <h2> usw. und für Menüs <nav> (und <menu>) - da <span> bzw. <div> zu verwenden ist falsch. <span> und <div> sind ausschließlich für den Fall da dass es kein semantisch passendes Element gibt.