<DIV> <SPAN> Question...

  • boiselifer
  • Beginner
  • Beginner
  • User avatar
  • Posts: 49
  • Loc: Boise of course. =)

Post 3+ Months Ago

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!! 8)

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!! 8)
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

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.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

http://www.csszengarden.com
just because you seem to like css :D
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

The Garden rocks. Great idea, fantastic contributions.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

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.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Care to explain why Sam ? :)
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

Sam Hughes wrote:
...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.

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.
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

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
  • boiselifer
  • Beginner
  • Beginner
  • User avatar
  • Posts: 49
  • Loc: Boise of course. =)

Post 3+ Months Ago

Hey, Thanks Guys!

Appreciate all the responses.

I will check out that zengarden site! 8)
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

joebert wrote:
Care to explain why Sam ? :)


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.
  • monoheinz
  • Student
  • Student
  • User avatar
  • Posts: 79
  • Loc: Norway

Post 3+ Months Ago

Sam Hughes wrote:
Of course, em should not be used, for that would be lying.

:?:
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 :)
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

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.
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

Sam Hughes wrote:
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...
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Well that is true.

However, you are wrong when you say "<em> will italicize words." <em> is different than <i>.
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

huh?
If you do:

Code: [ Select ]
<html>
<em>word</em>
<br/>
<i>word</i>
</html>
  1. <html>
  2. <em>word</em>
  3. <br/>
  4. <i>word</i>
  5. </html>

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
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

EM and I elements don't "do" anything. They have meanings. EM indicates its content is emphatic. I indicates its content is, um, italicized (which means at least that its content is different in some nature from the surrounding content).

They do not do the exact same thing, unless you take the narrowminded view of looking at contemporary browser behavior. HTML is a semantic markup language (albeit weakly so), a fact whose benefits are realized in scenarios people didn't think of at first. For instance, the benefits of having semantic markup such as H1 wasn't realized until Google came along - much more can be gleaned about the topic of a document from its headings than can be gleaned from meta elements. Also, an aural browser can behave much more confidently when it encounters an EM versus when it encounters an I, because it knows what EM means. HTML is not a presentational language (3.2 excepted).

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: No registered users and 18 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.