What is the Difference Between DIV and SECTION?

Understanding the HTML5 SECTION Element

When HTML5 burts onto the scene a number of years ago, it added a bunch of new sectioning elements to the langauge, including the SECTION element. Most of the new elements that HTML5 introduce have clear uses. For example, the  element is used to define articles and main parts of a web page, the  element is used to define related content that is not critical to the rest of the page, and header, nav, and footer are pretty self-explanatory. The newly added SECTION element, however, is a bit less clear.

Many people believe that the HTML elements SECTION and are really just the same thing—generic container elements used to contain content on a web page. The reality, however, 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.

Sections and Divs

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). I tend to use this element when I am marking up a distinct section of the page - a section that could wholesale be moved and used on other pages or parts of the site. It is a distinct piece of content, or a "section" of content, if you will.

In contrast, you use the DIV element for parts of the page that you want to divide up, but for purposes other than semantics. I would wrap an area of content in a division if I am doing so purely to give myself a "hook" to use with CSS.  It may not be a distinct section of content based on semantics, but is something I am dictating in order to achieve the layout I want for my page.

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
  • JavaScript hooks
  • Divisions for the HTML to make it easier to read

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 may web designers call “divitis.” There were even WYSIWYG editors that used the DIV element exclusively. I've actually run across HTML that uses the DIV element instead of for paragraphs!

With HTML5, we can start using sectioning elements to create more semantically descriptive documents (using for navigation and 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 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 dramatically 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. 

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 seen here in this article, 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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 3/15/17