Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

An explaination of the <span> tag.

I know. Kill me. But I just don't get it

7:11 am on Jun 18, 2010 (gmt 0)

New User

5+ Year Member

joined:Sept 21, 2009
votes: 0

I'm sorry, I know that this is a topic that been addressed before. I really don't want to waste your guys time, and I know I'm stupid, but I just don't get the span tag.

A span is used to group elements so that they can be modified through CSS or accessed by Javascript. Unlike a div, which is block, a span is inline. This far I get.

But the problem for me is that I can't visualize what a span looks like. And maybe because I don't fully understand how inline elements work/flow. A div's easy. It's a box. Anything inside the div goes inside a box. A div clears the page. But a span?

Should I imagine a large rectangle that encompasses everything between the span tags of my code? Or a conglomeration of all element containers into a strange orthogonal form? Or, I dunno, a line?

And what's this about not being allowed to put block elements into a span? Why? I tried spanning over one a using display:none, and this seems to work. Did I do something wrong?
8:14 pm on June 24, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 21

a class does not change the meaning of an element in the structure of an HTML document.

I agree... hence why I said pseudo semantic value. From an HTML only perspective, class values have no true semantic meaning, and I was in no way implying that it did. In fact, I thought I made that pretty clear when I said:

but it's not truly semantic (a machine won't know the semantics of what a class is supposed to represent). It's more for the developer.

In other words, if a developer looks at an HTML document and sees this:

<span class="terrain">plain</span>

he/she can probably discern that this particular usage of the word "plain" does not imply "ordinary", but rather implies a terrain. The developer can derive pseudo semantic meaning from the class name. The browser does not derive any semantic meaning from this. That pseudo semantic meaning could then be used by the developer to affect presentation or behavior (CSS and JavaScript respectively).
6:17 am on June 25, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

I think the issue here is the use of the word/term semantics.

Within the context of HTML/css, it is a term to describe the meaning of the html element. As a class does not add/alter the existing semantics it cannot add even a "pseudo" semantic value.

With that aside, of course intelligently named classes help developers identify/distinguish elements as part of managing the html document and improvising readability in the css too. I am challenging lending this credibility by calling it "pseudo semantics" as using the term implies there is a connection between classing elements and the best practise of coding semantically. When - if I understand what you are saying - we would probably agree there is none.

It also ignores that code is for computers to carry content to the users . Code is not for developers. Connecting classes and semantic/pseudo semantic value opens the door (IMO) to (the worse-case / extreme scenario) of using nothing but identified (as in cass/id) generic elements on the basis that as the resulting document has "pseudo semantic value" for the developer, it also has semantic value as an HTML document. Or doing so because that is a lot easier than the developer learning the default presentational behaviour of more semanticaly appropriate HTML elements.

Hence my approach to <span class="terrain">plain</span> would be to ask why the content has been written so that a non-visual user cannot understand the intended meaning without an additional cue. Aim for better copy than "That makes plain the plain is in plain view"

If this is solely presentational, then my question is why the content and document framework have been constructed so that individual words must be presented differently. Sounds like too much visual clutter, poorly constructed copy / containing elements .. or something else that could be improved.

And if that enquiry shows the word really does need to be distinguished, I wonder why you would choose class rather than, for example:
  • For the first instance:
    <dfn title="technical geographical definition">plain</dfn>
  • followed by
    <span title="technical_geographical_definition">plain</span>
  • styled by
    span[title=technical_geographical_definition] {... styles...}

If my question sounds snippy, it's not meant that way - am trying to understand why a class would be preferred over the above when:
  • [delete=makes no sense]it has semantic meaning[/delete] is semantically correct
  • adds additional meaning for the user in a way that is consistent with the reason the individual word might need to be distinguished from the surrounding text
  • allows the element to be styled
  • allows it to be accessed for other purposes
  • creates a framework that can support extremely fine-grained control:
    [title~=technical_geographical_definition] {color:red}
    [title~=one] {font-size:150%}
    [title~=two] {font-size:200%}
    <dfn title="technical_geographical_definition">plain</dfn>
    <span title="Type one technical_geographical_definition">plain</span>
    <span title="Type two technical_geographical_definition">plain</span>
  • is just as human readable as a class
8:10 am on June 26, 2010 (gmt 0)

New User

5+ Year Member

joined:June 26, 2010
votes: 0

ok,it's good.


5:25 pm on June 26, 2010 (gmt 0)



The following 5 messages were cut out to new thread by tedster. New thread at: html/4160196.htm [webmasterworld.com]
10:54 am on Jun 27, 2010 (EDT -4)
9:37 am on June 27, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 2, 2003
votes: 0

As I indicated previously, the style attribute should be used in moderation. By all means, use it for quick and simple experimentation and also in shared code such as a navigation area, but it should not be used routinely to apply fonts, etc. to content. In order to ensure easy maintenance, use the class attribute instead when working with content.

This 35 message thread spans 2 pages: 35