Status: Unchanged
In HTML 4, the <div> element was defined to be a generic element for structuring a page. Although you can allude to the nature of its content by assigning id and class attributes with meaningful names, a <div> has almost no semantic meaning. The HTML5 definitionis basically the same as in HTML 4:
The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
W3C Specification
<div> is literally a container for flow content*, a collection of (hopefully) more semantically marked-up content that may need to be grouped together. It lies at the opposite end of the semantic spectrum from the new HTML5 structural elements.
* For those who haven’t encountered this term before, flow content elements are the same as HTML 4′s block-level content elements.
<div> vs semantic elements
The new semantic elements (<article>, <section>, and friends) justifiably capture a lot of <div>‘s territory, but <div> still has a place in the HTML5 world. You should use <div> when there is no other more semantically appropriate element that suits your purpose. Its most common use will likely be for stylistic purposes — i.e., wrapping some semantically marked-up content in a CSS-styled container.
Ask yourself questions about your content: Is it part of the site’s navigation? Is the content secondary to its surrounding content? If this content were printed on a page with nothing else, would it make sense? You will need to evaluate your content carefully, thinking about what it is and pairing it with an appropriate element. I recommend taking a look at The Amazing HTML5 Doctor Easily Confused HTML5 Element Flowchart of Enlightenment to help you choose the right element for your flow content.
Example Uses
Below are a few examples of how you can still use <div> appropriately in your HTML5 sites.
Site Wrapper
While you can use the <body> element as a “natural” wrapper for site content, many people like to use <div> as top-level container for styling the entire site. This is an appropriate use of <div>, as a site wrapper has no meaning or purpose other than to aid styling.
<body>
<div id=”wrapper”>
<header>
<h1>My Happy Blog</h1>
<nav>
<!– … –>
</nav>
</header>
<!– … rest of site content … –>
</div>
</body>