Search code examples
htmlsemantic-markup

Wrapping semantic elements with non-semantic elements

I am wondering if can I wrap semantic elements with non-semantic elements for layout purposes. Do screen-readers etc. get only directly childs (like > CSS selector) or can I wrap as much as I want?

Examples

div wrapping header

<section>
  <main>
    <div>
      <header>
         <h1>Page title<h1>
      </header>
    </div>
    <article>[...]</article>
  </main>
</section>

Another div's wrapping header

<body>
  <div>
    <div>
      <header>
         <h1>Page title<h1>
      </header>
    </div>
  </div>
</body>
Solution

  • You may add as many div and span elements as you need.

    They don’t change the meaning (unless they have certain attributes, like lang, title, …), so these snippets are semantically equivalent:

    <div>
  <div>
    <header>…</header>
  </div>
</div>

    <div>
  <header>…</header>
</div>

    <header>…</header>