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 wra

Solution 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>