17

How do you choose when to use DIV and when SPAN, to wrap something?

Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.

And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.

What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?

and when we use blank div or span (no content inside) to get some effect, than which is correct?

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • If you have a free choice, just pick the most convenient one. In HTML, there isn't always a "one true way". – Alohci Jan 23 '11 at 15:04

3 Answers3

22

As you note, you should use divs as dividers of blocks, and spans for marking inline content.

And yes, you should try to avoid changing the display types of them.

Oded
  • 489,969
  • 99
  • 883
  • 1,009
  • 2
    Well said... changing the display types on div/span is almost equivalent of making b tag to be italic and i tag to be bold... and trust me, I have seen folks doing that. :P – limc Jan 23 '11 at 14:35
  • Yes. and sometime inside a any block level element we can use a block level element and inline level element both. and both will do, but which one we should choose? – Jitendra Vyas Jan 23 '11 at 14:36
  • @Jitendra Vyas - if the internal content is inline, use a `span`, if a block, use a `div`. – Oded Jan 23 '11 at 14:38
  • @Oded - my questions is when we use blank `div` or `span` (no content inside) to get some effect, than which is correct. – Jitendra Vyas Jan 23 '11 at 14:40
  • @Jitendra: As far as I know, if your span has empty content, it will not get rendered properly unless you force a blank with a nbsp in it. – limc Jan 23 '11 at 14:42
  • 8
    It's actually pretty logical. Whenever you're forced to add `display:inline` to the `div`, then it should have been a `span` from the beginning on and vice versa. – BalusC Jan 23 '11 at 15:12
  • @BalusC - So if we need width and height for blank tag then it should be always `div` , `span` shouldn't be used? – Jitendra Vyas Jan 23 '11 at 16:36
2

Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.

Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • 1
    This is because height/width can only be given to block level elements. As said in the question, by default div is a block element, and span an inline element. So for empty elements, depends a bit what you want to do with them. Span would make sense if the empty element was needed inside normal text-flow, and was for ex. intended to get content by AJAX. Empty div would make sense, if you need a block-level divider, get an image by AJAX etc. – Marcus Jan 23 '11 at 15:10
1

This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.

Community
  • 1
  • 1
Chip Roberson
  • 532
  • 3
  • 12