How To Make a Web Site the Modern Way. Part 4: The Body

February 24th, 2010 by Rob Larsen

The body is clearly going to take a while, since it contains all of the content on the page. I’ll be breaking it out into chunks. This first post will focus on how I use the body tag itself.

I generally use the body tag to hold basic information about the page to use with both CSS and JavaScript. I want to capture the general type of page (home pages, landing page, gallery page, tertiary page, form page) and then the style of the page within the general type (e.g., art, movies, blog.) Coming up with a good, logical scheme for this kind of thing can generate plenty of unexpected benefits throughout a site build.

It can also help with planning as these classifications can be used as part of the estimation process- “I’ve got 5 major templates and 10 variations, that’ll be 2 weeks of work.”

Here are some examples from the ongoing redesign of DrunkenFist.com. These might help to crystallize what I’m trying to do.

Home Page


<body id="home">

The home page is clearly going to have some very specific styling. It’s also a unique page, so I target it with just a simple id, “home.”

There aren’t different types of home pages on my site so I just use the id.

If you had a configurable site (themes/colors) or a site with different user states (logged in user/ guest) you could potentially capture that information in a class.

Movies Landing Page


<body id="text" class="movies">

A text heavy page (like a movie review) will have many specific styles, dealing with lists, paragraphs and headers. A movie-review might have specific CSS elements, like a credit box. This body allows me to target both of those pieces.

In addition, a page focused on movies might have styles for images or JavaScript code that needs to run to initialize videos or analytics tracking.

About Page


<body id="text" class="about">

A text heavy page that might have special content or formatting.

Art Detail Page


<body id="detail" class="art">

A gallery detail page focused on an individual image (painting or drawing.) In this specific case there are several generic elements that are restyled based on the body id and class. For one example, the content area is much larger to allow for bigger images. Same markup, but different look, all using this simple mechanism on the body.

Art Gallery Page


<body id="landing" class="art">

It’s a “landing” page (in the site in question a 3rd level page) focused on art. In this case there are plenty of styles needed to deal with thumbnails.

Featured Art Page


<body id="featured" class="art">

These 2nd level pages are all hand tweaked, so being able to target styles is very important. There are actually a few specific elements that don;t rely on the cascade on these pages, but the “featured” id is still useful.

And there you have it. As you can see with a little planning you can set up a logical scheme for your body ids and classes which will help you both organize and plan your site out.

Next time out we’ll look at basic page structure and how to create a framework for a basic two column design.

HTML CSS JavaScript

Let's Push Things Forward