A Better Way To Use The <body> Tag

In my recent article about the new <main> tag, I mentioned in passing that I was reconsidering my use of the <body> element based on an article from Camen Design. Well, since then, I have become a major convert and this article is all about spreading the word. So what am I talking about? Basically, the article just points out that the <body> tag is already wrapping the content of your site and can be used for styling.

Here’s an example of the basic structure of most modern HTML5 sites:

<html>
    <head></head>
    <body>
        <div class="wrapper">
            <header></header>
            <main></main>
            <aside></aside>
            <footer></footer>
        </div>
    </body>
</html>

This is really great semantic code for the most part. Almost every element is entirely self-descriptive, doesn’t require a class, and holds a logically distinct portion of the content. Except that <div class="wrapper">. What’s that all about? Why do we even need it? You already know the answer – It’s there for styling only, to give the site width. Most of us have been doing things this way for years.

Let’s look at the above structure in action with some basic CSS:

Check out this Pen!

 

If you take a look at the CSS, you will see that I have applied some colors and widths and heights and floats to give this thing it’s basic shape. More importantly, you will notice that the primary background color is applied to the <body> element, and the width and centering of the content is applied to the <div class="wrapper">. Pretty standard stuff. But what if we could do it without the wrapper? Let’s try:

Check out this Pen!


Looks pretty much the same. But take a look at the HTML – No more <div class="wrapper">! And if you take a peak at the CSS, you will see that all I did was move the styles previously applied to the wrapper to the <body> element. To maintain the garish blue background, all I had to do was apply that style to the previously unused <html> element. And that’s all it takes to get rid of one entirely useless element!

But Is It Semantic?

According to the W3C:

The <body> tag defines the document’s body.

The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

That sounds to me like exactly what we are wrapping here. Of course, if your site has any elements that live outside of the main width wrapper, then it would not be appropriate to place them outside of the <body> tag and this technique would not work.

3 Responses to “A Better Way To Use The <body> Tag”

  1. Jordan

    Aha… but isn’t that blue background color part of the document? What if there was a texture or other background image? Semantically that may be debatable, but I would consider it part of the document, thus making your use of the html tag for it outside the guidelines of the W3C recommendation.

    Reply
    • Josiah Spence

      I would argue that since the background color or image is only provided by CSS it is outside the scope of the document. Isn’t that the whole point of separating content (markup) from style (CSS)? – The document itself is readable and semantic with or without the style applied, ergo anything that is part of the style layer is not part of the document… It’s debatable, but I like any technique that helps cut down on the proliferation of meaningless divs.

  2. Ferdi

    What if you whant to make a 100% width topbar/menu

    Reply

Leave a Reply