Example
Here’s a document, which itself has a heading, along with two section
elements and their own content:
Syntax
1 |
<h1>Learning Spanish</h1> |
2 |
<section>
|
3 |
<h2>First Chapter</h2> |
4 |
<p>Eiusmod esse amet reprehenderit ea consequat et tempor ad enim.</p> |
5 |
</section>
|
6 |
<section>
|
7 |
<h2>Second Chapter</h2> |
8 |
<p>Laborum laborum elit aute reprehenderit ea exercitation cupidatat qui ipsum.</p> |
9 |
</section>
|
Result
Document Outline
If we run the above HTML through an HTML outliner tool we can see how the browser interprets the hierarchy:
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 caniuse.com.
Attributes
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).
Content
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>
,<footer>
,<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”.