DIV and SPAN

[Bern]

i was doing some DHTML stuff and suddenly i realised that DIV and SPAN are
both very similar. So far the only difference i realised is that DIV is a
block element while SPAN is an inline element by default when they are
created.

What else difference is there?

[Michael Winter]

[Cross-posted to alt.html; Follow-ups set to alt.html]

On Fri, 15 Oct 2004 00:14:08 +0800, Bern <[e-mail]> wrote:

i was doing some DHTML stuff and suddenly i realised that DIV and SPAN
are both very similar. So far the only difference i realised is that DIV
is a block element while SPAN is an inline element by default when they
are created.
They are *always* block and inline, respectively. Applying CSS just makes
them render differently.
What else difference is there?

None, really. They are generic containers used to add some user-defined
structure.

<URL:http://www.w3.org/TR/html4/struct/global.html#h-7.5.4>

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Lee]

Bern said:

i was doing some DHTML stuff and suddenly i realised that DIV and SPAN are
both very similar. So far the only difference i realised is that DIV is a
block element while SPAN is an inline element by default when they are
created.

What else difference is there?

It's annoying to read text in which the first person pronoun "I"
is not capitalized. It looks too much like an index variable.

You've identified the significant difference.
In some older browsers there were more differences, but as far as
I know, that's no longer true. The intent is that a <DIV> is a
major division of a page, which will naturally contain other elements,
while a <SPAN> is a relatively short span of text within a paragraph.

[Ivo]

"Lee" wrote

Bern said:

i was doing some DHTML stuff and suddenly i realised that DIV and SPAN
are both very similar. So far the only difference i realised is that DIV
is a block element while SPAN is an inline element by default when they
are created.
What else difference is there?

In some older browsers there were more differences, but as far as
I know, that's no longer true. The intent is that a <DIV> is a
major division of a page, which will naturally contain other elements,
while a <SPAN> is a relatively short span of text within a paragraph.

"The intent"? Really, the OP's question has a clearer answer in it than
this... DIV elements can contain other block elements, while SPAN elements
cannot, even when styled with span{display:block;}. Of course, "can" and
"cannot" depend on your criteria. The w3 validator pointed it out as a major
error on my little testpage just now, but IE has no problem displaying a
block level paragraph in my SPAN...
--
Ivo

[David Dorward]

Ivo wrote:

The w3 validator pointed it out as a
major error on my little testpage just now, but IE has no problem
displaying a block level paragraph in my SPAN...

Browsers typically perform error correction when authors make errors in
their markup. This is little more then guess work though, and different
browsers guess differently, so it is very unwise to depend on error
correction.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Lee]

Ivo said:

"Lee" wrote

Bern said:

>i was doing some DHTML stuff and suddenly i realised that DIV and SPAN
>are both very similar. So far the only difference i realised is that DIV
>is a block element while SPAN is an inline element by default when they
>are created.
>What else difference is there?

In some older browsers there were more differences, but as far as
I know, that's no longer true. The intent is that a <DIV> is a
major division of a page, which will naturally contain other elements,
while a <SPAN> is a relatively short span of text within a paragraph.

"The intent"? Really, the OP's question has a clearer answer in it than
this... DIV elements can contain other block elements, while SPAN elements
cannot, even when styled with span{display:block;}. Of course, "can" and
"cannot" depend on your criteria. The w3 validator pointed it out as a major
error on my little testpage just now, but IE has no problem displaying a
block level paragraph in my SPAN...

I find my answer more clear and more complete. Opinions vary.

[Ivo]

"Lee" wrote

In some older browsers
Which ones?
there were more differences,
Like what?
but as far as I know, that's no longer true.
Since when?
The intent
Whose intent? And why only an intent?
is that a <DIV> is a major division of a page,
How major?
which will naturally contain other elements,
But just as naturally not necessarily, right?
while a <SPAN> is a relatively
Relative to what?
short span of text within a paragraph.

Not images and other inline elements?
I find my answer more clear and more complete. Opinions vary.

No offense, Lee. ;-)
--
Ivo

[Lee]

Ivo said:

"Lee" wrote

>> In some older browsers
Which ones?
>> there were more differences,
Like what?
>> but as far as I know, that's no longer true.
Since when?

None of the above questions have any importance at all to this question.
Giving that level of detail would have cluttered my answer, reducing the
readability and creating a net decrease in usefulness.

>> The intent
Whose intent? And why only an intent?

The intent of whoever first proposed the <DIV> and <SPAN> tags.
I'm not sure I understand the second question, but if my guess
as to its meaning is correct, they didn't bother to enforce the
usage according to their original intent. That would have added
unnecessary overhead and would have been counter-productive.

>> is that a <DIV> is a major division of a page,
How major?

There is no precise answer to that. Nor should there be.

>> which will naturally contain other elements,
But just as naturally not necessarily, right?

Right. An empty <DIV> is legal, but unnatural. The only
time I've ever used them is when they are intended to hold
other elements that will be created dynamically, in which
case their purpose is still to hold other elements.

>> while a <SPAN> is a relatively
Relative to what?

Relative to the paragraph, of course.

>> short span of text within a paragraph.
Not images and other inline elements?

That's correct. As I understand it, the original intent was
to delimit a span of text in order to specify a different
font or color, etc.
I find my answer more clear and more complete. Opinions vary.

No offense, Lee. ;-)

Tedious amounts of detail do not make an answer more clear, and
don't even necessarily make the answer more complete, in any
useful way.

[VK]

Leaving W3C academic language out:

div and span both have been created as "neutral containers": they allow to
mark a block of page without any pre-set formatting.
Naturally you can use any tags instead (if you want to be "not like
everybody"), for instance <address> for div and <b> for span, but then
you'll have to kill the associated formatting using CSS.
DIV and SPAN just more convenient (and also they have highest approval for
this purpose from W3C).

The major difference between them is that:
DIV is a neutral *non-transparent* container
SPAN is a neutral *transparent* container

Thus <DIV> cuts off any formatting flow before it, so the text in the block
has generic formatting, so you can start from the scratch.

<SPAN> doesn't cut the formatting flow, so the SPAN block has the same
formatting as the text around, but you can add some extra formating.

[David Dorward]

VK wrote:

div and span both have been created as "neutral containers": they allow to
mark a block of page without any pre-set formatting.
HTML doesn't do formatting. They mark a section of a page (a block only in
the case of div) without any meaning attached.
Naturally you can use any tags instead (if you want to be "not like
everybody"), for instance <address> for div and <b> for span, but then
you'll have to kill the associated formatting using CSS.
You'll also have to deal with the associated _meaning_.
The major difference between them is that:
DIV is a neutral *non-transparent* container
SPAN is a neutral *transparent* container
err?
Thus <DIV> cuts off any formatting flow before it, so the text in the
block has generic formatting, so you can start from the scratch.

Not true.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title>Divs do not cut off formatting</title>
<style type="text/css">
div#first {
background-color: black;
color: white;
}
</style>
<div id="first">
First div element.
<div id="second">
Nested div element. <br>
Note that it is still white text on a black background?
No formatting has been cut off.
</div>
</div>

Good explanations as to the difference between div and span have already
been posted, so I will not repeat them.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is