The HTML Section Element

Improve your semantic HTML with proper use of the Section element

Seann Hicks

Seann Hicks

Sunday, June 21, 2020

HTML Section Element

The section element semantically indicates a piece of page content that is independent of other content. It 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. Add page anchor link navigation so users can quickly scroll to specific sections.

Section vs Div

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

Section vs Article

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 Specification

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;
}

Nested Sections

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. 

Sources Cited

W3.org The Section Element

How to Section your HTML

Summary

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

Sign-up to receive the weekly post in your inbox. I don't share email addresses, unsubscribe at any time.

Email Address