Difference Between HTML Div and Span Elements

What is the difference between HTML div and span elements?

div is a block element
span is an inline element.

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.

EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span> only accepts phrasing content, and <div> is flow content.

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="https://www.bowlsk.com/_ah/logout?...">Sign out</a>  </div>  <h1><a href="/">Bowl<span class="sk">SK</span></a></h1></div>

Difference between div and span

There is two differences between div and span elements:

The div has display:block as default, while span has display:inline as default.
The div is a block element, and can contain block elements and inline elements, while span is an inline element and can only contain other inline elements.

Once you have applied the display:inline-block they behave the same.

When the HTML code is parsed, the style is not considered. While you can change the display style to make the elements behave the same, you still have to follow the rules in the HTML code.

This for example is valid:

<div>
  <div>
    <span></span>
  </div>
  <span></span>
</div>

This for example is invalid:

<span>
  <div>
    <span></span>
  </div>
  <div></div>
</span>

The browser will try to rearrange the elements in the invalid code, which usually means that it moves the div elements outside the span elements. As the HTML specification (prior to version 5) only told how correct code should be handled, each browser has its own way of dealing with incorrect code.

What is the difference between div and span?

div is a block level element, span is an inline element. That's basically the gist of it. ;)

To elaborate; the div element's default styling is to be block level. That means it can contain other block level elements as well as in-line elements. The span element's default styling is to be in-line, which means block level elements can contain it, but it can't contain block level elements. However, both of these can be altered using CSS, so you could have an inline div and a block level span!

Bear in mind that although you might be able to get a better content layout by making spans block and divs inline, if you try to include a block level element inside an element such as span, the HTML validator might throw errors at you as technically those elements shouldn't be appearing there.

By 'block level' I mean it's a block of content and forces other blocks to appear below it. In-line elements appear within blocks of content, for example, you can add styling to text within a block by using the span element, and it won't bring the text 'out of line'.

What is the div and span elements for?

Divs are sort like the blocked pieces of a website

EXAMPLES : Header, body, footer, login-box

Spans are typically for inline elements such as text

EXAMPLES : Paragraphs, titles

Both pretty much do the same thing (You will use the div more often).

difference between div and span tag

a div is a block level, meaning it's on its own separate line. a span is inline, so it's a child of another block level element.

<p><span>blah</span> <span>foo</span></p>

^ I can have multiple spans inside a block-level. They all show up on the same line.

<div>foo</div><div>blah</div>

^ These divs will be on separate lines.

With CSS though, you can easily override the styles for span and block levels, but that shouldn't have any bearing on your initial markup and structure.

What is the difference between p, div and span in HTML&XHTML?

p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;

Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p

Difference between span tag and a div tag

In simple words div is a block element and span is inline element.

Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

and inline element

Generally, inline elements may contain only data and other inline elements.

Block Level elements & Inline Elements

Difference between DIV as-is and a SPAN with display:block

Yes they are different.

Even though you style a span with display: block you still can't put block-level elements inside it:

<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>

The (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.