What is the difference between HTML tags DIV and SPAN?

Question

I would like to ask for some simple examples showing the uses of <div> and <span>. I've seen them both used to mark a section of a page with an id or class, but I'm interested in knowing if there are times when one is preferred over the other.

Answer 1

<div> is a block-level element and <span> is an inline element.

If you wanted to do something with some inline text, <span> is the way to go since it will not introduce line breaks that a <div> would.

---

As noted by others, there are some semantics implied with each of these, most significantly the fact that a <div> implies a logical division in the document, akin to maybe a section of a document or something, a la:

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

Answer 2

div is a block element, span is inline.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

You asked for some concrete examples, so is one taken from my bowling website, BowlSK:

<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Chris Marasti-Georg</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://www.bowlsk.com/_ah/logout?..."&gt;Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Ok, what's going on? At the top of my page, I have a logical section, the "header". Since this is a section, I use a div, with appropriate id. Within that, I have a couple section - the user bar, and the actual page title. The title uses the appropriate tag, h1. The userbar, being a section, is wrapped in a div. Within that, the username is wrapped in a span, so that I can change the style. As you can see, I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet.

Answer 3

div implies a line break (ie, it's a block element). span is inline.

If you put a div in your code right before some text, you'll end up (in standards_compliant browsers) with your div content, then a line break, then your text. If you switch that to a span, your div content will be on the same line as your text.

That's really the only big difference. In every other way, they are identical.

Answer 4

As mentioned in other answers, by default div will be rendered as a block element, while span will be rendered inline within its context. But neither has any semantic value; they exist to allow you to apply styling and an identity to any given bit of content. Using styles, you can make a div act like a span and vice-versa.

Answer 5

The real important difference is already mentioned in Chris' answer. However, the implications won't be obvious for everybody.

As an inline element, <span> may only contain other inline elements. The following code is therefore wrong:

<span><p>This is a paragraph</p></span>

The above code isn't valid. To wrap block-level elements, another block-level element must be used (such as <div>). On the other hand, <div> may only be used in places where block-level elements are legal.

Furthermore, these rules are fixed in (X)HTML and they are not altered by the presence of CSS rules! So the following codes are also wrong!

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

Answer 6

I would say that if you know a bit of spanish to look at this page, where is propperly explained.

Howerver, a fast definition would be that div is for dividing sections and span is for appliying some kind of style to an element within a div

Answer 7

Just for the sake of completeness, I invite you to think about it like this:

• There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks).
• But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
• So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
• For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.

Answer 8

Div is Block level tag and span is inline tag. The div is just the alternative of Paragraph tag.