Scroll to top
Read Time: 2 min

The HTML section element is quite literally a section of a document. A section, in this context, is a grouping of content that typically contains a heading.

The section element is not a generic container element. It is appropriate to use a section element only if its contents would be listed explicitly in the document’s outline.


Here’s a document, which itself has a heading, along with two section elements and their own content:


<h1>Learning Spanish</h1>
        <h2>First Chapter</h2>
        <p>Eiusmod esse amet reprehenderit ea consequat et tempor ad enim.</p>
        <h2>Second Chapter</h2>
        <p>Laborum laborum elit aute reprehenderit ea exercitation cupidatat qui ipsum.</p>


Document Outline

If we run the above HTML through an HTML outliner tool we can see how the browser interprets the hierarchy:

html document outline examplehtml document outline examplehtml document outline example

The h1 and h2 elements by themselves create this document structure. But even if we’d used only h1 headings, the section elements communicate this hierarchy too.

Browser Support

The section element is supported in all modern browsers. Read more on


A section element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).


The HTML section element supports flow content.

  • There are several other sectioning elements, useful for splitting up content on a page in a descriptive way: <article>, <aside>, <form>, <header>, <main>, and <nav> are all sectioning elements.

What’s the Difference Between a div and a section Element?

Like a div, a section element divides part of an HTML page. The core difference is that a div element is neutral, whereas the section element is not. In other words, a div does not describe the content it contains, while a section element does.

You might use a div element purely for styling purposes, but a section is semantic and says to search engines, browsers, and assistive technologies: “this is a specific chunk of content”.

Learn More

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.