Is there a semantic difference <span>'s and <div>'s? [duplicate]

Question

Possible Duplicate:
What is the difference between HTML tags DIV and SPAN?

I know when coding HTML, I'm supposed to keep semantics in mind, e.g., h1 needs to be a main header, h2 needs to be a subheader, tables need to be tables, use <em> for emphasis instead of <i>, etc. Is there a proper difference between divs and spans except one is a block and the other is in-line?

When I was learning I was told that <span>'s were for styling text mid-line. If I had a small blurb of text that I needed positioned at a certain point in my webpage, one that doesn't warrent a <p> tag, would I use a span should I stick with div's? What if that text needs to cover two lines (i.e., it needs a width) if it contains nothing but text, what should I use?

Answer 1

Semantically, neither <div> nor <span> has any intrinsic meaning. They're "catch-all" tags meant to be used with stuff where no existing tag really fits. Use divs and spans as a last resort, if you care about semantics.

The only difference between them is that divs are block-level elements, and spans are inline. Meaning by default, a div will start a whole new block, and technically only inline elements and certain CSS would be allowed inside a span. Most browsers seem to process the tags regardless of the rules (assuming "tag soup"), and you can actually make either act like the other with CSS, but don't do any of that if you care about validation or cross-browser compatibility (which you DO care about, right?).

Answer 2

The primary difference between a span and a div is that a span is an inline element whereas a div is a block element, like a p or paragraph element. So, in essence

span { display: block; }

Is essentially turning all spans into divs. You use a span for just a line of text, like to apply effects or padding or something. Divs are generally for dividing up your web page, so if you had to position a piece of text somewhere I would recommend using a div.

Answer 3

Div is a division block, span is for spanning inline text.

So Div is a box/block with height and width, span is inline. Basically.

If you want to read the spec, here's a link.

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.