用非语义元素包装语义元素 [英] Wrapping semantic elements with non-semantic elements
本文介绍了用非语义元素包装语义元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道是否可以用非语义元素包装语义元素以用于布局目的。屏幕阅读器等只能直接获取孩子（例如> CSS选择器），还是可以根据需要进行包装？
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?
<section>
<main>
<div>
<header>
<h1>Page title<h1>
</header>
</div>
<article>[...]</article>
</main>
</section>
另一个 div 的包装标题
Another div's wrapping header
<body>
<div>
<div>
<header>
<h1>Page title<h1>
</header>
</div>
</div>
</body>
推荐答案
You may add as many div and span elements as you need.
它们不会改变含义（除非它们具有某些属性，例如 lang ， title ，...），所以这些片段在语义上是等价的：
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>
这篇关于用非语义元素包装语义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
