Many people believe that the HTML elements
DIV are really just the same thing—generic container elements used to contain content on a web page. But the reality is that these two elements, while both being container elements are anything but generic. There are specific reasons to use both the
SECTION element and the
DIV element. And this article will explain those differences.
HTML5 adds a bunch of new sectioning elements, including the
SECTION element. Most of these elements have clear uses. For example, the
ARTICLE element is used to define articles and main parts of a web page, the
ASIDE element is used to define the extra sections of a site or page, and so on. But the
SECTION element is a bit less clear.
SECTION element is defined as a semantic section of a web page or site that isn't another more specific type (like article or aside). And as I mentioned in When to Use the HTML5
SECTION Element, you use it when the section is semantically different. Whereas you use the
DIV element for parts of the page that you want to divide up, but for purposes other than semantics.
It's All About Semantics
This is a hard concept to understand, but the only difference between the
DIV element and the
SECTION element is semantics. In other words, it's the meaning of the section of code you're dividing up.
Any content that is contained inside a
DIV element does not have any inherent meaning. It is best used for things like:
- CSS styles and hooks for CSS styles
- Layout containers
- Divisions for the HTML to make it easier to read
DIV element used to be the only element we had for adding hooks to style our documents and create columns and fancy layouts. Because of that, we ended up with HTML that was riddled with
DIV elements—what I call “divitis.” There were even WYSIWYG editors that used the
DIV element exclusively. I run across HTML that uses the
DIV element instead of
P for paragraphs!
But with HTML5 we can start using sectioning elements to create more semantically descriptive documents (using
NAV for navigation and
FIGURE for descriptive figures and so on) and also define the styles on those elements.
What About the
The other element that most people think of when they think of the
DIV element is the
SPAN element. This element, like
DIV, is not a semantic element. It is an inline element that you can use to add hooks for styles and scripts around inline blocks of content (usually text). In that sense it is exactly like the
DIV element, only inline rather than a block element. In some ways, it might be easier to think of the
DIV as a block-level
SPAN element and use it in the same way you would
SPAN only for entire blocks of HTML content.
There is no comparable inline sectioning element in HTML5.
For Older Versions of Internet Explorer
Even if you are supporting older versions of IE (like IE 8 and lower) that don't reliably recognize HTML5, you should not be afraid to use semantically correct HTML tags. The semantics will help you and your team manage the page in the future (because you'll know that that section is the article if it's surrounded by the
ARTICLE element). Plus, browsers that do recognize those tags will support them better.
You can still use HTML5 semantic sectioning elements with Internet Explorer, you just need to add scripting and possibly a few surrounding
DIV elements to get them to recognize the tags as HTML. Read my article: Enable HTML 5 in Internet Explorer for more information.
If you are using them correctly, you can use both
SECTION elements together in a valid HTML5 document. As you've learned, you use the
SECTION element to define semantically discrete portions of the content, and you use the