实施例

Question

我想知道是否可以用非语义元素包装语义元素以用于布局目的。屏幕阅读器等只能直接获得孩子（如> CSS选择器），还是可以尽可能多地包装？

`div`包裹`header`

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

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

Answer 1

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

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

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

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

<header>…</header>