How to correctly use "section" tag in HTML5?

html

semantic-markup

html5

accessibility

byAnton Shumikhin·Sep 20, 2024

Establish a <section> in HTML5 to bring together thematically connected content under a shared heading. It's suitable when contents reflect a specific section of a document or application, like chapters, tabbed layouts, or various topics within an article.

Proper utilization dictates a heading (<h1>-<h6>) to outline the <section> constituents:

<section>
  <h2>Section Heading</h2>
  <p>Noteworthy constituents...</p>
</section>

Reserve <section> for when the content possesses a defined heading and might logically be a segment of the page's structure. For non-semantic containers, opt for <div>. A correctly structured <section> promotes accessibility and SEO, making your content more organized and navigable.

Warding off confusion: Section versus Article

When caught in a puzzle between <section> and <article>, compute the intended use and context of your content. Apply the <article> tag for independent pieces intended for syndication—think blog posts or news updates. On the other hand, <section> is primed for creating a logical sequence with thematic categorization.

Accessible Headings and their Importance

Ensure every <section> commences with an apt heading to provide context for the following content. This structuring assists SEO and accessibility as screen readers operate headings to navigate content. Headings wrapped in <section> tags also delineate the content's scope, constructing a hierarchical layout.

Div versus Section: When to Choose What

While <div> feels at home generally for styling or as a JavaScript hook, <section> is strictly for sculpting semantic architecture. If your content doesn't form a natural cluster or lacks a heading, it's better off with a <div>. This retains clarity and wards off semantic chaos.

When you're Lonely: Single-section Page

In scenarios where a solitary section graces a page, cocooning content in a <section> tag feels redundant. In such cases, let the body play the container role, delivering clean and semantic mark-up.

SEO and Semantic Brownie Points

Remember, well-structured content using <section> goes beyond user navigation—it's also a treat for SEO. Search engines love a clear structure as they can parse content effortlessly, possibly leading to enhanced rankings.

Code Example: Organizing a Party of Thematic Content

<body>
  <!-- Welcome Drink: Page Introduction -->
  <section>
    <h1>Welcome to Our Web Party</h1>
    <p>Grab your introductory drink... 🍹</p>
  </section>

  <!-- Main Course: Core Content -->
  <section>
    <h2>The Flavorful Topic</h2>
    <p>Time for some main course... 🍲</p>
  </section>

  <!-- Dessert serving: Additional grouped content -->
  <section>
    <h2>Sweet Encounters</h2>
    <!-- Who doesn't like desserts? 😉 -->
    <article>
      <h3>Fun Topic One</h3>
      <p>A scoop of sub-topic one... 🍨</p>
    </article>
    <article>
      <h3>Fun Topic Two</h3>
      <p>A slice of sub-topic two... 🍰</p>
    </article>
  </section>
</body>