by Mike Robinson, HTML5Doctor - "Sorry, can you say that again?", I hear you ask. Certainly: you can still use
<div>! Despite HTML5 bringing us new elements like
<div> element still has its place. Let the HTML5 Doctor tell you why.
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 definition is 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 (
<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.
Check out the full article 'You can still use div' for examples of how to use
<div> effectively in HTML5.
For more on HTML5 see:
- Crash course: HTML 5 video
- How to use HTML5 on your website today
- Preparing for the Good and Bad with HTML5
- How HTML5 will change the Web