You are here

Tagging Pages with an ID in the body tag.

I've been reading “CSS Mastery; Advanced Web Standards Solutions” by Andy Budd. So far I like it but its tough to get through a book like this without trying everything out on the computer eh ?!!?
One idea that I've decided to use is to tag or identify every page on my sites with an ID in the body tag. The book talks about the downfalls of “divitis” and other ways we might overuse markup but there is a good reason for adding an ID to each page. The body tag is a great place to put the identifier because it is where the content goes that makes each page unique.

The single reason I find this so useful is for navigation. I have made the mistake, in the past, of using class=“current” to represent the active page so I can style it in such a way as to make it obvious to the user which of the navigation choices he/she is currently viewing. When doing this the old way I always had to remember to go in and change the current list item (or anchor) tag in each page but with the new way I can identify each page once (in the body tag) and be done with it. Instead of having one specific selector (class=“current”), I use multiple selectors in the CSS to do the same thing (color red in my example). It makes copying and pasting the entire navigation list from page to page much easier because I don't have to go in and move class=“current” around to suit each page. I think the advantage is made obvious by looking at the code.

To Demonstrate:

The Old Way

<style type=“text/css”>
.current {color: red;}

<li><a href="index.html" class="current">Home</a></li>
<li><a href="birding.html">Birding</a></li>
<li><a href="photog.html">Photography</a></li>
<li>< href="music.html">Music</a></li>

The New Way
<style type=“text/css”>
#index ul#nav li.home a, #birding ul#nav li.birding a, #photog ul#nav li.photog a, #music ul#nav a {
color: red;

<body id=“home”>
<ul id=“nav”>
<li class=“home”><a href="index.html">Home</a></li>
<li class=“birding”><a href="birding.html">Birding</a></li>
<li class=“photog”><a href="photog.html">Photography</a></li>
<li class=“music”>< href="music.html">Music</a></li>