02.02.06SPAN - DIV der Inline Elemente
DIV dienen dazu, eine Website in verschiedene Bereiche zu gliedern. Semantisch haben diese Elemente keine Relevanz, sind dennoch Bestandteil guter Websites. Sie werden zur Einteilung einer Website in verschiedene Bereiche genutzt. Sie dienen Präsentationszwecken bzw. gestalterischen Aufgaben im Webdesign.
Ähnlich verhält es sich mit den SPAN-Elementen. Diese Inline Elemente ermöglichen die gezielte – andersartige – Gestaltung von Bereichen im Textfluss. Aber das Element eignet sich auch gut, wenn es um das Verständnis der Inhalte geht, wie z.B. bei Sprachwechseln.
<p>Im Englischen nennt man sowas <span lang="en">clean and clear</span>.</p>
Nach der kurzen Passage innerhalb des SPAN, für die die Sprache auf Englisch (en) gesetzt wurde, geht es mit der eigentlichen Dokumentsprache weiter. SPAN haben, genau wie auch die DIV, keinen Einfluss auf die Logik des Dokuments. Sie besitzen keine semantische Relevanz. Gerade der Aspekt der Semantik bzw. eine imho unsaubere Interpretation von der Semantik einer Website, hat dazu geführt, dass mancher Orts SPAN kategorisch vom Einsatz auf einer sauberen Website ausgeschlossen wurden.
Nicht sinnvoll, leider aber noch zu oft zu beobachten, ist der Einsatz zur Darstellung von Zitaten etc. mit entsprechend gestalteten SPAN-Elementen.
So bitte nicht. Für Zitate gibt es bessere Möglichkeiten. Dazu sollen SPAN-Elemente nicht missbraucht werden.
Fazit
SPAN dürfen eingesetzt werden und oft ist man dringend auf ihren Einsatz angewiesen. Das oberste Gebot, wie auch bei den DIV: Zuerst über zur Verfügung stehende Elemente nachdenken. Sieht man dann keine andere Lösung, darf über den sparsamen Einsatz von SPAN nachgedacht werden.
Stefan am Feb 5, 2006 | Reply
wäre ebenso denkbar wie eindeutig und müsste sogar noch nicht einmal als Individualformat im CSS auftauchen.
Bei inline Elementen lassen sich dank XML-basierter Webseite auch Elemente weiterer Namensräume einbinden und ein
clean and clearwäre auch möglich.
Haschek am Feb 7, 2006 | Reply
Ich denke, dass beiden Elementen durchaus eine semantische Bedeutung zugestanden werden kann (wenn auch nicht so einfach und direkt wie z.B. P), du zeigst es im Falle des SPAN doch selber in deinem Beispiel.
Oder wie würde man das HTML2-Element SECTION denn momentan umsetzen, doch evtl. mit DIV, somit scheint auch hier durchaus Semantik dabei zu sein. Nicht?
Björn am Feb 7, 2006 | Reply
Es hat mich schon gewundert, dass es so lange gedauert hat, bis dieser Einwand kam.
Die Bedeutung bei der Sache bringt aber das erweiternde Attribut “lang” mit, dass auch für viele andere Elemente Anwendung finden kann.
DIV und SPAN sind hauptsächlich der Präsentation der Inhalte dienlich. Im Fall der DIV meist der Dimensionierung bestimmter Bereiche über die entsprechenden CSS-Eigenschaften.
Für Fälle, in denen bessere Elemente zur Verfügung stehen, sollten diese verwendet werden. Da für für Hauptbereiche keine besseren Möglichkeiten haben, nehmen wir DIV. Natürlich Grenzen wir so logische Einheiten der Website ab, diese sind zunächst aber mal leer. Sie enthalten dann wiederum Elemente, die Inhalte der Website tragen.
Wenn Du das XHTML2 Element SECTION meinst, dann ersetzt man bzw. setzt man bisher dieses nicht mit DIV um. Es wird ja erst noch kommen. Sondern umgekehrt wird dieses neue Element dann bessere bzw. erweiternde Möglichkeiten bieten, Webdokumente logisch und sinnvoller anzuordnen, die DIV nicht besitzen. Wobei dann DIV dann weiter Verwendung finden werden - nicht ersetzt werden.
Siegfried am Feb 7, 2006 | Reply
Beides sind Container, denen man im Gegensatz zu anderen Containern wie z.B. h1 erstmal eine Bedeutung geben muß. Das tut man z.B. durch passende Klassennamen oder IDs. Bei span macht zusätzlich auch lang Sinn. Auch ein title könnte bei divs und spans eventuell Sinn machen. Aber ganz bestimmt nicht, um damit das Aussehen dieser Elemente zu beeinflussen, sondern um die Semantik dieses Containers festzulegen.
Ich wüsste z.B. nicht, warum der Inhalt eines span lang=”en” irgendwie optisch anders dargestellt werden sollte als der restliche Text. Beim Vorlesen hingegen macht das schon einen Unterschied. Ein span lang=”en” dient ganz im Sinne des Semantik Markup nicht der Festlegung des Aussehens, sondern der Festlegung der Bedeutung. Die fehlende semantische Vorbelegung von div und span heißt noch lange nicht, daß man durch die Verwendung dieser Elemente auf semantisches Markup verzichten kann. Genausowenig wie der Verzicht auf diese Elemente das semantische Markup verbessert. Semantisch leere Container dienen dazu, die Möglichkeiten des semantischen Markup auszuweiten auf Inhalte, deren Markup mit den Standardelementen nicht vorgesehen ist.
Interessant in diesem Zusammenhang ist übrigens auch die Initiative rund um die “Microformats”. Denn auch einem Paragraphen oder gar einem h1 kann man mit den richtigen Klassennamen zusätzliche und hoffentlich präzisere Bedeutung verleihen. Und nicht jeder h1 class=”sonstwas” muß nur deswegen optisch anders dargestellt werden als andere h1-Elemente.
Björn am Feb 7, 2006 | Reply
Nehmen wir das Beispiel DIV. Schreibe ich ohne weiteres Zutun dort Text hinein. Was ist das dann? Ein DIV? Was ist ein DIV? Ergänzende Elemente wird man innerhalb des DIV verwenden. Z.B. eine Liste (UL) um irgendwas aufzulisten. Der DIV alleine leistet das nicht, vor allem auch nicht für Screenreader z.B.
Es geht mir nicht darum, zu zeigen, dass die beiden Elemente rein desigtechnische Aufgaben erfüllen. Den Sinn geben ihnen jedoch erst erweiternde Attribute, wie z.B. die angesprochenen IDs. Bzw. erhalten die enthaltenen Inhalte erst Bedeutung über die innerhalb der DIV verwendeten Elemente UL, P etc.
Die Microformats zeigen, wie man diese Elemente erweitern kann. Genauso z.B. Javascript, wo über die ID Elemente angesprochen werden.
Siegfried am Feb 7, 2006 | Reply
Und ein div oder span ohne jegliches Attribut hat in der Tat kaum eine Daseinsberechtigung. Aber ein div oder span mit den richtigen Attributen ist ganz und gar im Sinne des Semantic Markup, und das sind wichtige Elemente. Man darf sie nur nicht missverstehen oder missbrauchen. Und da ihnen die semantische Vorbelegung fehlt, ist ein Missbrauch natürlich um so leichter.
Björn am Feb 7, 2006 | Reply
Siegfried, genau darauf wollte ich raus. Aber ich denke, ich habe mich etwas umständlich ausgedrückt. Aber nochmal: Danke für Deinen Einsatz :-)
Haschek am Feb 8, 2006 | Reply
so trocken finde ich die Diskussion nicht, im Gegenteil. Ich denke auch, dass wir in eine Richtung denken, aber das etwas (evtl. nach Prioritäten) anders ausdrücken. Betrachtungen von SPAN und DIV und deren sematischer Gehalt hilft mit viel Optimismus evtl. auch, Missbrauch dieser Elemente (z.B. Diveritis) vorzubeugen :)
Allerdings glaube ich, dass SPAN und DIV durchaus auch ohne Attribute eine semantische Relevanz haben können, auch wenn das vom Standard aus (evtl.) nicht direkt vorgesehen ist. Kurz zwei Beispiele:
Wenn ich mal annehme, dass eine Klammerbemerkung im direkten Lesefluss meines Satzes eine gegenüber der Wichtigkeit des Restes eine heruntersetzende Wirkung hat, könnte ich das durchaus für mich mit SPAN ohne Attribute lösen (z.B. das “(evtl.)” weiter oben). Das hat erstmal auch nichts damit zu tun, ob ich das nun optisch/akustisch mitteile.
Genauso für DIV, ich komme nochmal zu meinen SECTION-Beispiel (natürlich meinte ich XHTML2). Hier wollte ich nicht sagen, dass DIV das momentane Äquivalent ist, aber trotzdem kann ich eine SECTION-Struktur in meinen pre-XHTML2-Dokumenten mit DIV nachbilden. In diesem Falle würden diese DIVs auch ohne Attribute einen semantischen Gehalt haben, genau den des kommenden SECTION Elementes.
Ein wichtiger Punkt meines ersten Kommentares ist leider etwas untergegangen: Referenzen. Ich denke, dass es unheimlich wichtig ist, eigene Aussagen (in Björn’s Fall: Semantisch haben diese Elemente keine Relevanz.)zu untermauern. Das dürfen auch gern ein wenig wissenschaftlichere Quellen sein, denn durch eine Wiederholung einer Aussage in anderen Weblogs wird nicht unbedingt eine richtige Aussage daraus :)
Haschek am Feb 8, 2006 | Reply
Ist mir schon klar, aber imho sind id bzw. class-Angebn nicht zwingend nötig, sofern ich die Elemente nicht in unterschiedlichen semantischen Kontexten nutze.
Andy am Apr 22, 2006 | Reply