Is there a semantic difference between <span> and <div>?

Question

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

I know that when encoding HTML I have to consider semantics, for example, h1 should be the main heading, h2 should be the subtitle, tables should be tables, use <em> for emphasis instead of <i> , etc. Is there a difference between divs and spans, except for one, is it a block and the other is in a row?

When I was studying, I was told that <span> are for styling text in the middle of a line. If I had a small piece of text that I needed at some point on my web page that wouldn't cancel the <p> , would I use a range that the div should stick to? What if this text should cover two lines (i.e. He needs a width), if it contains only text, what should I use?

Answer 1

Semantically, neither <div> nor <span> has any internal meaning. These are catch-all tags for use with things that no longer have an existing tag. Use divs and spans as a last resort if you need semantics.

The only difference between the two is that divs are block-level elements, and intervals are inline. By default, the div will launch a whole new block, and technically only inline elements and some CSS will be allowed within the range. Most browsers seem to handle tags regardless of the rules (assuming soup is soup), and you can really do either act like the other with CSS, but not if you care about checking or compatibility with multiple browsers (what do you care about, right?).

Answer 2

The main difference between span and div is that span is an inline element, while div is a block element, such as a p element or paragraph. So essentially

 span { display: block; } 

Essentially turns all gaps into a div. You use a range only for a line of text, such as applying effects or additions, or something else. Divs tend to share your webpage, so if you needed to place text, I would recommend using a div.

Answer 3

Div is a separation unit, span is for including inline text.

So, Div is a block / block with height and width, span is built-in. Basically.

If you want to read the specification, here is the link.

DIV and SPAN elements along with id and class attributes offer a common mechanism for adding structure to documents. These elements define inline content (SPAN) or block level (DIV), but do not impose any other presentation idioms on the content. In this way, authors can use these elements in combination with style lists, the lang attribute, etc., to adapt HTML to their own needs and tastes.

Answer 4

<span> and <div> are very common elements. By themselves, they have no meaning.

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

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

You have no “other text” on a new line. If you replace the spaces with a <div> (block element), new lines will appear. Note that for the correct syntax, there is no block element inside the inline element. Therefore, you can have a <span> inside a <div> , but not vice versa.

See here for more details:

Wikipedia - Span and div

About.com - Span vs. div

Answer 5

There is a fundamental difference: <div> is a block level element , and <span> is an inline element . The difference is that block-level elements begin and end with line breaks, while inline elements do not.

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

Answer 6

Well, to give you a quick and easy answer, DIV is a division! The goal is to use it when some elements need treatment as a group!

Example: Use a div to have an input panel, say, a hidden @ on the left side of the screen that appears when the mouse hovers over a div :)

Answer 7

You have it. Span = inline, Div = block. It's all.

If a text editor needs its own layout (you want to place it somewhere on the screen), then this is a div.

If a piece of text is involved in a layout of another text next to it, then this is a range.

An inline element cannot have its own layout - then it will not be inline.