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:
<p>This is some text sized at 14 pixels.</p>
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:
This is some text sized at 14 pixels.
While this code is correct, it can be written more efficiently by removing the <span> tag altogether:
This is some text sized at 14 pixels.
<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.
Thanks Jason ..
Very useful and straight to the point. Thanks.
Pratically i found the difference. Thank U
It is very useful thank you.
Yesterday, I had an interview with a big IT company, and they asked me this question. Unfortunately, I was not able to explain it them :(
Thank you! Now I know it.
But I have a question:
Can I make so that div has the same behaviour as span’s one, and vice versa?
Thank You, The difference between and tags is quite informative.
that’s was useful!
Well, glad to have that cleared up. I always get thrown off by the two.
It’s nice to know that what I’ve been using them for (div for page formatting, span for finer control within things) is more or less proper. Awesome!
can u tell me what is means differnace between div tag and span tag. give me exaple aslo
Yesterday in interview when they asked this, I wasn’t able to reply. But Now I know it, Thanks Jason
Nice explaination.. Thanx.
Very useful and straight to the point. It is very useful to anyone .Thanks.
Clear explanation. Thank you Very Much…
Excellent description for the Div and Span elements.
Post a Comment
You must be logged in to post a comment.