Stylesheets

[Christian Seiler]

Hallo Jürgen,

Aus Sicht von CSS hat <span> die gleiche Funktion wie <font>.

Nein. <span> ist ein generisches Inline-Element und hat absolut keine Bedeutung, weder visuell noch strukturell noch semantisch. <font> hat dagegen eine Bedeutung, nämlich eine visuelle. In gewissen Fällen ist es durchaus sinnvoll, <span> zu verwenden, vor allem, wenn man Wert auf den »Nicht-Wert« dieses Elements legt.

Beispiel:

Ich habe ein Menü und will es mit CSS formatieren. Das könnte ich dann so in HTML darstellen:

<div id="menu">
<a href="...">Home</a>
<a href="...">Test1</a>
<a href="...">Test2</a>
</div>

#menu { /* irgendwie positioniert */ }
#menu a { display: block; /* weitere attribute */ }

Das Problem dabei ist: die WCAG schreiben sinnvollerweise vor, dass Links durch irgendwelche Zeichen getrennt werden sollten. Ich selbst verwende immer |. (http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-divide-links)

Wenn ich jetzt das a-Element als Blockelement formatiere, dann zerschießt mir das die komplette Darstellung. Deshalb helfe ich mir da mit <span> ab:

HTML:

<div id="menu">
<a href="...">Home</a><span> | </span>
<a href="...">Test1</a><span> | </span>
<a href="...">Test2</a>
</div>

CSS: (media="screen")

#menu { /* irgendwie positioniert */ }
#menu a { display: block; /* weitere attribute */ }
#menu span { display: none; }

Browser, die kein CSS können, zeigen das ganze so an:

Home | Test1 | Test2

Browser, die genug CSS können, (auch Netscape 4) so:

+-----------+
| +-------+ |
| | Home  | |
| +-------+ |
|           |
| +-------+ |
| | Test1 | |
| +-------+ |
|           |
| +-------+ |
| | Test2 | |
| +-------+ |
+-----------+

(ich habe da jetzt um jedes Blockelement (zur Veranschaulichung) einen künstlichen Rahmen gemacht und auch Abstand gelassen - das muss aber nicht so sein, das kommt halt auf die CSS-Deklaration an)

Christian