#10 <section> is no replacement for <div>

submitted on by Sarah

Bad code

<section id="page-top">
  <section data-section-id="page-top" style="display: none;"></section>
</section>
<main>
  <section id="main-content">
    <header id="main-header">
      <h1>...</h1>
      <section class="container-fluid">
        <section class="row">
          <article class="content col-sm-12">
            <section class="content-inner">
              <div class="content__body">
                <article class="slider">
                  <section class="slide"> … </section>
                </article>
              </div>
            </section>
          </article>
        </section>
      </section>
    </header>
  </section>
</main>

Issues and how to fix them

  1. Sectioning content (<article>, <aside>, <nav>, <section>) is content that potentially has a heading and is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
  2. It’s OK to nest sectioning content, but it only makes sense if the contents of the inner elements are related to the contents of the outer element.
  3. In this specific example, the sectioning elements are used for styling purposes only. They must not convey any semantic meaning, most of these sections and articles should be divs.
  4. Screen readers may announce the role of a labelled <section> (region), when a user navigates to this section. User Agents may also provide methods to navigate to section elements. Using too many (nested) sections may make interfaces for screen reader users unnecessarily complicated.
  5. <section>s are no replacement for <div>s.
  6. A<header> typically only contains a group of introductory or navigational aids for its nearest ancestor <main> element or sectioning content or sectioning root element. If it’s not a descendant of the main element or a sectioning content element, then that header is scoped to the body.
  7. The carousel (.slider) should be enclosed in a labeled region, to allow users to find it easily.

Good code

<div id="page-top">
  <div data-section-id="page-top" style="display: none;"></div>
</div>
<main>
  <section id="main-content">
    <header id="main-header">
      <h1>...</h1>
    </header>
    <div class="container-fluid">
      <div class="row">
        <div class="content col-sm-12">
          <div class="content-inner">
            <section aria-labelledby="sliderheading" class="content__body">
              <h2 id="sliderheading" hidden>New Products</h2>
              <ul class="slider">
                <li class="slide"> … </li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

Further reading