Monday, March 26, 2007

What is difference between span and div tag?

Recently, when I was asked to take interview, I asked a simple question that none could answer :-(
"What is difference between span and div tag?"


This prompted me to write this post.



<span> and <div> tags both allow a Web designer to style text and add other formatting attributes to their Web page.

The <span> and <div> tags are very useful when dealing with Cascading Style Sheets.

Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using
<div style="text-align: center;">
to center the content inside your div.

<div> tags are block elements. This means they can "hold" other HTML elements, and they can be positioned anywhere on the screen. For this reason, <div> tags can be used for replacing table-based Web designs.


Unlike <div> tags, <span> tags cannot hold other HTML tags. They should only be used for inline styling of text. Consider the following code:


<span >

<p>This is some text sized at 14 pixels.</p>

</span>



This code will probably render OK in most browsers, but it is actually incorrect. Remember, since the <span> tag is not a block-level element, it cannot contain other HTML tags. The correct way to write this code would be:


<p><span >

This is some text sized at 14 pixels.

</span></p>


Since <div> tags are block elements, they create line breaks. This is the same effect as a <p> tag. <span> tags do not create line breaks, which makes them perfect for styling text in the middle of a sentence.


There are far more possible values for the display property than block and inline — in fact, the CSS 2.1 specification lists 17 different possible values. Ten of these values are related to tables and correspond to the way the various HTML table elements act.


However, IE 6/7 doesnot support "display: table"


So, simple code to display a table is rendered differently in IE and Firefox
<html>

<body>

<div style="display:table">



<div style="display:table-row ;">

<div style="display:table-cell;background: #ccc;">

Cell 1

</div>

<div style="display:table-cell;background: #aaa;">

Cell 2

</div>

</div>

<div style="display:table-row;">

<div style="display:table-cell;background: #ccc;">

Cell 3

</div>

<div style="display:table-cell;background: #aaa;">

Cell 4

</div>

</div>



</div>

</body>

</html>


IE 7 renders it as:



Firefox renders it as:





Your browser will display above code as:




Cell 1


Cell 2




Cell 3


Cell 4




(Refer
Decloak.com for comparison between <table> and <div>tags for displaying tabular data


and Quirksmode.org for compatibility of browsers for display property).

3 comments:

Anonymous said...

I need link exchange with your blog

if you are interested, please contact : seolinksexpert (at) gmail (dot) com

I am waiting for your positive response

by
web design company, web designer, web design india

Anonymous said...

I need link exchange with your blog

if you are interested, please contact : seolinksexpert (at) gmail (dot) com

I am waiting for your positive response

by
web design company, web designer, web design india

Anonymous said...

Very helpful and informative.


Regards,
Roxy
Web Designer