<DIV> <SPAN> Question...

I have been reading up on CSS this week and let me tell YOU...very impressive!! From what I have gathered, a lot of rules, tags, terms, are now more similar to what you would see in the print world...cool enough.

I am so excited I could SCREAM!! After a couple years of hacking sites together using html, this has been refreshing to say the least, especially coming in as a graphic designer.

Anyway..to my question. What is the definition of the <DIV> and <SPAN> tags?

Are they delegated to holding certain content...kind of like a table?

I'm just slightly confused with these. If someone could s p e l l it out for me that would be GREAT!!

One more thing for you veteran web designers/developers...how do you decide to use straight css code or a combo of css (for text colors etc.) and html tables?

Thanks!!

The beauty of div and span is that they are not delegated to any special content. They are purely there for design purposes. This means you shall still use H1, P etc in your markup so that bots and text-browsers (to name a few) can tell which is which.

DIVs are boxes. You can throw all your other stuff in there to to control it, much like a real life box can.
The SPAN is a little different. By default it displays inline, meaning it doesn't break the text if you put it in between a paragraph. This is a great way to style a small part of the text, for example if you want to give some words a different colour than the rest of the text. Although I have to admit that I don't like using it too much like this as it gives me a feeling of going back to the 1997 way of doing things.

http://www.csszengarden.com
just because you seem to like css

The Garden rocks. Great idea, fantastic contributions.

Albeit a bit impractical. Anyway...

Only use DIV and SPAN as a last resort. They're not bad to use at all, but if you want to italicize text, for instance, use I or EM. Remember that using elements with any vague amount of semantical meaning (even I or B) is better than using SPANs.

Care to explain why Sam ?

This was part of my point. But I sometimes use <span> to style text that I want to display in another way than <em> or <strong>. But obviously, semantically speaking it's not a good solution.

I usually break it down this way... it's may not be the best, but it's worked for me so far.

I use DIV to format or position multiple tables as a single layer.

I use TABLE to position a single table as a layer

I use SPAN to position a group of content that isn't in a table (an image with some text, for example, but no table, or perhaps intra-table).

Since we can attach a NAME and ID to any element nowadays, we're no longer pigeon-holed into using SPAN and DIV as out only options for layers (or LAYER in old school netscape). You can use CSS-P to position an IMG element all by itself without wrapping a SPAN around it, for example.

As far as semantically meaning tags go (B, I, U, etc), I suggest not changing the fundamental use of them. Use B (or strong, whatever) to make things bold. You can use CSS to change the defaults of how bold, but still, for ease of use, it's best to leave the semantic tags alone... I mean, it might be fun to make I tags do bold, and B tags do italics.. but really... come on =]

.c

Hey, Thanks Guys!

Appreciate all the responses.

I will check out that zengarden site!

Because <i> has more semantic meaning than <span>. Suppose, for instance, that you wanted all taxonomes (which is a word I made up), such as homo sapiens, to be italicized. It is common practice to italicize non-English words in English text. You have two elementary options: Use <span class="taxon"> or use <i>. The span element is at least as semantically meaningless as the presentational i element. Of course, em should not be used, for that would be lying.

There is thus the choice between using long markup which requires extra CSS definitions with possibly less semantic value, or using the i element.

In fact, the i element is more meaningful than span, because it indicates at least that something is different about the text inside it, relative to the outside text (as opposed to span, which does not result in different treatment in rendering by default and is often used for different reasons, such as positioning, or things like setting nowrap or adjusting word spacing on numbers). The i element (and b element) don't do much to explain how the internal text is different, but at least browsers know that they are different. A character cell browser, for instance, could (and do) render i elements with a different color, and a voice renderer might use a slightly different tone of voice.

I hardly ever use I and B. From what I understand they have no semantic value, as opposed to EM and STRONG which are parsed correctly by browsers for blind people etc. However I have no idea where and when I picked this up, and I'd only be happy to stand corrected if this turns out to be wrong

EM and STRONG semantically mean, "this is emphasized text," and, "this is strongly emphasized text," respectively. In the case of taxonomy, such as homo sapiens or nyctea scandiaca, the names of the animals are not being emphasized; the italics are merely typical practice for typesetting scientific names. To use EM would be to indicate the element's content as emphatic. Since they are not so, using EM would be saying the wrong thing about the content.

I and B should not be used in place of EM and STRONG, when EM and STRONG are applicable, but at times (like taxonomy) they are not.

Talk about semantics =]

The point is, when a tag is considered to be used for something specific, there's no point in using CSS to re-engineer it to do something else because it can lead to confusion should anyone try and read your code... that's all I meant. <em> will italicize words. <strong> will increase their weight. <strong> doesn't italicize AND bold.... What I'm saying is, for sake of easy to read code, it would be better to use <b><i> or <strong><em> as opposed to simply <i> and using a stylesheet to force the <i> tag to both italicize and bold...

Well that is true.

However, you are wrong when you say "<em> will italicize words." <em> is different than <i>.

huh?
If you do:


They will come out looking exactly the same... Even if EM has some special meaning beyond just italics... it doesn't really matter because at the end of the day, they do the exact same thing.

.c