HTML <section> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The <section> tag represents a generic section of a document or application and should include a thematic grouping of related content.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Title Element goes here.</title>
</head>
<body>
    <h1>Displayed Page Title</h1>
    <p>The main content of your page goes here.</p>
    <section>
      <h2>Heading</h2>
      <p>More content</p>
    </section>
    <section>
      <h2>Heading</h2>
      <p>More content</p>
    </section>
</body>
</html>

Usage

  • Both the opening and closing tag are required.
  • Each <section> should be identified, usually by including a <h1> - <h6> element as a child. That being said, it would not necessarily make sense for all application or UI sections to have a heading.
  • If the content is a complete, or self-contained, composition it is recommended to use the <article> element instead.
  • If the content is used to hold indirectly-related but separate content to the document’s main content, such as sidebars, pull-quotes, and call-out boxes, consider using an <aside> element.
  • The <section> element is not a general container element. If the container is needed just for styling purposes then a <div> should be used. <section> elements should only be used if the contents would be listed explicitly in the document’s outline.

Attributes

The Section element only supports the Global Attributes.

Best Practices

  • Assistive technology such as screen readers may announce a hint to users as to the type of content contained in the <section> element if an aria-label is specified. For example:
    <section aria-label="Red apples.">
      <h2>Red Apples</h2>
      <p>These red apples are delicious....</p>
    </section>
    <section aria-label="Green apples.">
      <h2>Green Apples</h2>
      <p>These green apples are a little sour, but can be nice if eaten with....</p>
    </section>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes