difference between DIV and SPAN

Discussion in 'HTML' started by ppcguy, Aug 15, 2005.

  1. ppcguy

    ppcguy Guest

    what's the difference between the two - if any...

    thanks.
     
    ppcguy, Aug 15, 2005
    #1
    1. Advertising

  2. ppcguy wrote:

    > what's the difference between the two - if any...


    Please don't assume people will read the subject line, the body of your
    message should stand alone.

    Divs are block level elements (and can be contained only in (some) other
    block level elements).

    Spans are inline elements (and can not contain block level elements, but can
    be contained in inline level elements).

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Aug 15, 2005
    #2
    1. Advertising

  3. ppcguy

    Adrienne Guest

    Gazing into my crystal ball I observed "ppcguy" <>
    writing in news:m%7Me.10921$%:

    > what's the difference between the two - if any...
    >
    > thanks.
    >
    >
    >


    DIV is a block level element, SPAN is an inline element. Both should be
    used sparingly as there is usually some element that fits better
    semantically, for example:

    *** Bad ***
    <table>
    <tr>
    <td>
    <a href="index.html">Home</a><br>
    <a href="contact.html">Contact</a>
    </td>
    <td>
    <div class="h1">Living with Toddlers</div>
    <p>The toddler was <span style="font-weight:bold">very</span> tired.</p>
    </td>
    </tr>
    </table>

    *** Good ***
    <div id="menu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
    <div id="content">
    <h1>Living with Toddlers</div>
    <p>The toddler was <em>very</em> tired.</p>
    </div>

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Aug 15, 2005
    #3
  4. ppcguy

    Andy Dingley Guest

    On Mon, 15 Aug 2005 21:42:42 GMT, "ppcguy" <> wrote:

    >what's the difference between the two - if any...


    Go read the spec (the one and only true spec - and it's free!)
    http://www.w3.org/TR/html4/struct/global.html#edef-DIV

    The first difference is in their content model - you can put %flow;
    elements into a <div> and %inline; elements into a <span>. %flow is
    itself defined as the union of both %block; and %inline;

    So <span> can only have %inline; "stuff" put into it, %div; can also
    have %block; stuff put into it. Read the spec for the full details, but
    "inline" means strings of text and those bits of HTML markup that affect
    character-level formatting (bold etc.) without affecting linebreaks.
    "block" is the other stuff: paragraph and line breaks etc.

    There's also a difference in where you can use these two elements. You
    can't put a block element inside an inline element, so
    <div><span>...</span></div> is OK, but <span><div>...</div></span> is
    invalid. In general the appropriate parents are pretty obvious in HTML
    - most things are obviously one or the other, but read the spec for the
    full details.

    As far as their styling goes, then you can apply any CSS you like
    equally well to either of them. You can even use display:block; to make
    a <span> _look_ like a <div> and vice versa with display:inline;, but
    this still won't change the DTD rules about what can go inside what.


    --
    Cats have nine lives, which is why they rarely post to Usenet.
     
    Andy Dingley, Aug 15, 2005
    #4
  5. ppcguy

    Spartanicus Guest

    Adrienne <> wrote:

    >*** Good ***
    ><div id="menu">
    ><ul>
    ><li><a href="index.html">Home</a></li>
    ><li><a href="contact.html">Contact</a></li>
    ></ul>
    ></div>


    Superfluous usage of a div, style the ul.

    --
    Spartanicus
     
    Spartanicus, Aug 16, 2005
    #5
  6. ppcguy

    Toby Inkster Guest

    Andy Dingley wrote:

    > "inline" means strings of text and those bits of HTML markup that affect
    > character-level formatting (bold etc.) without affecting linebreaks.
    > "block" is the other stuff: paragraph and line breaks etc.


    <br> is inline.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 16, 2005
    #6
  7. ppcguy

    Toby Inkster Guest

    Spartanicus wrote:

    > Adrienne <> wrote:
    >
    >>*** Good ***
    >><div id="menu">
    >><ul>
    >><li><a href="index.html">Home</a></li>
    >><li><a href="contact.html">Contact</a></li>
    >></ul>
    >></div>

    >
    > Superfluous usage of a div, style the ul.


    There are certain visual (and other) effects that could not be acheived
    without that DIV. Without knowing the author's desired intentions, it's
    impossible to tell if the DIV is needed or not. Try creating this visual
    effect without the DIV:

    #menu { border: 2px solid red; padding:2px; background: yellow }
    #menu ul { border: 1px solid blue; padding: 2px; background: silver }
    #menu ul li { border: 2px solid green; padding: 2px; background: orange }
    #menu ul li a { display: block; border: 2px solid black; background: white }

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 16, 2005
    #7
  8. ppcguy

    Spartanicus Guest

    Toby Inkster <> wrote:

    >>>*** Good ***
    >>><div id="menu">
    >>><ul>
    >>><li><a href="index.html">Home</a></li>
    >>><li><a href="contact.html">Contact</a></li>
    >>></ul>
    >>></div>

    >>
    >> Superfluous usage of a div, style the ul.

    >
    >There are certain visual (and other) effects that could not be acheived
    >without that DIV. Without knowing the author's desired intentions, it's
    >impossible to tell if the DIV is needed or not.


    The div is superfluous in the example provided. You can add styling
    requirements to the example, but to demonstrate proper usage of div and
    span elements these styling requirements would then have to be included
    in the message with a proper explanation.

    --
    Spartanicus
     
    Spartanicus, Aug 16, 2005
    #8
  9. ppcguy

    Guest

    What about list-style-position ?

    If you want list elements that wrap onto more than one line, but you
    want the bullet as a hanging indent (it's to the left of the text,
    where all the text lines are aligned) then you need to set
    list-style-position: outside; In this case the "bounding box" is
    better handled as a <div> containing the <ul>, rather than the <ul>
    directly.
     
    , Aug 16, 2005
    #9
  10. ppcguy

    JDS Guest

    JDS, Aug 16, 2005
    #10
  11. ppcguy

    Neredbojias Guest

    With neither quill nor qualm, Toby Inkster quothed:

    > Andy Dingley wrote:
    >
    > > "inline" means strings of text and those bits of HTML markup that affect
    > > character-level formatting (bold etc.) without affecting linebreaks.
    > > "block" is the other stuff: paragraph and line breaks etc.

    >
    > <br> is inline.


    .... for a promotion to block-level?

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Aug 16, 2005
    #11
  12. ppcguy

    Adrienne Guest

    Gazing into my crystal ball I observed Spartanicus
    <> writing in
    news::

    > Adrienne <> wrote:
    >
    >>*** Good ***
    >><div id="menu">
    >><ul>
    >><li><a href="index.html">Home</a></li>
    >><li><a href="contact.html">Contact</a></li> </ul> </div>

    >
    > Superfluous usage of a div, style the ul.
    >


    As Toby mentioned earlier, there are other reasons. There might be other
    content that would not be within the ul. Typically, I don't display
    menus or other content within that area for the printer, so doing:
    @media print {
    #menu {display:none}
    }
    is a lot more efficient that having to display:none all of the other
    elements/ids that could be in that div.


    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Aug 17, 2005
    #12
  13. ppcguy

    Spartanicus Guest

    Adrienne <> wrote:

    >>>*** Good ***
    >>><div id="menu">
    >>><ul>
    >>><li><a href="index.html">Home</a></li>
    >>><li><a href="contact.html">Contact</a></li> </ul> </div>

    >>
    >> Superfluous usage of a div, style the ul.

    >
    >As Toby mentioned earlier, there are other reasons. There might be other
    >content that would not be within the ul.


    As you recognized in your original reply one of the most important
    things to learn about div and span elements is that they should be used
    as sparingly as possible, and never instead of structural or semantic
    markup.

    You then provided an example of supposed proper usage that contravened
    this very principle. If you want to teach proper usage of said elements
    they should not be used for no apparent purpose. If you wish to present
    a case where the provided code construct is correct then you should have
    included the rationale with it, not try to justify it afterwards by
    adding "oh but if such and such".

    --
    Spartanicus
     
    Spartanicus, Aug 17, 2005
    #13
  14. ppcguy

    Adrienne Guest

    Gazing into my crystal ball I observed Spartanicus
    <> writing in
    news::

    > If you wish to present
    > a case where the provided code construct is correct then you should have
    > included the rationale with it, not try to justify it afterwards by
    > adding "oh but if such and such".
    >


    Ouch! Point taken. No excuses.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Aug 17, 2005
    #14
    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. jakk
    Replies:
    4
    Views:
    12,631
  2. Fulio Open

    Can span include span?

    Fulio Open, Jun 26, 2009, in forum: HTML
    Replies:
    5
    Views:
    581
    dorayme
    Jun 26, 2009
  3. Stéphane Klein
    Replies:
    2
    Views:
    1,866
    John Nagle
    Mar 30, 2010
  4. Stefan Behnel
    Replies:
    0
    Views:
    507
    Stefan Behnel
    Mar 29, 2010
  5. Wang, Jay
    Replies:
    5
    Views:
    525
    Wang, Jay
    May 25, 2004
Loading...

Share This Page