问题
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>
回答1:
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>
来源：https://stackoverflow.com/questions/34483951/wrapping-semantic-elements-with-non-semantic-elements