Semantics of <span>

In Semantics of <span>, Lachlan Hunt argues that in some cases, span is the most appropriate HTML element to use.

I agree with his reasoning. The span element is very often misused (<span class="heading">, anyone?), but when there is no other suitable element available in HTML, it is quite appropriate.

Posted on January 17, 2005 in (X)HTML, Quicklinks

Comments

  1. January 17, 2005 by Lars

    Hello Roger,

    Is this your shortest post ever?

    Well, anyway, I do think that <span class=”something”> is frequently misused, because it is often enough to just insert an empty span and use contextual selectors. Other than that I don’t see much harm in using it. It can even be preferable sometimes. My only concern is with those who argue that <span class=”italic”> is somehow better than <i>. It isn’t.

  2. January 18, 2005 by Jens Wedin

    I use for a few things for example when you want to make an asterix in another colour in forms.

    star Mandatory fields

    label (formfield)
    label star (formfield)
    etc

    css: .asterix {color: #c60}

    html: (span class asterix)*(/span) Mandatory fields

    Then I used it and I don´t see any problem with it either. Do you? (Hope you understand my crapy example :)

  3. January 18, 2005 by Roger Johansson (Author comment)

    Lars: Hehe, nope. These quicklink posts tend to be pretty short.

    Re span: As long as you have considered other options and found that there is no suitable HTML element available I don’t think there is any harm in using a span. As for <i> vs <span class=”italic”>, I agree. That discussion is a bit of a hot potato though ;-)

    Jens: In your example I’d probably either use no class at all or name the class “mandatory”, or something else that better describes its function. What if you decide later on that you don’t want to use an asterisk to mark mandatory fields?

  4. January 18, 2005 by Jens Wedin

    You are absolutely correct about using mandatory instead of asterix. But I still think using a class is needed. As you said, if I decided to make it more visible by adding a background colour etc I would need a class.

    Mayby in the future when there is a possibility to add content (:after and :before) in the css that works for all browser that would be an option.

  5. January 18, 2005 by Roger Johansson (Author comment)

    Jens: My point about perhaps not using a class is that it may not be necessary — you may be able to use contextual selectors to style the span element. That’s not always the case though, so yes, sometimes you will need a class.

  6. January 18, 2005 by Jens Wedin

    OK, I get your point. I have another one that you might have an comment about.

    I have started to add an underline to the letters that are used for access keys. For example a button that states Cancel, the C have an underline. Would it not be OK to have the C surrounded by a span? If the span have a class or not does not really matter, an contextual selector works fine too.

    What I have read is that screen reader DO have problem reading spanned words. Instead of saying Cancel it says C, ancel. I am not sure if this has been fixed in later versions of JAWS or similar.

    But still, I see no problem of using span’s now and then.

  7. January 18, 2005 by Roger Johansson (Author comment)

    Underlining accesskey letters is a nice thought. There are potential problems with screen readers and search engines though. A bit of a discussion on this, and a way of using some DOM scripting to add underlines to accesskey letters can be found in Dynamically underlining accesskeys at Clagnut.

  8. January 19, 2005 by Tommy

    Jens, FYI, it’s called asterisk. Asterix is a cartoon character. :)

  9. January 19, 2005 by Jens Wedin

    LOL, thanks Tommy.

  10. January 19, 2005 by dusoft

    Still: span does not contain any semantics in it!

    SO, it could be useful sometimes, but it would be silly to call it semantically correct.

  11. January 19, 2005 by dusoft

    Jens: re: access keys - the worst thing is to use letters for access keys. Please, pretty please, do not torure your visitors, use numbers instead.

    You are changing the functionality of their browser when using letters as access keys. ALT+S is Sage extensions RSS reader. Unusable at Dave Shea’s site unfortunately. And I thought he has been aware of these heavy pitfalls.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.