Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Codin - Codesmite
Codin - Codesmite
8,600 Points

Wrapper inside or outside HTML5 Semantics Main, Which is best practice?

Does anyone know what is the best practice to have my content wrapper A: inside main, B: Outside Main or Other?

I know it is bad practice to style HTML5 Semantics hence why I have styled a div for the layout wrapping of the content, but I am unsure what the best practice is for 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).

#wrapper {
   box-sizing: border-box;
   width: 1200px;
   min-height: 100%;
   height: auto;
   padding: 100px 0 200px 0;
   margin: 0 auto;
}

A:

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

B:

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

1 Answer

Derick Moncado
Derick Moncado
23,259 Points
Derick Moncado
Derick Moncado
23,259 Points

B, is considered best practice. 'Main' is where you will put the primary content however it is always a good idea to have a "wrapper" per say as a failsafe for additional structure and styling purposes (like different colored background sections if your site uses a CSS based grid). It essentially 'wraps' EVERYTHING after the <body> element as an additional parent container. Go with B :)

Codin - Codesmite
Codin - Codesmite
8,600 Points

So it doesn't effect SEO or screen readers if I was to place the wrapper div outside of the Main Semantic, and it is better this way incase semantics fail in browser/screen reader compatability?