Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > DIV vs SPAN

Reply
Thread Tools

DIV vs SPAN

 
 
sachaburnett@yahoo.com
Guest
Posts: n/a
 
      05-03-2006
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

 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      05-03-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

> Hi all!


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>


No. You can't nest a <p> inside a <span>. <p> is a block-level
element, and inline elements can't contain block-level elements.

> 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>

--
Els http://locusmeus.com/
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      05-03-2006
(E-Mail Removed) wrote:


>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/...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 <http://validator.w3.org/> would have told you which.

>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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      05-03-2006
(E-Mail Removed) wrote:

> 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>.


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
sachaburnett@yahoo.com
Guest
Posts: n/a
 
      05-03-2006
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

 
Reply With Quote
 
sachaburnett@yahoo.com
Guest
Posts: n/a
 
      05-04-2006
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

 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      05-04-2006
To further the education of mankind, (E-Mail 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>.

--
Neredbojias
Infinity has its limits.
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      05-04-2006
(E-Mail Removed) wrote:

>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
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      05-05-2006
In article <(E-Mail Removed)>,
Steve Pugh <(E-Mail Removed)> wrote:

> 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.

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stéphane Klein Python 2 03-30-2010 12:35 AM
Re: I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stefan Behnel Python 0 03-29-2010 08:14 PM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
DataGrid (body only) contained in <span>...</span> tags Dan Bishop ASP .Net Datagrid Control 2 06-07-2004 04:00 PM
Enable drag and drop to the text between <span></span> Wang, Jay Javascript 5 05-25-2004 09:33 PM



Advertisments