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

Question

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>

Answer 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.