DIV vs SPAN

Discussion in 'HTML' started by sachaburnett@yahoo.com, May 3, 2006.

  1. Guest

    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
    , May 3, 2006
    #1
    1. Advertising

  2. Els Guest

    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/
    Els, May 3, 2006
    #2
    1. Advertising

  3. Steve Pugh Guest

    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/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 <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 <> <http://steve.pugh.net/>
    Steve Pugh, May 3, 2006
    #3
  4. 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
    David Dorward, May 3, 2006
    #4
  5. Guest

    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
    , May 3, 2006
    #5
  6. Guest

    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
    , May 4, 2006
    #6
  7. Neredbojias Guest

    To further the education of mankind, 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.
    Neredbojias, May 4, 2006
    #7
  8. Steve Pugh Guest

    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 <> <http://steve.pugh.net/>
    Steve Pugh, May 4, 2006
    #8
  9. dorayme Guest

    In article <>,
    Steve Pugh <> 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
    dorayme, May 5, 2006
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    547
    dorayme
    Jun 26, 2009
  2. Stéphane Klein
    Replies:
    2
    Views:
    1,759
    John Nagle
    Mar 30, 2010
  3. Stefan Behnel
    Replies:
    0
    Views:
    487
    Stefan Behnel
    Mar 29, 2010
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    277
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    472
    Wang, Jay
    May 25, 2004
Loading...

Share This Page