Unterschied div und span

Ein Div Element ist ein Blockelement. Ein Blockelement erzeugt automatisch eine neue Zeile /einen Zeilenumbruch.

Ein Div Element darf andere Div und andere Blockelemente (wie H1-H6, p, usw. enthalten.

Ein Div sollte semantisch richtig eingesetzt einen „längeren“ Abschnitt einleiten.

Ein Span Element ist ein inline Element. Inline Elemente erzeugen keine neue Zeile /keinen Zeilenumbruch.

Ein Inlineelement darf keine Blockelemente enthalten aber andere Inlineelemente.

War diese Informtion nützlich so freu ich mich über einen Social Bookmark, übers Weitersagen oder einfach einen Kommentar. Danke!

mts

Ebenfalls informativ und lesenswert

15 Kommentare zu “Unterschied div und span

  1. DankSagung

    Hiho,
    Danke, dass du das mal klargestellt hast, diese Seite ist das 3. Ergebnis wenn man bei Google „Unterschied zwischen span und div“ eingibt. Aus SELFHTML geht mMn. nur schlecht heraus, wo genau die Unterschiede liegen…

    Gruß
    Anonym (wieso soll ich meinen Namen für sowas kurzes und eigentlich fast unbedeutendes hinterlassen?)

    edit von mts:
    Eine Namen, es muss nicht Dein wirklicher Name sein,aber wie sollt ich sonst antworten, wenn alle, die kommentieren nichts hineinschreiben?

    hallo anonym 4 ,
    oder
    Hi anonym 6 😉

    lg und danke für die Rückmeldung hat mich sehr gefreut

  2. peavey

    Ok aber wenn ich jetzt beigehe und eine Webseite design will, was kann man mir dann raten was zu nehmen….div oder span

  3. Wini

    Also Divs sind eigentlich die Grundstruktur einer Website, die mit css gestaltet ist. DIV = Container.
    Span braucht man eigentlich nur wenn man gewisse Wörter/sätze besonders hervorheben möchte. Versteh eigentlich nicht ganz wie man die beiden überhaupt vergleichen kann. 🙂
    http://www.mediaevent.de/xhtml/span.html
    Vielleicht hilft das.

  4. Michael

    Ja danke für den Beitrag. Habe das gerade in Google gesucht und bin froh, dass ich direkt im ersten Eintrag fündig geworden bin. Kurz und knapp. Danke!

  5. Byteground

    Ebenfalls Danke für die Erklärung, bin ebenfalls durch Google darauf gestoßen.

  6. Tim

    Man könnte beide Elemente auch mit CSS umwandeln: „display: block“ (für div) und „display: inline“ (für span)
    Mit diesen CSS Angaben kann man auch jedes beliebige andere HTML-Element in ein Block oder Zeilenelement umwandeln!
    Beide Elemente sind nichts weiter als ein Gruppierungselement. Eigentlich hätte eins von beiden gereicht, welches man mit „display block/inline“ richtig formatieren kann.

    Im span-Element kann man logischerweise auch keinen Text (links/rechts/mittig) ausrichten.

    Divs waren ursprünglich nicht die Grundstruktur einer Webseite. Auch Programme können anhand von Divs keine Webseite strukturiert lesen. Für die inhaltliche Strukturierung gibt es die h1, h2, p, …

    Ein Div muss meiner Meinung (auch wenn er semantisch richtig eingesetzt wird) nicht immer „lang“ sein.

    Den Unterschied zwischen Div und Span sieht man am besten, wenn man mal _style=border: 1px solid black;_ (in Anführungsstrichen) bei einem Div und bei einem Span ergänzt.
    Am besten in einem x-beliebigen Text zuerst ein Wort mit divs umgeben und dann mit spans. Beides mit dem CSS-Rahmen umgeben und schon sieht man den Unterschied!

    Ich hoffe, aus meinen wirren Sätzen konnte jetzt noch jemand was entnehmen.

    Gruß,
    Tim

  7. Jan

    1. Treffer auf google.de bei der Suche nach „div und span“, und erklärt den Unterschied imo ziemlich gut; mir zumindest war auf Anhieb klar, wo er liegt. Danke! 🙂

  8. dyingangel

    Im Prinzip schon gewusst 🙂
    Aber trotzdem gut zu wissen dass Anfängern noch weitergeholfen wird. Gut dass es leute gibt die ihr Wissen bereitwillig und gerne weitergeben. Dafür bedanke ich mich, weiter so. Nette Referenzen 😉

    gruß dyingangel

  9. Kapuzino

    Weitergeholfen hat mir eigentlich nur der ergänzende Hinweis von Tim.

  10. Maschmo

    Danke habe einen Div in einem Span gehabt, damit war der Validator nicht zufrieden !!!