Span versus Div

Posted in Articles

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

What is the difference between <span> tag and a <div> tag? The main difference is that a <span> tag is an inline element and <div> tag is a block element. To demonstrate what this means, replace the <span> with a <div> tag…

div tag

Consider this piece of code using the div tag …

div tag

div tag

And you get the following …

div tag output

div tag output

Note how the word “brown” is in its own line.

The <div> tag takes as much of the width of the page as it can. It blocks out the whole section of the page, so that anything following it has to go to the next line beneath it. The <span> tags takes as little space as possible, only enough to contain its contents.

For the purpose of illustration, let’s put a border around the div element so that you can see better.

Here it is using a div tag…

div tag with border

div tag with border

 

Span tag

Now let’s replace the div tag with the span tag…

span tag

span tag

And this time we get …

span tag output

span tag output

 

Difference between block and inline element.

We have seen that the div tag is a block element by default.  And the span element is an inline element by default.

Certain HTML tags are either block elements or inline elements by default.  The <p> tag is a block element; while the <strong> tag is an inline element. So now you can see the difference between an inline element and a block element.