What's The Difference Div/Span and Class/ID ??

Hi i tend to use div class for anything that i want to style, however i see many people use span instead of a div.

So I was wondering :

1. What is the difference between using a DIV and a SPAN tag? Any ads or disads or reasons justifiying the use are welcome.

2.What is the difference between using an ID or Class? Again reasons justifying why are welcome.

Many Thanks in Advance.

 

There are people on this forum that can explain the technical differences between a DIV and SPAN much better than I can. However here is the difference:

Divs are a block-level element. They are intended to be used to DIVIDE or section the page. I use divs mostly for anything that has to do with the page layout.

Spans are simply a way for applying styling to anything that is inside the span. I usually use these to apply CSS styles to something very specific. However, by using CSS you can make spans and divs (and almost anything else for that matter) do just about anything. Do some research on "semantic HTML" to make sure that you are using the proper tags for the proper purpose.

IDs are used to IDENTIFY a unique element on the page. IDs can only be used ONCE per page. You can also use IDs to modify specific elements with JavaScript.

Classes are used to CLASSIFY how certain elements are styled. They can be used multiple times on the same page.

 

ChaosFoo did a very nice job of explaining. I would like to expand a bit on the div/span question.

Both elements are non-semantic—they don't describe what the content is. Consider the ul or ol. Each says, "I am a container for a list". The li says, "I am an item in a list". All very semantic, and just what your markup should be.

The div and span have different purposes.

The div acts as a structural aggregator. Think of it as a box for holding other elements, and creating a context for those elements. You can put other elements, say, menus (lists), headers, Google ads, paragraphs and images, into it and treat the whole thing as a unit.

The span is a segregator. It sets bits of inline content aside for special treatment. It isn't used as much (or shouldn't be) since there are usually semantic elements better suited. eg.

<p>John's asking two girls to the dance was a <span lang="fr">faux pas</span>.</p>
<p>The distance traveled under acceleration is <span class="hilite">&frac12;at<sup>2</sup</span>.</p>
=========
span[lang] {
  font-style: italic;
  }

.hilite {
  color: yellow;
  }

Code (markup):

cheers,

gary

 

Actually Gary, they are semantic. They're just "semantically neutral" meaning that that they have a meaning (in this case, "generic container"), but that it isn't defined other than being either a block-level and inline-level element respectively.

 

Nice one Chaos, Gary and Dan I think my understanding of this is a lot better now..
So basically from now on only use ID for say Header, Footer, Content, Sidebar, Nav.
Only use Span for very specific things, as in Gary's example.
I'll also go and google semantic HTML and see what i can dig up.

It's just that i worry when i see you guys comment on code as being Div Class happy and i think mine in similar, but i cannot find any alternatives.

Again Many Thanks.

 

We may be arguing semantics here D couldn't resist). These element tags are structural, but do not, in any way, describe their contents, which is what a semantic element tag would do.

The non-semantic-ness of the elements is why, wd_2k6, we talk of divitis, or overuse of the div element. Use the tag that describes its content; use the div to group multiple elements to be treated as a unit.

cheers,

gary

 

In a way they kinda do. A DIV is "a division of a page" whereas a SPAN is "a span of inline content". You could make the arguement that they do describe their contents, though the description is, as I said earlier, rather generic.

 

That it says "I am a box" is not equivalent to "my content is a list". It is a delicate distinction, but important.

gary