Unterschiede zwischen Div und Span?

[Davelee]

Ein Vorweg: mir ist klar das dass DIV-Element ein Blockelement und das SPAN-Element ein Inlineelement ist.

Aber welchen unterschied gibt es zwischen diesen Elementen wenn ich z.B. dem SPAN Element ein display:block zuweise ( oder umgekehrt dem DIV Element ein display:inline )

z.B.
<style>
.element1 {display:block}
.element2 {display:inline}
</style>

<span class="element1"></span>
<div class="element2"></div>

Werden diese Elemente in diesem Fall als gleichwertig angesehen oder gibt es doch noch unterschiede ( ausser das man keine SPANs verschachteln kann viel ich weiss)

Würde mich auf eure Antworten freuen, David

[Harlequin]

Yerf!

Werden diese Elemente in diesem Fall als gleichwertig angesehen oder gibt es doch noch unterschiede ( ausser das man keine SPANs verschachteln kann viel ich weiss)

Man kann SPANs durchaus verschachteln. Aber genau die Verschachtelungsregeln von HTML machen den Unterschied aus. Ein Absatz (P) darf z.B. kein DIV enthalten.

Hier muss man eben zwischen HTML-Blockelement und CSS-Blockelement unterscheiden. Ein display:inline macht ein DIV nicht zu einem Inline-Element im HTML-Kontext sondern nur im CSS-Kontext.

Gruß,

Harlequin

[RuD]

Seid gegrüßt!

Werden diese Elemente in diesem Fall als gleichwertig angesehen oder gibt es doch noch unterschiede ( ausser das man keine SPANs verschachteln kann viel ich weiss)

Prinzipiell schon, nur wie du korrekt erkannt hast, darf man diese nicht beliebig in jedes Element einfügen, genau so wie man nicht belibige Elemente in diese eifügen darf.

[suit]

Prinzipiell schon, nur wie du korrekt erkannt hast, darf man diese nicht beliebig in jedes Element einfügen, genau so wie man nicht belibige Elemente in diese eifügen darf.

span darf quasi überall vorkommen - ausserhalb von body wirds aber etwas problematisch - span darf als kinder alle beliebigen inline-elemente enthalten

[Beat]

Ein Vorweg: mir ist klar das dass DIV-Element ein Blockelement und das SPAN-Element ein Inlineelement ist.

Aber welchen unterschied gibt es zwischen diesen Elementen wenn ich z.B. dem SPAN Element ein display:block zuweise ( oder umgekehrt dem DIV Element ein display:inline )

Jedes Element ist durch den Browser gewissermassen mit dessen eigenen Default-Stylesheet vorformatiert.
Die Frage ist somit, ob ein Span genau der Default Formatierung des Divs entspricht, wenn man es als ein display:block darstellt.
Die Antwort heisst: Das weiss der jeweilige Browser.

Werden diese Elemente in diesem Fall als gleichwertig angesehen oder gibt es doch noch unterschiede ( ausser das man keine SPANs verschachteln kann viel ich weiss)

Was immer du mit CSS anrichtest, es tangiert nicht die grundsätzlichen Regeln für valides HTML. Das heisst, Ein span bleibt im HTML ein Inlineelement. Es mittels CSS nachträglich als Blockelement darstellen zu lassen, heisst nicht, dass du jetzt in einem span Element plätzlich andere Blockelemente schreiben darfst.

PS: Es ist im Standard nicht festgelegt, dass man <span> nicht verschachteln darf. Es ist lediglich so dass Tidy das in gewissen Einstellungen bemängelt.

mfg Beat

[schwarze Piste]

Tachchen!

Werden diese Elemente in diesem Fall als gleichwertig angesehen oder gibt es doch noch unterschiede

Ein DIV ist dazu da, mehrere Elemente zu gruppieren;
ein SPAN dient dazu, etwas aus einem Element heraus zu selektieren.

Mit (späterer) Formatierung hat ganze selbstverständlich nichts zu tun,
denn HTML funktioniert zur Not auch ohne CSS.

Gruß

Die schwarze Piste

[Davelee]

Ein DIV ist dazu da, mehrere Elemente zu gruppieren;
ein SPAN dient dazu, etwas aus einem Element heraus zu selektieren.

Solche Erklärungen liebe ich :)

Jetzt wird mir auch klar warum man keine DIVs in SPANs verschachteln kann.
Bis jetzt wusste ich nur das man eine span -> div Verschachtelung vermeiden soll- aber nicht aus welchen gründen.

Ich danke euch allen für das Aha-Erlebnis.

[Cheatah]

Hi,

Aber welchen unterschied gibt es zwischen diesen Elementen wenn ich z.B. dem SPAN Element ein display:block zuweise ( oder umgekehrt dem DIV Element ein display:inline )

aus CSS-Sicht gibt es *keinen* Unterschied zwischen den Elementen. Jedes Element verfügt zu jeder Zeit über jede CSS-Eigenschaft, die jeweils jeden gültigen Wert erhalten können - hierbei gibt es ausschließlich Beschränkungen, die CSS auferlegt (wie z.B. dass bei gefloateten Elementen ein display:inline automatisch zu display:block berechnet wird). Ob ein Element nun "div" heißt oder "span", "p", "kbd", "title" oder "foobar" ist CSS herzlich egal.

Das (nach meinem Kenntnisstand) einzige, wo CSS sich derzeit den Begebenheiten des Markups beugen muss, sind Replaced Elements wie etwa <img> oder <object>. CSS kann sie nicht plötzlich zu einem Non-Replaced Element machen. Darüber hinaus muss sich lediglich der Entwickler den Unfähigkeiten gewisser Browser beugen und beispielsweise einsehen, dass sich <title> zwar in einem Firefox wunderbar mit CSS stylen lässt, sich der IE jedoch einen Dreck um den schönsten Code schert.

<style>

ERROR: Required attribute "type" missing.

<span class="element1"></span>
<div class="element2"></div>

Wozu die Klassen?

Werden diese Elemente in diesem Fall als gleichwertig angesehen oder gibt es doch noch unterschiede ( ausser das man keine SPANs verschachteln kann viel ich weiss)

Kann man. Unterschiede sollte es in diesem speziellen Fall üblicherweise neben der display-Eigenschaft nicht geben - und wenn doch, kannst Du sie durch Angabe der entsprechenden Deklarationen mittels CSS beliebig ausgleichen.

Cheatah

[Davelee]

<style>

ERROR: Required attribute "type" missing.

Style habe ich nur auf die schnelle geschrieben damit ihr wisst das dies eine CSS anweisung ist- und aus diesen Grund habe ich auf die vollständige Anweisung verzichtet

<span class="element1"></span>
<div class="element2"></div>

Wozu die Klassen?

Ich habe die Klassen verwendet um die Display Anweisung in CSS zu verändern, natürlich hätte ich auch direkt das Element mit CSS ansprechen können

[Cheatah]

Hi,

Ich habe die Klassen verwendet um die Display Anweisung in CSS zu verändern,

dann sind die HTML-Klassen falsch eingesetzt.

Cheatah

[Oxmox 2.0]

Hallo,

Ich habe die Klassen verwendet um die Display Anweisung in CSS zu verändern,

dann sind die HTML-Klassen falsch eingesetzt.

Ist das jetzt wieder der Versuch eine Spitzfindigkeit bzgl. Formulierung aufzublähen um dann darauf herumzureiten und einen ellenlangen Belehrungsthread zu starten? Oder wieso verstehe ich nicht was Cheatah da schreibt?

Bitte um Erklärung:

Wenn jemand veschiedene DIV-Elemente in seinem HTML-Dokument verwendet und manche davon durch class="element2" mit CSS formatiert z. B. so:

div.element2
{
display:inline;
color:green;
border:1px solid red;
}

Warum ist 'class="..."' dann falsch eingesetzt?

Das ist doch eine der üblichen, in SelfHTML beschriebenen Methoden.

???
-----
Doug Heffernan zu Arthur Spooner: "ICH WILLS DOCH NUR VERSTEHN!"

[amolip]

Hallo Oxmox 2.0,

Warum ist 'class="..."' dann falsch eingesetzt?

HTML ist für die Strukturierung des (textuellen) Inhaltes zuständig. Dabei ergeben sich inhaltliche Klassifizierungen, einerseits durch die Struktur, andererseits durch die Semantik [1]. Für Klassifizierungen, die dadurch nicht abgedeckt sind,ist das HTML-Attribut "class" vorgesehen.

Das "class"-Attribut hat also mit CSS nichts zu tun. Da man eine Webseite "meistens auch für Menschen macht, die sie visuell wahrnehmen wollen" ;-), wird man in aller Regel diese Klassifizierungen auch optisch wahrnehmbar machen.

Gruß Uwe

[1] Oder auch durch Attributwerte wie bei internen und externen Links.

[Cheatah]

Hi,

kleine Ergänzung zu amolips Posting:

Ich habe die Klassen verwendet um die Display Anweisung in CSS zu verändern,
Wenn jemand veschiedene DIV-Elemente in seinem HTML-Dokument verwendet und manche davon durch class="element2" mit CSS formatiert z. B. so:

Darum ging es nicht, sondern um den Einsatz von HTML-Code, *um* eine bestimmte Darstellung zu erreichen. Der Volksmund nennt das "Tabellenlayout", benannt nach dem einst häufigsten Mittel für diesen Missbrauch von HTML zu Darstellungszwecken. Dagegen, eine sinnvoll vorhandene Klasse im CSS-Code zu selektieren, spricht natürlich nichts.

Cheatah

[Oxmox 2.0]

Vielleicht soltet ihr euch einfach mal angewöhnen Antworten zu geben die den Fragenden weiterhelfen anstelle von "XY ist falsch" ohne auch nur den Ansatz einer Erklärung. Diese eher rätselhaften Antworten sind sozusagen "inhaltsleer". Hier wird viel über sinnvolles HTML geredet. Aber keiner macht sich offenbar über die Sinnhaftigkeit seiner oft viel zu knappen Antworten Gedanken. Ich verstehe dass viele erwarten dass der Fragende selbst in SelfHTML recherchiert. Dies ist auch gerechtfertigt. Dennoch bricht man sich mit einem kleinen Hinweis keinen ab.

Ich begreife dieses Vorgehen oft einfach nicht.

[amolip]

Hallo Oxmox 2.0,

ich versuch's mal durch ein Beispiel zu verdeutlichen.

Sagen wir einmal, wir haben zwei Arten von Listen (ul), Listen für wichtige und Listen für unwichtige Sachen. Außerdem soll es noch unspezifische Listen, also ganz normale, geben. Damit haben wir drei Arten, drei Klassen, von Listen. Diese sollen innerhalb der HTML-Struktur willkürlich vorkommen können, sodass sie über die Struktur, nicht zu unterscheiden sind.

Da nur ein semantisches Element (ul) zur Verfügung steht, können die Listen auch nicht von der Semantik her unterschieden werden. Und jetzt kommt das class-Attribut ins Spiel. Die wichtigen Listen klassifizieren wir mit class="wichtig" und die unwichtigen mit class="unwichtig", damit sind alle _drei_ Listenarten unterscheidbar. Im Prinzip erweitern wir mit dem class-Attribut die Semantik.

Wenn das HTML-Dokument nun maschinell gelesen wird, ist alles in Butter, wenn es visuell gelesen wird, sieht man allerdings nicht, dass es unterschiedliche Arten von Listen, Listen mit unterschiedlicher Bedeutung, gibt. Also wird man hingehen und diese unterschiedlichen Listenarten unterschiedlich visuell gestalten. Aber auch mit CSS steht man vor dem Problem, wie man bestimmte Elemente selektieren kann. Über die Struktur geht es hier nicht, da die Listen willkürlich verteilt sind, also bleibt nur die Semantik, hier die "erweiterte Semantik", also beispielsweise "ul.wichtig".

Wenn man etwas klassifiziert, so definiert man, was die Dinge gemeinsam haben (positiv) und was sie von anderen Dingen unterscheidet (negativ). Im Großteil aller Fälle ergibt sich durch die Struktur oder durch die Semantik oder durch eine Kombination aus beiden, die gewünschte Klassifizierung, sozusagen eine implizite Klassifizierung. Und daher ist in diesen Fällen, also im Großteil aller Fälle, eine explizite Klassifizierung, durch Erweiterung der Semantik, schlicht und einfach überflüssig, doppelt gemoppelt, ein weißer Schimmel, ein dummer amolip.

Gruß Uwe