Headings and Structuring Your Pages

If you aren’t into semantic markup, this may not be for you. If you love correct and valid markup, howeer, this may be a discussion you’ll enjoy.

Top Level Headings

An XHTML website can be coded using the following six levels of headers:

• h1
• h2
• h3
• h4
• h5
• h6

With each growing less important the farther down the list you go. Now, let’s get on with it.

First things first: go to your home page, hit view source, and count up the number of _h1_s you see on the page. How many do you see? (Hint: Control-F—Find/Search—for “h1” and see how many instances come up on the page.)

Some would say (the purists, as I see them) that there should only be one top level heading on each page of your website. But I think this is going too far. The W3C describes headings this way:

A heading element briefly describes the topic of the section it introduces.

I take this to mean that each section should have an h1 describing the content within (in some way). So instead of only one heading per page, now we’re looking at one h1 for the content, one h1 for the sidebar, etc.

Maintain Your Structure

Something that really frustrates me (and makes me pity the owner, honestly) is when the author takes the liberty of using strong and em tags instead of heading tags. They do this because they want a particular look, maybe they want no space below the line they want “heading” some paragraph… you get the idea. But what spits out onto that page, the result of this misguided author’s attempt at styling with structure, is structure-less.

If you should use a header, but your header doesn’t look the way you want it to, fix your styles. Don’t abuse the semantic markup.

Problems and Pains if You Ignore Structure

Let’s say you blow off the semantic structure of a page. Let’s say you don’t care about what header you use where, or whether you even use them or not. There are three pains you’re going to feel before long:

1. Pains when you change your stylesheet. At some point you will want to change the look and feel of your site. But if your content isn’t wrapped in the correct tags, you won’t be able to style all of those “headings” you used the way that you should (and otherwise would) be able to.
2. Pains when search engines laugh at you. If your content isn’t structured well, search engines will ignore how it is laid out. This means that weight won’t be put where it should be, and (probably) the wrong thing will show up when people search for your content. This will happen especially if you don’t have your top level header defined the way it should be. See the above section “Top Level Headings” for more on that.
3. Pains when CSS incorporates new things. One of the planned additions to CSS is the ability to create on-the-fly section numbers. This is an incredibly powerful idea (3.0 for the header, 3.1 for the subheading, 3.1.1 for the next, you get the idea) that you will miss out on if you neglect proper formatting.

I hope these ideas get through and provide enough inspiration for you at least start writing correct code now. As far as fixing past mistakes, well…Maybe wait for a rainy day with a few hours to kill?

Written by Ryan Imel from Theme Playground
Posted on August 16th, 2007 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

4