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.
Post a Comment