What Is the Difference Between DIV and SECTION?

Understanding the HTML5 section element

The SECTION element is defined as a semantic section of a web page or site that isn't another more specific type such as ARTICLE or ASIDE. Designers frequently use this element when marking up a distinct section of the page—an entire section that could be moved and used on other pages or parts of the site. It is a distinct piece of content.

In contrast, the DIV element is appropriate for parts of the page that you want to divide up for purposes other than semantics. For example, you might wrap some content in a DIV to give it a "hook" to style with CSS. It might not be a distinct section of content semantically, but it's set apart so that you can achieve a desired layout or feel.

It's All About Semantics

The only difference between the DIV and SECTION elements is semantics—the meaning of the content you're dividing up.

Any content contained in a DIV element has no inherent meaning. It is best used for things like:

  • CSS styles and hooks for CSS styles
  • Layout containers
  • JavaScript hooks
  • Divisions that make content or HTML easier to read

The DIV element used to be the only element available for adding hooks to style documents and layouts. Before HTML5, the typical web page was riddled with DIV elements. In fact, some WYSIWYG editors used the DIV element exclusively, sometimes in lieu of paragraphs.

HTML5 introduced sectioning elements that created more semantically descriptive documents and helped define styles on those elements.

What About the SPAN Element?

Another common non-semantic element is SPAN. It's used inline to add hooks for styles and scripts around blocks of content (usually text). In that sense, it's exactly like the DIV, but is not a block element. Think of the DIV as a block-level SPAN and to use it in the same way, but for entire blocks of HTML content.

HTML has no comparable inline sectioning element.

For Older Versions of Internet Explorer

Even if you're supporting dramatically older versions of Microsoft's Internet Explorer that don't reliably recognize HTML5, you should use semantically correct HTML tags. The semantics will help you and your team manage the page in the future. The latest versions of Internet Explorer, as well as its replacement, Microsoft Edge, recognize HTML5.

Using DIV and SECTION Elements

You can use both DIV and SECTION elements together in a valid HTML5 document—SECTION, to define semantically discrete portions of the content, and DIV, to define hooks for CSS, JavaScript, and layout purposes.

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