«

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

thanks.

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

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

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.

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

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

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

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.

On Mon, 15 Aug 2005 21:42:42 +0000, ppcguy wrote:

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

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

--
JDS | lid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/