Span versus Div Tag in HTML

Posted Date: 30 Oct 2006	Resource Type: Articles	Category: General
Author: HimaBindu Veeramachaneni	Member Level: Diamond
Rating:	Points: 10

This article illustrates the differences between Span and Div tags.

span vs div

First of all div is a block element .It blocks the entire section of a page. So anything following it has to go to the next line. While, Span is an inline element. Inline elements are printed in the same line.

Example


<html>
<head>
<P>divtag vs span</p>
Span
<span> <b>Hello how are you doing</b></span> 
</head>
<body>
<p>divtag vs span</p>
Div
<b><div> Hello how are you doing</div> </b>
</body>
</html>

Run this code sample by copying it in a word processor and saving it with a .html extension and then opening it in a browser of your choice. The same text for div is separated whereas that for span is printed on same line.

When to use Div and span:

It depends on the requirements. Div tag is used for alignment of the section of a page and for creating layers in Javascript. The div tag allows us to name certain sections of documents so that it can be affected with style sheets or DHTML. Span doesn’t do formatting on it’s own.

The primary attributes of the <div> tag are:

• style
• class
• id

Note: Div acts as a paragraph beginning/end, and while we can have paragraphs within a <div> we can't have a <div> inside a paragraph.

Responses

Author: Kishore Pai 01 Nov 2006 Member Level: Bronze Points : 0

The example given for that article shows the same output for span as well as div, the difference isnt clear. Can you specify more clearly?

Kishore

Author: Gaurav Arora 27 Jul 2008 Member Level: Diamond Points : 1

Thanks for your detailed overview on Div/Span.
I have asked the same question in an Interview and I showed them same example as you explained here.
Thanks!

Feedbacks

Popular Tags

What are tags ?

Search Tags

When to Span or Div . Span vs Div tags . Div vs Span tags . Difference between Div and Span tags . Difference between Div and Span . Choosing Span over Div . Choosing Div over Span .

Post Feedback

This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.

	Next Resource: Bluetooth Made it Easy!
	Previous Resource: Date Validation and Triming the spaces in Javascript
	Return to Discussion Resource Index
	Post New Resource
	Category: General

Post resources and earn money!

Related Resources