HTML5语义主体内部或外部的包装器，最佳实践是什么？答案

【问题标题】：Wrapper inside or outside HTML5 semantics main, which is best practice?HTML5语义主体内部或外部的包装器，最佳实践是什么？
【发布时间】：2015-12-30 10:44:03
【问题描述】：

有谁知道哪些是最佳做法？

A：main 内的布局包装器
B：main之外的布局包装器

我知道为 HTML5 语义设置样式是不好的做法，因此为什么我设置了 div 元素来包装页面内容的布局，但我不确定关于放置包装器的最佳做法是什么HTML5 语义main 或者它是否重要。

搜索引擎优化是我最关心的问题。

包装器仅用于内容，footer 和 header 在包装器之外。

CSS：

#wrapper {
   box-sizing: border-box;
   width: 1200px;
   min-height: 100%;
   height: auto;
   padding: 100px 0 200px 0;
   margin: 0 auto;
}

HTML A：

<main role="main">
   <div id=wrapper></div>
</main>

HTML B：

<div id=wrapper>
  <main role="main"></main>
</div>

【问题讨论】：

标签： html seo semantic-markup

【解决方案1】：

我知道为 HTML5 语义设置样式是不好的做法，因此我设置了一个 div 元素来包装页面内容的布局 […]

不是为main 等HTML5 元素设置样式。如果你真的不需要它们，我认为添加 div 元素是一种不好的做法。

您不应该仅仅因为样式原因需要元素而添加有意义的元素（即除div and span 之外的所有元素），但如果您因为其语义而需要元素，那么样式设置并没有错。

如果您确实需要包装div：语义上它是makes no difference，无论是在内部还是外部。

【讨论】：

在我的情况下，这是一个非常糟糕的做法，它是一个流量非常大的网站，在我的用户中至少有 4% 使用没有 Javascript 的 IE6-8。这构成了平均每天 25,000 次页面浏览量。如果没有 Javascript，HTML5 语义不会优雅地降级，因此通过设置语义样式会破坏不支持 HTML5 语义的浏览器的整个布局，将样式留给 div 会提供优雅的回退。我只想知道如果我的样式 div 在语义内部或外部，它是否对 SEO 和搜索引擎读取您的网站的方式有任何影响。
@Ash：哇，这确实是 IE 6/7/8 用户中没有启用 JS 的比例很高。因此，在您的情况下，为每个“新”块级 HTML5 元素添加一个 div 是有意义的。如前所述，语义上没有区别（因此没有理由假设它对 SEO 很重要）。
好的，谢谢。我想我在伦敦的午休时间得到了很多，而且许多银行/对冲基金迫使员工使用没有 Javascript 的 Internet Explorer 6 向后兼容旧的定制系统。

【解决方案2】：

我个人使用“B”，因为当您将 ID 设置为包装器时，Bootstrap 更容易读取它（如果您正在使用它）。您应该记住的另一件事是子父关系，并注意不要覆盖它。希望我的回答对您有所帮助。

【讨论】：