Jump to content
Sign in to follow this  
makkawi

HTML <div> tag VS HTML <span> tag

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.

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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].................

Share this post


Link to post
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.

Share this post


Link to post
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. :)

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
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 ! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...