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:
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:
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:
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.
Leave a Reply