Proper use of a H1 tag

Beginner's Luck

I referred a beginner to CSS tutorials and after they we're instructed how to write the CSS for their header, they were informed that they should forget using a div and use a h1 tag instead because:

Using semantic markup (eg. the h1-element for the main header) makes sites more accessible to search engines as well as people with no CSS (though I’d personally put more emphasis on point one, but it’s just me).

This advice was listed as Dave Shea's Image Replacement Technique. I wondered where this idea originated from. Dave's page currently does not suggest to replace an h1 tag with an image and uses h3's in all his examples.

Can does not equal should

The first time I saw this technique in Layout Gala's templates, yes, I thought it was cool too. You can do a lot of things with CSS. And for each standard you break, you can find a way to compensate for it. But this does not correct the misunderstanding that an h1 tag is semantically a "site header" rather than a "section header". From what I understood this advice was not only incorrect, but leads to actually sacrificing the h1's SEO value.

Good Intentions

The intent for the "image replacement" suggestion was to be semantically correct which I can respect. The purpose for the html element h1 is clearly stated on the W3C as a section header in the 1999-2007 documentation. I have always suspected that this practice was part of an obsession with code minimalism. The practice of reducing the number of classes and ids by using elements without regard to their purpose is pretty common.

To define the proper use of an h1 tag we should look at it from various standards.

Semantics

W3C Style Recommendations: Device Independent

• one h1 is recommended -

  one heading level 1 at the top of the document

W3C's Global Structure of an HTML (4.0) Document: Section 7.5.5 Headings

• h1 is a section title -

  heading briefly describes the topic of the section it introduces



• h1 should be wrapped in a div for that section -

  example shows how to use the DIV element to associate a heading with the document section that follows it



• h1 can be used multiple times on a page (validates successfully) -

  The practice of skipping heading levels is considered to be bad practice. The series h1 h2 h1 is acceptable, while h1 h3 h1 is not, since the heading level h2 has been skipped.

W3 QA Tips on Good Titles and Use for h1 Title

• shows an h1 title reflecting a "section title" (ie. "Section One") rather than a "site title" (ie. "Welcome to My Site!")
• the top level heading (h1) should assume a certain amount of context (ie. a page about "h1 tags" should have something along the lines of "H1 Tags and How to Use Them" written in between the h1 tags)

W3C XHTML Text Module

• use the h tag nested in section tags to define structure -

Structured headings use the single h element, in combination with the section element to indicate the structure of the document

W3C QA Tip: Use Headings to Structure Your Document

• the generic h tag can be used in addition to the h1-h6 tags (no examples have been found yet) -

  It is foreseen that XHTML 2 will also provide generic headings, with a level determined by their depth in the structure.

W3C as an example noted by a user on the boagworld forum

• h1 is page name except on home page -

  The W3C's own practice seems to be to put the site name in the h1 for the 'home' page, and in other pages, have a logo icon in a link at the top of the page going back to the home page, using the h1 for the name of the page.

SEO

seoconsultants.com on the webmasterworld forum:

• At least one heading tag
  
• h1 should appear at the top of your page
• well written using prime keywords and keyword phrases

SEOMoz on H1s and H2s

• an observation: search engines will penalize you for use of multiple H1's -

  Each page should contain only one H1 tag but can have any number of H2s and subsequent levels of header tags

Accessibility

W3C's Header Nesting Example

• h1 is your "page title" -

  Using heading levels appropriately will ensure your document is more accessible.

University of Minnesota's Accessibility Guidelines

• use h1 as header graphic on home page -
  

  because the page title is the same as the site title

• for interior pages (all other pages), do not use h1 for the header graphic -

  h1 tag should be applied to the page headline rather than the header graphic

The Proper and Practical Use Guidelines for H1 Tags

1. use one h1 tag per page
   
2. the h1 contains the keyword rich title for that page
   
3. h1 tag is not the same on every page of your site
4. place h1 tag as close to the top of page as possible
   

As long as these 4 guidelines are followed, you can image replace, negative margin, absolute position, and whatever other css tricks you want to try.

On using an h1 for your header image
I have never seen anyone who has used the image replacement technique to make the h1 the header image of their page, change the text in the h1 tag on every page. This is why I feel that this method confuses people about what the purpose of a h1 tag is. This method should not be used for the creation of a template page unless it is only to be used on a specific page like the home page. Each page of your site is valuable for different phrases and the h1 tag is very important in delivering that information to search engines.

CSS design work flow

Choose your inspiration.
Right now I am working strictly off a flickr set I created of screen shots, artwork, ads, print layouts, and anything else that I find aesthetically pleasing.

Start with a framework.
I made my own. It helps eliminate the time spent recreating code that I've already written and covers all the things that I double check for when I'm done with a site. I can rest easy knowing that the standard, basic best practices involving naming conventions, web standards, content order, SEO, web typography, accessibility, usability and design principles are all accounted for.

[insert a comparison of css frameworks covering a list of best practices]

CSS for beginners

I never needed to cover this subject for any of the projects I work on but the more I learn, the more my mind may complicate how easy it can be to learn CSS. I had to teach myself using the internet as a resource and I basically learned other people's bad habits and kept making sites until I could troubleshoot everything without looking anything up.

Then I took the time to do research on a weekly basis to improve my skills and find out why each decision is made instead of imitating other people's coding habits. This blog was started when my research became the most thorough.

To define where beginners should start, there are 2 questions to be answered:
What's the right way to learn when everyone learns differently?
What skills are the most important to develop early on?

travel websites

SEO and marketing:

Travel Affiliate Web Sites

White paper on Web 2.0 for travel marketers