Moshe on Technology: The Difference Between DIV and SPAN

Sunday, January 9, 2011

The Difference Between DIV and SPAN

Every now and then I see people wonder about the difference between the DIV HTML tag, and SPAN. Sometimes, people do some trial and error with the two before deciding which fits better for the problem at hand.

So I decided it would be a good idea to clarify this issue.
The DIV element is a "block" element. This means it occupies a full block when rendered, which also means that by default the browser will render a new line before and after rendering the DIV element. SPAN, on the other hand, is rendered inline. This makes SPAN perfect for formatting text which is part of a paragraph.

Want to see the difference? Create an HTML file containing the below code, and run it in a browser:
<html>
<body>
<p>Here goes for span: <span style="color:red" >hello</span> world</p>
<p>Here goes for div: <div style="color:red">hello</div> world</p>
</body>
</html>

And if you're lazy, this is how it looks like:

Here goes for span: hello world

Here goes for div:

hello

world

Makes sense, right?