makkawi Posted December 4, 2007 Share Posted December 4, 2007 Hi all ,,What is different between <div> tag and <span> tag ?please give me some examples .. Link to comment Share on other sites More sharing options...
justsomeguy Posted December 4, 2007 Share Posted December 4, 2007 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 More sharing options...
Ingolme Posted December 4, 2007 Share Posted December 4, 2007 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 More sharing options...
Guest FirefoxRocks Posted December 4, 2007 Share Posted December 4, 2007 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 More sharing options...
Ingolme Posted December 4, 2007 Share Posted December 4, 2007 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 More sharing options...
Synook Posted December 5, 2007 Share Posted December 5, 2007 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 More sharing options...
croatiankid Posted December 5, 2007 Share Posted December 5, 2007 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 More sharing options...
Akirira Posted December 5, 2007 Share Posted December 5, 2007 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 More sharing options...
croatiankid Posted December 5, 2007 Share Posted December 5, 2007 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 More sharing options...
Ingolme Posted December 5, 2007 Share Posted December 5, 2007 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 More sharing options...
Akirira Posted December 5, 2007 Share Posted December 5, 2007 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 More sharing options...
justsomeguy Posted December 6, 2007 Share Posted December 6, 2007 Geez, that's a lot of discussion for a simple question.Try it in a browser, you'll figure it out. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.