36

Is <div/> different from <span style="display:block" /> in any way?

They render just fine the same. Any semantic difference between the two?

random
  • 9,774
  • 10
  • 66
  • 83
Sorin
  • 2,258
  • 4
  • 27
  • 45

4 Answers4

53

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
  • 316,276
  • 54
  • 369
  • 333
  • 2
    Is there any advantage to using a `span` over a `div` with `display:inline`, aside from the slightly lower number of characters that would be required? – JAB Jul 23 '12 at 20:38
14

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
  • 39,690
  • 13
  • 62
  • 88
  • 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 Jul 17 '09 at 09:00
  • 2
    Yep. And that's the beauty of it. Though it does look less wonderful without the stylesheet. – Gabriel Hurley Jul 17 '09 at 09:02
  • 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 Jul 17 '09 at 09:33
4

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
  • 34,537
  • 8
  • 43
  • 40
1

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)

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335