The Web Made Simple by Chris Jason

• About Chris
• Articles & Tutorials
• Web Glossary
• Top Resources
• Feeds

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

<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

Post a Comment

You must be logged in to post a comment.

© 2003-2013 Christopher Jason. All Rights Reserved.