The section element semantically indicates a piece of page content that is independent of other content. It is recommended to include a heading element as the first child in a section. Content within the section is expected to be related to the heading topic. A great use for HTML Sections is in large pages of content or articles. Optionally, add page anchor link navigation so users can quickly scroll to specific sections.
Avoid using an HTML Section as a generic container element. Use a Section to group thematically related content, and not for styling purposes. This isn’t to say that you can’t style a section, but that is not its main purpose.
Div elements are simple containers and do not communicate content structure. A div can contain unrelated content and be semantically valid.
"A rule of thumb is that a section should logically appear in the outline of a document."
—Mozilla.org The Generic Section Element
Article content that can be syndicated or published, standalone, on other sites should be wrapped in an Article element. The Article element supersedes the Section element in this case. An Article block may however contain Section child elements.
<article>
<h1>Article Heading</h1>
<section>
<h1>Section heading</h1>
<p>Subheading paragraph text</p>
</section>
</article>
Notice that there is an H1 within the section. The Section element allows for this type of structure as the section is considered standalone content.
The section element is new in HTML5 and is one of the semantic elements added to the W3 specification. Headings implicitly separate content, however headings don't group content in the Document Object Model, the content structure created when a browser reads an HTML page.
The default flow configuration for a Section element is block
section {
display: block;
}
HTML Sections can be nested and still be semantically valid. This seems like an unlikely scenario. If you are visually dividing content within a section with related content a Div or Span elements are a better choice.
High Quality Web pages are both visually appealing and easy for crawlers and accessibility readers to interpret. Semantic HTML helps provide context and insight into content structure. The HTML Section tag is one of the HTML5 semantic standard elements. Before jumping to using another Div, consider a Section tag.
Photo by steve pancrate on Unsplash