What is the difference between HTML tags <div> and <span>?
div
is a block elementspan
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>
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 an appropriate id). Within that, I have a couple of sections: 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.
Also note that HTML5 includes a broad new set of elements that define common page structures, such as article, section, nav, etc.
Section 4.4 of the HTML 5 working draft lists them and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document.createElement
before any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.
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.
There are already good, detailed answers here, but no visual examples, so here's a quick illustration:
<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>
<div>
is a block tag, while <span>
is an inline tag.