Wrapper inside or outside HTML5 semantics main, wh

问题:

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>

回答1:

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.

回答2:

I personally use "B" because when you set the ID to wrapper it's read more easily by Bootstrap (in case you are using it). The other thing you should keep in mind is the child parent relation and to be careful not to override it. I hope my answer helps.