• Home
• About Chris Jason
• Web Glossary
• Online Resources
• Site Map

Simple web design, web development, information technology, & technical communication

Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.

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.

Articles By Category

• ASP Programming
• ASP.NET Programming
• CSS
• Information Technology
• Internet Marketing
• JavaScript Programming
• Personal Computing
• PHP Programming
• Technical Communication
• Web Design

Stay Updated