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

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

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.

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. 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

Hi There!

Well, to give you a fast and simple answer, DIV is a division! The goal is to use it when certain elements are in need to be treated as a group!

Ex: Use a div to have a login panel, lets say, hidden @ the left side of the screen, that show's up when the mouse hovers the div :)

Answer 4

<span> and <div> are both very generic elements. In themselves, they have no meaning.

The main difference is that <span> is an inline element. That means if you have something like:

<span>Some text.</span> Some other text

You don't have "Some other text" on a new line. If you replaced the spans with <div> (a block element), there would be newlines. Note that it is not proper syntax to have a block element inside an inline element. Therefore, you can have <span>'s inside <div>'s, but not vice versa.

See here for more:

Wikipedia - Span and div

About.com - Span vs. div

Answer 5

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 6

There is a fundamental difference: <div> is a block-level element, while <span> is an inline element. The difference is that block-level elements start and end with line breaks, and inline elements don't.

Perhaps even more importantly, depending on the HTML version, there are different rules for what other elements are valid inside block and inline elements.

Answer 7

You've got it. Span = inline, Div = block. That's all.

If a blurb of text needs it's own layout, (You want to put it somewhere on the screen) then it's a div.

If a blurb of text participates in the layout of the other text right next to it, then it's a span.

An inline element can't have its own layout -- then it wouldn't be inline.