Span versus Div

Posted in Articles

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 …

And you get the following …

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…

 

Span tag

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

And this time we get …

 

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.

---