Show love to the <body> element

As you begin to wireframe your next big web thing, it’s a good idea to keep this in mind. The body element can be styled just like any other element.

Let’s get a disclaimer out of the way: I am a markup purist at heart. There’s nothing that tugs at my heartstrings than well-structured markup. So it pains me to see the body element so underused, especially when that #wrapper div you created can do exactly what <body> can.

There are situations where you will no doubt need that #wrapper element, and I’d bet it will have something to do with Internet Explorer. But the remainder of the time, I’d wager that element is just plain expendable. Let’s take a look at an example:

body {
  margin: 0;
  padding: 0;
  font: 76%/1.6 "Comic Sans", Arial;
  text-align: center;
}
#wrapper {
  margin: 0 auto;
  padding: 1em;
  width: 750px;
  text-align: left;
}

Here we have a sample of what I constantly see. Usually, margins, paddings, and maybe a font declaration is relegated to the body element, and then it is left alone to spend the rest of its days in CSS purgatory. Subsequent properties are then added to a superfluous and unnecessary element.

But the same feat can be accomplished with just a body element!

html {
  margin: 0;
  padding: 0;
  font: 76%/1.6 Helvetica, Arial;
  text-align: center;
}
body {
  margin: 0 auto;
  padding: 1em;
  width: 750px;
  text-align: left;
}

Think of the Document Object Model as a staircase. By merely “stepping up” a level and utilizing the oft-ignored element, we save ourselves a wasted element. It may seem like a small thing, but remember that a div element has no semantic value anyway. And search engines will adore you for making sure your content gets to them without crawling through another div.

del.icio.us:Show love to the <body> elementdigg:Show love to the <body> element

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*