HTML5语义主要内部或外部的包装器，这是最佳实践？ [英] Wrapper inside or outside HTML5 semantics main, which is best practice?

问题描述

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

• A： main中的布局包装




• B：布局包装 main

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

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

包装器仅用于内容，页脚和标题在包装器之外。

CSS：

  #wrapper {
 box-sizing：border-box; 
宽度：1200px; 
 min-height：100％; 
身高：汽车; 
填充：100px 0 200px 0; 
保证金：0自动; 
} 
  

HTML A：

< pre class =lang-html prettyprint-override> < main role =main>
< div id = wrapper>< / div>
< / main>


HTML B：

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

解决方案

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

对 main 等HTML5元素进行样式设置是一种不好的做法 。如果你真的不需要它，我会称之为添加 div 元素是一种不好的做法。

你应该这样做不添加有意义的元素（即 div 和除外） span ）只是因为你需要一个元素来造型，但是如果你因为它的语义而需要一个元素，那么造型就没有错。

如果你确实需要一个包装 div ：从语义上来说它是 make没有区别如果它在内部或外部。

Does anyone know which of these is best practice?

• A: Layout wrapper inside main

• B: Layout wrapper outside main

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, but I am unsure what the best practice is regarding where to place the wrapper in regards to HTML5 semantics main or if it even matters.

SEO is my main concern more than anything.

The wrapper is for content only, the footer and header are outside the wrapper.

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>

解决方案

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 […]

It is not a bad practice to style HTML5 elements like main. I would call it a bad practice to add div elements if you don’t really need them.

You should not add meaningful elements (i.e., everything except div and span) just because you need an element for styling reasons, but if you need an element because of its semantics, there’s nothing wrong with styling it.

If you do need a wrapping div: semantically it makes no difference if it’s inside or outside.

这篇关于HTML5语义主要内部或外部的包装器，这是最佳实践？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！