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.
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.
Related HTML Elements
- 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”.
Learn More
No comments:
Post a Comment