Wrapper inside or outside HTML5 semantics main，哪个是最佳实践？

Question

有谁知道哪一个是最佳实践？

我知道设置 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答：

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

HTML乙：

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

Answer 1

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

Answer 2

I know it is bad practice to style HTML5 semantics hence why I have styled a div element for wrapping the layout for the page content […]

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

您不应添加有意义的元素（即除 div and span 之外的所有元素）只是因为您出于样式原因需要一个元素，但如果您需要一个元素是因为它的语义，那么对其进行样式设置没有任何问题。

如果您确实需要包装 div：语义上 makes no difference 如果它在内部或外部。

Wrapper inside or outside HTML5 semantics main, which is best practice?