1. Technology

What is the Difference Between DIV and SECTION?

Understanding the HTML5 SECTION Element


Div vs Section


Image © 2014 J KyrninBoxing gloves courtesy vierdrie

Many people believe that the HTML elements SECTION and 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.

The 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:

The 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 SPAN Element?

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.

Using DIV and SECTION Elements

If you are using them correctly, you can use both DIV and 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 DIV element as hooks for CSS and JavaScript as well as defining layout that does not have a semantic meaning.

©2014 About.com. All rights reserved.