[thelist] I've found a great use for <span>

aardvark roselli at earthlink.net
Thu Aug 1 09:39:01 CDT 2002


> From: Simon Willison <simon at incutio.com>
>
> I've found a great reason to use <span> - providing content to
> browsers that will not display CSS. Here are two examples.
>
> Example 1: A Site logo graphic.
>
> Say the main header logo of your site is a pretty image with text in
> it. You could display the image straight on the page with an alt tag -
> a perfectly valid and reasonable technique. However, the text of the
> logo really deserves to be marked up as <h1> as it is the first and
> most important header on the page. Also, the image itself is more of a
> presentation thing than a document content thing. Here's my solution:
[...code snip...]
> CSS supporting funky visual browsers will display the logo image.
> Anything that only cares about the HTML document will recieve
> an <h1> tag containing the logo text.

why not set the color of the (text within the) <h1> to transparent?
then the text won't display and you don't need a <span>...  if i had
time, i'd be trying this out right now...


> Example 2: A horizontal menu
>
> Here we want to create a horizontal menu with a number of options in
> it. We want these options to have funky hover over effects,
> backgrounds, borders and generally look nice. In browsers that don't
> support CSS we want them to be seperated by pipes (this is also an
> accessibility issue - Bobby at al get annoyed if you have links with
> nothing seperating them apart from blank space). Here's the HTML:
[...code snip...]

wish i had time to try this out, but i don't think this approach needs
to exist with <span>... instead of pipes, use border attributes (i've
done that more and more lately, and it's very nice)...

so each <a> has a border-right property of 1px solid #whatever
color...  and just don't do the last one... or do border-left and use
first-child pseudo-selectors to not display the border on the first
<a> in the <div>....  obviously, that second one won't enjoy too
much browser support just yet...


--
Read the evolt.org case study
Usability: The Site Speaks for Itself
http://amazon.com/exec/obidos/ASIN/1904151035/evoltorg02-20
ISBN: 1904151035



More information about the thelist mailing list