用 non-semantic 元素包装语义元素

Wrapping semantic elements with non-semantic elements

我想知道是否可以用 non-semantic 元素包装语义元素以用于布局目的。 screen-readers 等只直接获取孩子（如 > CSS 选择器）还是我可以尽可能多地包装？

例子

div 换行 header

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

另一个div的包装header

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

您可以根据需要添加任意数量的 div and span 元素。

它们不会改变含义（除非它们具有某些属性，例如 lang、title、...），因此这些片段在语义上是等价的：

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

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

<header>…</header>