As the title says, is there any difference ?
Explanations, please.
+1
A:
Yes. They can contain different things and are allowed in different places.
They will also be rendered differently in environments where CSS is not available (e.g. in some email systems)
David Dorward
2009-07-17 08:52:28
+17
A:
Yes they are different.
Even though you style a span with display: block you still can't put block-level elements inside it:
<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>
The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
Greg
2009-07-17 08:52:40
+3
A:
Here's an example where it makes a real difference (for valid code, at least):
<a href='example.com'>
<span class='title' style='display:block;'>The title of the image is also a link</span>
<img src="example.com/someimage.jpg"/>
</a>
That allows you to make your span a block level element and allows the image and span to highlight together when moused over.
A div would not be valid nested inside an a tag.
Gabriel Hurley
2009-07-17 08:56:58
It makes the span _display_ as a block on a device that supports CSS, but it doesn't make it a block-level element - it remains an inline element. In this case, that's actually what you want, as the blockiness is purely for visual effect :-)
NickFitz
2009-07-17 09:00:29
Yep. And that's the beauty of it. Though it does look less wonderful without the stylesheet.
Gabriel Hurley
2009-07-17 09:02:09
It's a pity you discuss validity really, since your example provides a real, practical difference in browsers regardless of whether you care about HTML validity or not.
Alohci
2009-07-17 09:33:51
+1
A:
A <div> is a block level element that has no specific semantics of its own, beyond defining a discrete block of content. A <span> is an inline element that has no specific semantics of its own, beyond defining a discrete segment of inline content.
You can use CSS to make a span display as a block, but there is absolutely no reason to do so EDIT: other than for purely visual effects, as Gabriel demonstrates; what I mean is that you shouldn't use CSS to try to coerce a span into having block-level significance in terms of document structure. Furthermore, if you do, your content will probably appear meaningless to a user without CSS, such as a blind user, or a search engine.
If it's a block, use a div. If it's part of inline content, use a span. Remember, CSS is about presentation alone; your markup still needs to be structured in a logical manner if your content is to be usable.
See http://www.w3.org/TR/html401/struct/global.html#edef-DIV for the details.
NickFitz
2009-07-17 08:57:51
The statement "absolutely no reason to do so" is blatantly untrue.
Gabriel Hurley
2009-07-17 09:01:30
@Gabriel: I've just edited my comment to reference your example, where you demonstrate a good presentational use :-)
NickFitz
2009-07-17 09:02:44