Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > difference between DIV and SPAN

Reply
Thread Tools

difference between DIV and SPAN

 
 
ppcguy
Guest
Posts: n/a
 
      08-15-2005
what's the difference between the two - if any...

thanks.


 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      08-15-2005
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
 
Reply With Quote
 
 
 
 
Adrienne
Guest
Posts: n/a
 
      08-15-2005
Gazing into my crystal ball I observed "ppcguy" <(E-Mail Removed)>
writing in news:m%7Me.10921$%(E-Mail Removed):

> 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
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      08-15-2005
On Mon, 15 Aug 2005 21:42:42 GMT, "ppcguy" <(E-Mail Removed)> 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.
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      08-15-2005
Adrienne <(E-Mail Removed)> 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
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      08-16-2005
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

 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      08-16-2005
Spartanicus wrote:

> Adrienne <(E-Mail Removed)> 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

 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      08-16-2005
Toby Inkster <(E-Mail Removed)> 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
 
Reply With Quote
 
dingbat@codesmiths.com
Guest
Posts: n/a
 
      08-16-2005
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.

 
Reply With Quote
 
JDS
Guest
Posts: n/a
 
      08-16-2005
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 | http://www.velocityreviews.com/forums/(E-Mail Removed)lid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

 
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
Difference between bin and obj directories and difference between project references and dll references jakk ASP .Net 4 03-22-2005 09:23 PM
Enable drag and drop to the text between <span></span> Wang, Jay Javascript 5 05-25-2004 09:33 PM



Advertisments