DIV vs SPAN

S

sachaburnett

Hi all!

I've been searching the Net for an explanation of the DIV versus SPAN
issue but can't get a clear answer. I understand the DIV is
block-level whereas SPAN is inline, but is it possible to nest SPAN
tags?

For example, both result in the same output, but which is technically
correct:

USING SPAN
<span class="mainText">

<p>Blah blah <span class="blueText">blah</span> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<p>Blah blah blah blah <span class="redText">blah blah </span> blah
blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

</span>


USING DIV
<div class="mainText">

<p>Blah blah <span class="blueText">blah</span> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<p>Blah blah blah blah <span class="redText">blah blah </span> blah
blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

</div>

Thank you very much in advance for your help

SB
 
E

Els


Hello :)
I've been searching the Net for an explanation of the DIV versus SPAN
issue but can't get a clear answer. I understand the DIV is
block-level whereas SPAN is inline, but is it possible to nest SPAN
tags?
Yes.

For example, both result in the same output, but which is technically
correct:

USING SPAN
<span class="mainText">

<p>

USING DIV
<div class="mainText">

<p>Blah blah <span class="blueText">blah</span>

Yup, that's just fine.
Thank you very much in advance for your help

Nesting spans can be done like so:
<span class="blueText">This is blue, and <span class="italicText">this
is both blue and italicized.</span></span>
 
S

Steve Pugh

I've been searching the Net for an explanation of the DIV versus SPAN
issue but can't get a clear answer. I understand the DIV is
block-level whereas SPAN is inline, but is it possible to nest SPAN
tags?

Yes. See http://www.w3.org/TR/html401/struct/global.html#edef-SPAN

<!ELEMENT SPAN - - (%inline;)* -- generic language/style
container -->

The (%inline;)* means that the content of span can be any number of
inline elements. And %inline is defined as <!ENTITY % inline "#PCDATA
| %fontstyle; | %phrase; | %special; | %formctrl;"> where %special is
it turn defined as <!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT
| MAP | Q | SUB | SUP | SPAN | BDO">

Hence span can contain other spans.
For example, both result in the same output, but which is technically
correct:

One of them validates, the other one doesn't. A few seconds with the
validator said:
USING SPAN
<span class="mainText">

<p>Blah blah <span class="blueText">blah</span> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<p>Blah blah blah blah <span class="redText">blah blah </span> blah
blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

</span>

p is not an inline element and hence can not be contained inside a
span. This has nothing to do with nesting spans.

Steve
 
D

David Dorward

I've been searching the Net for an explanation of the DIV versus SPAN
issue but can't get a clear answer. I understand the DIV is
block-level whereas SPAN is inline, but is it possible to nest SPAN
tags?
Yes

For example, both result in the same output, but which is technically
correct:

USING SPAN
<span class="mainText">

<p>Blah blah <span class="blueText">blah</span> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah.</p>

P elements may not be contained without SPAN elements. Different browsers
will error correct in different ways, so some will act like they assume you
intended the span to be a div, and some will act like they assume you close
the span before opening the paragraph.

http://validator.w3.org/ is a useful tool.
<p>Blah blah blah blah <span class="redText">blah blah </span>

That span would probably be better off being an <em> or <strong>.
 
S

sachaburnett

Hi guys!

Thanks so much for the response. FINALLY a clear answer ;-)

I didn't know about the http://validator.w3.org/ site and now that I do
I'm going to spend some time there to check out all my code!

Thanks again!

SB
 
S

sachaburnett

Hi guys,

Along the same note... I've read that nesting DIVs is a bad practice.
True or false?

Is there anything wrong with the following code:

<div id="layoutPage"> <!-- This is to format the page's layout -->

<div class="mainText"> <!-- This is to format a block of text -->

<p>Blah blah <span class="blueText">blah</span> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<p>Blah blah blah blah <span class="redText">blah blah </span> blah
blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

</div>
</div>

Thanks!

SB
 
N

Neredbojias

To further the education of mankind, (e-mail address removed) vouchsafed:
Hi guys,

Along the same note... I've read that nesting DIVs is a bad practice.
True or false?

It can be overdone unnecessarily, but there is nothing intrinsically wrong
with it. However, a lot of authors tend to use <div> when they should use
something more semantically appropriate, like <p> or <hx>.
 
S

Steve Pugh

Along the same note... I've read that nesting DIVs is a bad practice.
True or false?

Depends. There's what's called 'div soup' where the page consists of
almost nothing but divs. That should be avoided.

Start by marking up your content as headings, lists, paragraphs, etc.
Then add divs to group these together into logical and useful
divisions. You may find that some of these divisions are natural
children of others.
Is there anything wrong with the following code:

<div id="layoutPage"> <!-- This is to format the page's layout -->

<div class="mainText"> <!-- This is to format a block of text -->

<p>Blah blah <span class="blueText">blah</span> blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<p>Blah blah blah blah <span class="redText">blah blah </span> blah
blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

</div>
</div>

There's nothing technically wrong with it.

But if that's the whole code then the two divs can be combined.
However, most likely you'll have other things inside the layoutPage
div as well as the mainText div.

And think about using more logical and less presentation orientated
class and id names. class="blueText" is silly if next week you change
the design and end up with .blueText {color: red;}
Ask yourself, why is that text blue? If it's for emphasis then
consider using em or strong instead of span, and then maybe you won't
need a class name at all.

Steve
 
D

dorayme

Steve Pugh said:
And think about using more logical and less presentation orientated
class and id names. class="blueText" is silly if next week you change
the design and end up with .blueText {color: red;}
Ask yourself, why is that text blue? If it's for emphasis then
consider using em or strong instead of span, and then maybe you won't
need a class name at all.

This is right in theory, harder to achieve in practice. To
actually get a job done, it is useful to do exactly like
class="blue" from .blue{color:blue}. Because at the stage of
making things up, you don't know how you want things where.
Inline styles and every inelegancy is the order of the usual day.
At least, I speak for myself and would not be surprised if many
others do same.

In the end, though, this advice comes into its own. You go back
and clean up and try to make actual practice look like how it
should have been done in the first place. In time, hopefully,
practice gets closer to theory. I am not being totally cynical.

Cleaning up afterwards is not only satisfying as an exercise in
itself, but, it - in theory - helps any later changes and
updates. In theory! What actually happens is that the changes are
often so dictated by new material and objectives that one is back
plunging into the grubbiest of techniques (I always double lock
the doors and put dark material on the windows till the job is
finished) and then one cleans up again and feels good and
virtuous.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top