HTML5语义主要内部或外部的包装器，这是最佳实践？

Question

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

• A：main

中的布局包装器

• B：main

之外的布局包装器

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

SEO是我最关心的主要问题。

包装器仅用于内容，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>

Answer 1

  

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

对于像main这样的HTML5元素的样式，不是一种不好的做法。如果你真的不需要它们，我会称之为添加div元素是一种不好的做法。

你不应该添加有意义的元素（即除了div and span之外的所有内容），因为你需要一个元素用于造型，但是如果你因为它的语义而需要一个元素，那么设置它就没有错。

如果你确实需要换行div：语义为makes no difference，如果它在里面或外面。

Answer 2

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