What’s the difference between <span> and <div> tags?

Sunday, January 15th, 2006 by Chris Jason
14 Comments

<span> and <div> tags both allow a Web designer to style text and add other formatting attributes to their Web page. They are not interchangeable tags, though. <div> tags are block-level elements, whereas <span> tags are not. This article explains this, and other differences, between <span> and <div> tags.

Both <span> and <div> tags allow you to apply CSS styles

<span> and <div> tags are both fine for applying inline CSS formatting. Consider the following code:

<div style="color:#000000;font-weight:bold;font-size:14px">Here’s some text in between div tags</div>

The output of this code is the same as:

<span style="color:#000000;font-weight:bold;font-size:14px">Here’s some text in between span tags</span>

<div> tags are block elements that allow you to position elements contained within them

<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.

<span> tags are NOT block elements

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 style="font-size:14px">
<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 style="font-size:14px">
This is some text sized at 14 pixels.
</span></p>

While this code is correct, it can be written more efficiently by removing the <span> tag altogether:

<p style="font-size:14px">
This is some text sized at 14 pixels.
</p>

<div> tags create line breaks, <span> tags do not

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. Here’s an example of a <span> tag used to style text in the middle of a sentence. The same code using <div> instead of <span> would produce undesired results.

<p>It's snowing in the Northeast today. Some towns received as much as <span style="font-size:18px;font-style:italic;font-weight:bold;">6 inches</span> of snow.</p>

Summary of <span> vs. <div> tags

<span> tags are useful if you need to apply specific formatting styles to text in the middle of a sentence, or in one place on your Web page. They are far less powerful than <div> tags, though, as a <div> will allow you to create blocks of content (like table-based Web designs) and position elements on the screen.

Article Comments

  • Posted by: Arpit | April 2nd, 2007

    Thanks Jason ..
    Nice One

  • Posted by: Aisha | April 18th, 2007

    Very useful and straight to the point. Thanks.

  • Posted by: Sriram | April 26th, 2007

    Pratically i found the difference. Thank U

  • Posted by: vilvendhan | May 17th, 2007

    It is very useful thank you.

  • Posted by: delta | July 6th, 2007

    Hello,

    Yesterday, I had an interview with a big IT company, and they asked me this question. Unfortunately, I was not able to explain it them :(

    Thank you! Now I know it.

    But I have a question:

    Can I make so that div has the same behaviour as span’s one, and vice versa?

    Thanks again.

  • Posted by: Gayatri | July 10th, 2007

    Thank You, The difference between and tags is quite informative.

  • Posted by: vlado | July 12th, 2007

    that’s was useful!

  • Posted by: Chris Olstrom | August 28th, 2007

    Well, glad to have that cleared up. I always get thrown off by the two.

    It’s nice to know that what I’ve been using them for (div for page formatting, span for finer control within things) is more or less proper. Awesome!

  • Posted by: haripal | September 10th, 2007

    can u tell me what is means differnace between div tag and span tag. give me exaple aslo

  • Posted by: Raghuwinder | September 29th, 2007

    Yesterday in interview when they asked this, I wasn’t able to reply. But Now I know it, Thanks Jason

    RV

  • Posted by: Bhavesh | September 30th, 2007

    Nice explaination.. Thanx.

  • Posted by: santosh | November 13th, 2007

    Very useful and straight to the point. It is very useful to anyone .Thanks.

  • Posted by: Jothipriya | January 4th, 2008

    Clear explanation. Thank you Very Much…

  • Posted by: sree | January 2nd, 2010

    Excellent description for the Div and Span elements.

    Thanks Jason!!

Post a Comment

You must be logged in to post a comment.