When to use DIV or SPAN and CLASS or ID

HTML & CSS
1

Hi everyone.

I’ve been using CSS for a while, but just recently I was thinking more about it and I realized I don’t know something that maybe central to CSS.

When to use DIV instead of SPAN and when to use CLASS instead of ID.

Any ideas? I know DIV throws the extra return in there, and ID is useful when using the DOM, but is there any other real distinction?

Like for this code below, I’m trying to design the site without tables since it is an intranet site and I realized, should those SPANs be DIVs or vice versa? What about those classes, should they be IDs. Any ideas?


<div class="header">
<span class="spacer">&nbsp;</span>
<span class="title">Title</span>
<span class="subtitle">Sub title</span>
<div class="spacer">&nbsp;</div>
</div>
2

You can pretty much get away with anything you want. But in general, the differences are inline and block elements for SPANs and DIVs, and the number of times you use it (as well as JavaScript uses) for CLASS and ID.

Searching the forum will turn up countless threads.

3

First off is span and div’s in all honesty it does not matter, they are unstylized tags that have very little barring on the document itself. The only magor difference is that one (div) is a block level element and the other (span) is an inline element and even this can be changed with CSS.

As for class and ID’s, an ID must be a unique name to identify an element for use with Javascript whereas a class can be assigned to ultiple tags. as a general rule, unless your using Javascript, stick with classes and youll be fine.

ie:
BAD
<a href=“home” id=“navigation”>…
<a href=“about” id=“navigation”>…
<a href=“contact” id=“navigation”>…

GOOD
<a href=“home” class=“navigation”>…
<a href=“about” class=“navigation”>…
<a href=“contact” class=“navigation”>…

GOOD
<a href=“home” id=“home”>…
<a href=“about” id=“about”>…
<a href=“contact” id=“contact”>…

as for your example. from what i make out of it, i would probably do something more like…

<div class=“header”>
<h1>Title</h1>
<h2>Sub title</h2>
</div>

This way you are marking up your headings as headings. I would also use CSS to define the margins for the H1 and H2 tag to achieve the “spacer”.

4

The spacer was to get around a mozilla bug. But putting content above and below this, it allowed for the the background color to show properly.

Or am I doing this wrong?

5

Originally posted by m3avrck
[B]The spacer was to get around a mozilla bug. But putting content above and below this, it allowed for the the background color to show properly.

Or am I doing this wrong? [/B]

can you post the css to go with that section you posted before?

6 

div.header{border-bottom:5px solid #669933;background:#e0e0e0}
span.spacer{clear:both;font-size:6px}
span.subtitle{
float:left;
background:transparent;
color:#555555;
font-size:1.2em;
letter-spacing:.15em
}
span.title{
padding-left:1em;
padding-right:4em;
float:left;
background:transparent;
color:#555555;
font-size:1.4em;
letter-spacing:.15em
}