CODEWITHSUNDEEP
htmlseosemantic-markup
Ash
Ash

Reputation: 822

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

Does anyone know which of these is best practice?

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>

Upvotes: 2

Views: 2719

Answers (2)

unor
unor

Reputation: 96577

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.

Upvotes: 1

User199932
User199932

Reputation: 86

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.

Upvotes: 0

Related Questions