HTML5 Wrapper

  • ∞ 6 Comments
  • # 424 words

Recently I’ve been monitoring my mint stats and I’ve noticed a surge of people searching for the term HTML5 wrapper, so I’ve decided to write up a quick post on offering up some suggestions to combat this grey area.

The Traditional Method

I think the main thing people fail to realise is that HTML5 isn’t phasing out the much loved div tag, far from it. It’s introducing a set of new elements to make standard based semantic code that should be easier for everyone to implement.

Basically, if a specific part of a website doesn’t fit into the field of a section, article or aside tag then there is no problem with using a div. As a page wrapper doesn’t fall into any of the above tag suggestions, there is nothing wrong using the tried and tested method of <div id="wrapper">.

I’ve received countless emails where people have been asking if it would be appropriate to use a section tag as a wrapper but this is not the correct implementation for the tag. The section spec says

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Use the body

Another method to create a wrapper is to style the body tag. We style our body tags with properties such as font-size, font-color and background-color to name but a few but something which I think may people may have overlooked is to add a width to the body tag, making it act as a div like container. Here’s a very simple example

body{
margin: 0 auto;
width: 960px;
}

Hopefully I’ve been able to allay some of the concerns you have been having on how introduce a wrapper when making the jump to HTML5. If you have any questions or would like to offer an alternative then please feel free to leave a comment or drop me an email by heading on over to the contact page.

If you liked this article then please feel free to Tweet it

  • Who I am

    My name is Jack Osborne and I am a Glasgow–based designer and writer. You should follow me on Twitter.

6 Responses to “HTML5 Wrapper”

  1. Mike Robinson says:
    May 17, 2010 at 1:29 pm

    I would like to add that, for those not aware, you can also apply styles like background to the html tag. This means you can have a background that spans the full window width (html) and then apply your content background to body.

  2. Nick Edwards says:
    May 23, 2010 at 11:33 pm

    Is using the body as a wrapper a good idea?

    What comes to mind is if you are wanting to have a different background colour (or image) on the wrapper than the body itself – using the body as a wrapper in this case wouldn’t be possible.

  3. Jack Osborne says:
    May 23, 2010 at 11:40 pm

    Hi Nick, If I’ve understood your question correctly then I would just apply the background-colour/image to the html element. Hope that helps.

  4. Nick Edwards says:
    May 24, 2010 at 12:09 am

    I just tried it there applying a certain background colour to the body along with a fixed width to center its contents, the whole background changed colour (not just the centered wrapper).
    I then checked after adding in a background colour for the html element and it seems to work the way a wrapper div does.

    So basically if the html element isn’t specified it inherits from the body, interesting.

    Any idea why people generally use a wrapper div instead of the body then? I would think that using one less div would be a good thing, but surely theres a good reason that the general web design community uses a wrapper div instead?

    haha, I really should know more about this…it’s pretty basic stuff.

  5. Jack Osborne says:
    May 24, 2010 at 7:29 pm

    @Nick – I’m not really sure why more people don’t use the body as a wrapper, I guess it’s probably just down to the fact that they just didn’t know they could.

    I know for a long time I used a div as my wrapper because it’s all that I knew and it was until we started developing the templates for the HTML5 Doctor site that someone put forward the idea of using the body.

    However, for anyone else reading this, there’s nothing wrong with using a div tag for a wrapper. If you’re happy with what you’re doing keep on doing it. This was just a blog post to offer up alternatives.

  6. Jonn says:
    May 28, 2010 at 4:32 pm

    Hi Nick,

    I’m no expert in CSS but I’ve come across this particular thing a couple of times. The idea of using the body as a wrapper needs some extra fiddling for our most beloved browser. margin: 0 auto; does not work in IE6, unless you apply text-align: center; to the parent element (in this case it would be the html tag).

    /Jonn