Document Structure vs. Document Appearance, the Power of CSS

Welcome to my blog, please feel free to subscribe to my RSS feed, join me on Twitter or leave a comment.

I’m only telling you because I believe in honesty, actually that’s a lie too … I’m only telling you because I want to … that’s the truth.

When you look at my home page, all the articles appear to be the same but they’re not. One of them is special and both Google and I know it’s special but you don’t because I’ve purposely altered the appearance of the article title to look like the others in the list. It’s a simple trick with massive Search Engine Optimization benefits but very few people do it.

On my home page, I load the most recent posts and display the title along with an excerpt for each just like most websites but what I do is a little different … I wrap the first story in an <h1> tag and the rest in <h2> tags. For those of you who don’t know much about document heirarcy I wrote a whole piece on document structure in Dreamweaver a while back but I’ll explain the basics for you here. A document can have only one main heading tag, it’s the most important thing on the page. Most people would assume that my name is the most important thing on the home page since it’s the biggest and it’s at the top but that would be fairly narcissistic don’t you think?

No, the most important thing on the page is the title of the article I want you to look at. In all my sub pages, the most important thing is the title of the page, which I them wrap in an anchor tag to ensure Google understands just how important it is. For example:

<h1><a href=”http://www.thisismyurl.com/tutorials/placing-page-content-in-adobe-dreamweaver/” rel=”bookmark” title=”Permanent Link to Placing page content in Adobe Dreamweaver”>Placing page content in Adobe Dreamweaver</a></h1>

Note that it’s in the <h1> tag, which tells Google that it’s REALLY, REALLY important … in fact, it’s the most important element on the page. Way, way more important than my name which is a rather paltry <strong>  tag:

<strong><a title=”Building global business with dynamic results.” href=”http://www.thisismyurl.com/”>Christopher Ross</a></strong>

Sure, my name looks important for branding purposes but when Google and other robots index my page, they see past the name and go right to the meat of the page … my <h1> tag which represents what the page is actually about. What then, to do on the home page? After all, I still want to tell the search engine robots what is important on my website but I can’t very well tell it all my titles are equally important and equally the top …

This is where I have to admit that I’ve told a small fib. Barely worth mentioning but a tiny fib all the same, my first story in the list of home page stories is always wrapped in an <h1> story which tells Google it’s the main heading for the page while all the rest on the page are wrapped in <h2> tags which tells Google they’re still important but not nearly as important as the first.

Sure, it’s more important from a document heirarchy point of view but I don’t want the first story jumping off the page visually, so I don’t want to make it bigger or bolder than the rest of them, which is where the trick comes in. Luckily it’s an easy fix using Cascading Style Sheets:

#homepagecontent h1,h2 {
     font-size: 24px;
     line-height: 30px;
     margin: 0px;
     padding: 0px;
     text-align: left;
}

#homepagecontent h1 a,h2 a {
     color: #123456;
     text-decoration: none;
     font-weight: normal;
}

#homepagecontent h1 a:hover,h2 a:hover {
     color: #cccccc;
     border-bottom: dotted 1px #cccccc;
}

What you’re looking at is the CSS that I use for my home page, the #homepagecontent tells your web browser to only apply this on the home page, while the formating for the three states of activity (normal, anchor and anchor:hover. By defining both the h1 and the h2 CSS descriptions to be exactly the same, I’ve instructed the web browsers to make them appear to the visual eye identical.

Remember the purpose of a well structured document is to organize your document but that shouldn’t interfere with how you present that data to your audience.