围绕html5语义标签包装一个div？答案

【问题标题】：wrapping a div around html5 semantic tags?围绕html5语义标签包装一个div？
【发布时间】：2017-11-08 06:12:45
【问题描述】：

这似乎是一个非常奇怪的问题，但我一直想知道它的答案有一段时间了，在网上找不到任何关于它的信息（如果我确实错过了，我很抱歉）。

无论如何，使用 div 以及使用 html5 语义标记的更“常规”html5 方式是什么。

<div class="header-wrapper">
    <header>
        <h1>Some header</h1>
    </header>
</div>

上面的代码会比下面的代码更好吗？

<header>
    <div class="header-wrapper">
        <h1>Some header</h1>
    </div>
</header>

或者它没有任何效果？还是您最初会在 html5 语义上添加一个类并完全摆脱 div ？

p.s 这是我的第一篇文章，如果问题太“宽泛”，请告诉我。

【问题讨论】：

标签： css html

【解决方案1】：

这两种方法都是完全可以接受且有效的标记，因为 <header> element 和 <div> element 都支持 flow content子元素，并且这两个元素都是流动内容。至于哪种方法更可取，几乎完全取决于个人喜好。

但是，话虽如此，如果您不打算在 @987654329 中包含任何内容，那么使用 both <header> 和 <div class="header-wrapper"> 有点违背了目的@ 除了包装器（反之亦然）。更好的选择是只使用一个标签。

技术上只选择<header> 元素会是一个更好的选择，因为元素名称描述其中的代码应该包含文档的标题，并且该名称可以更容易地阅读和解释。据我所知，在 SEO 方面没有区别，尽管理论上浏览 DOM 的人会花更少的时间“解构”<header> 标签。

然而，在一天结束时的选择确实归结为个人喜好。

希望这会有所帮助:)

【讨论】：

太棒了；乐意效劳！一旦您确认这可以解决您的问题，请不要忘记点击投票按钮下方的灰色复选标记mark it as accepted - 这会将其从“未回答的问题”队列中删除，并为这两个问题授予声誉提问者和问题回答者。您可以在提出任何问题后 15 分钟内完成该操作。当然，这么说，您没有义务将我（或其他任何人）的答案标记为正确，尽管将问题标记为已解决有助于保持事情顺利进行:)