difference between DIV and SPAN

[ppcguy]

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

thanks.

 

[David Dorward]

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

 

[Adrienne]

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>

 

[Andy Dingley]

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.

 

[Spartanicus]

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

 

[Toby Inkster]

"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 Inkster]

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 }

 

[Spartanicus]

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.

 

[dingbat]

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.

 

[JDS]

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

thanks.

div = display:block;
span = display:inline;

 

[Neredbojias]

With neither quill nor qualm, Toby Inkster quothed:

<br> is inline.

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

 

[Adrienne]

Gazing into my crystal ball I observed Spartanicus

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.

 

[Spartanicus]

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

 

[Adrienne]

Gazing into my crystal ball I observed Spartanicus

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.