Jump to content

HTML <div> tag VS HTML <span> tag


makkawi

Recommended Posts

Well, you can use either of them to make your text a giant oversized bold red font. The main difference is that div tags are block-level elements, and spans are inline. Make a test page with a few divs and spans mixed in with other text and you'll see what I mean.

Link to comment
Share on other sites

The easiest way to find out the difference is this:

<html><head><style type="text/css">div,span { border: 1px solid red; }</style></head><body><div>This is a div<br> with a couple of<br> line breaks</div><span>This is a span<br> with a couple of<br> line breaks</span></body></html>

Link to comment
Share on other sites

Guest FirefoxRocks
The easiest way to find out the difference is this:
<html><head><style type="text/css">div,span { border: 1px solid red; }</style></head><body><div>This is a div<br> with a couple of<br> line breaks</div><span>This is a span<br> with a couple of<br> line breaks</span></body></html>

I don't know how you can tell the different between that.<div> is a block-level element, which I can call "containers". It can contain almost any other element within it. Each div is started on a new line unless otherwise declared.<span> is an inline element. As the name suggests, it contains the text inline. You can put <span> within a <p>, <div>, <td>, <hn> or other block-level elements, but you can't place it directly in the body.
Link to comment
Share on other sites

I mean to say that if you display that example in a browser you'll see the <div> and <span> rendered differently (the div is within a red rectangle, while the border around the span goes following the line of text).My mistake, I wasn't thinking when I put the span directly under the body.

Link to comment
Share on other sites

Basically, the division will break the lines around it, while the span tag will allow the current line to continue after it, e.g.

.............[division]....................As opposed to...................[span].................

Link to comment
Share on other sites

DIV is a generic block-level element, SPAN is a generic inline element. You should use them styling and scripting where appropriate (where there is no appropriate semantic element to take its place). For example: if you need to style words that together don't constitute a separate paragraph, quote, I and B are not appropriate either, etc., use a span. If you want to style a block (or something in one) on your page that doesn't constitute a separate table, form, ordered or unordered list, etc., use a div.

Link to comment
Share on other sites

Moreover, according to the semantic, you should put <span> between <div> and </div> but you shouldn't use <div> between <span> and </span>.About the inline and the block-level, I want to add that, without css and unlike <span>, you can't have two <div> in the same level or line. That can seem idiotic to say that but if you remember it, you will not make a mistake. :)

Link to comment
Share on other sites

Moreover, according to the semantic, you should put <span> between <div> and </div> but you shouldn't use <div> between <span> and </span>.About the inline and the block-level, I want to add that, without css and unlike <span>, you can't have two <div> in the same level or line. That can seem idiotic to say that but if you remember it, you will not make a mistake. :)
Your first point doesn't have anything to do with semantics (when we're at semantics, DIV and SPAN do NOT have them (they are neutral)), it has to do with the fact that block-level elements cannot be children of inline elements. That's pretty much common sense. Just like you can't surround a form with "italics" tags (I mean you can, but it's not valid and doesn't make any sense, and you will confuse browsers).
About the inline and the block-level, I want to add that, without css and unlike <span>, you can't have two <div> in the same level or line.
I could be misinterpreting this, but as I've grasped it, this is untrue. There is nothing wrong with having a construction such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><title>example</title><div><p>Some text here, a <span>span here</span> and <span>another one here</span></div><div><p>Here's some more text</div>

Link to comment
Share on other sites

I could be misinterpreting this, but as I've grasped it, this is untrue. There is nothing wrong with having a construction such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><title>example</title><div><p>Some text here, a <span>span here</span> and <span>another one here</span></div><div><p>Here's some more text</div>

He's referring to the fact that the content of two <div> tags will never be on the same line without the use of CSS.
Link to comment
Share on other sites

Your first point doesn't have anything to do with semantics (when we're at semantics, DIV and SPAN do NOT have them (they are neutral)), it has to do with the fact that block-level elements cannot be children of inline elements. That's pretty much common sense. Just like you can't surround a form with "italics" tags (I mean you can, but it's not valid and doesn't make any sense, and you will confuse browsers).
Oups, you right, I used a wrong term. :)
I could be misinterpreting this, but as I've grasped it, this is untrue. There is nothing wrong with having a construction such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><title>example</title><div><p>Some text here, a <span>span here</span> and <span>another one here</span></div><div><p>Here's some more text</div>

Ok, but I didn't speak about the code... I would say that, without css, the browsers can't show two <div> contents in the same line (because, it isn't a inline element).Thanks for your correction ! :)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...