divis a block element
spanis 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.
<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>
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>
Run code snippetExpand snippet
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.
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.