seo Question posted in
Some basic information to get you started with this can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search