Header Tags.. Oi!!

By FreeXenon | Comments (0) | Trackbacks (1)

I originally wrote this in November of 2005 years ago but did not finish it, I think, and thought I would publish it as it is. The idea is basically finished’ish but still needs some work.

Who is this article written for??

This is written for an audience that has a basic understanding of HTML design. We will take at a big picture look at the specifications and how the language in the specification affects its use and interpretation. We will cross-reference specifications and the Web Logs of ‘Experts’ in the accessibility and standards communities.

Introduction

There was a huge not-so-conclusive debate on the GAWDS mailing list (last week of March) regarding the use of the <h1> tag. What really got people jumping was wondering whether it was OK to use more than one <h1> tag per document. It is well known in the development community that the specification does not explicitly prohibit this. With this in mind I am going to examine the W3C’s specifications and the WCAG’s to come up with an answer as to how the <h1> tag should be used. Will there be definitive answer – No, but best practices will be covered.

To really understand how header tags, more specifically the <h1> tag, should be used we need to look at the title and link elements and see how they are supposed to be used. When we better understand them it will become more apparent how the <h1> tag should be be utilized.

The Title and Link Elements should provide for context and the <h1> tag should reflect the topic of the document.

Usage of the h1 Tag

We have the title element and the link element to show how a specific page relates to the rest of the site, topic, or content external to itself. The link element shows how the page relates to other pages in the collection (either topically or site wide) on a page basis relative to itself, and the title shows how the page relates to other pages on a topical basis relative to the topic/content. What is left to do? Tell what the page is about and that is what the <h1> tag should be about.

Having said that I am now going to say something that really seems counter-productive. The real problem with the spec is the examples that they use to support the spec and the language they use. There are a few different ways  to interpret the spec and examples that support and contradict these interpretations. How you decide to implement the spec all depends on which statements and examples hold credence for you. There are three  schools of thought here: There is only one H1, there can be multiple H1’s , and the headers denote Importance rather than structure schools. I will no explain how these schools are derived from the spec and the examples that support and contradict them.

Structure and Relative Importance

The one statement that many people key in on the Headings Section is the following statement There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones. It is thought that the header tags are used to denote importance and not structure. This is the only statement that supports this, the rest of the reviewed material supports their use determining document structure. Structure, structure, structure…

The areas of the HTML 4.01 specification that I found the most informative of this topic are as follows: The Global Structure of an HTML Document, 12.3 Document Relationships: The Link Element. I referenced the XHTML 2.0 specification to see where the technology was heading which will give further perspective to its correct use. The 2.0 specification generally mirrors the 4.01 spec. If there are illuminating differences I will mention them. I start the big picture look here with the specification by referencing the link and title elements as well.

More than one

So now we have the subject of more than one <h1> tag on a page. Do the specs explicitly forbid it? NO. Do they give example to promulgate the belief that it is acceptable? Yes. Should you do it? My belief is No.

Examples

We will take a look at our fictitious site of www.flowerguide.com whose name is ‘The Flower Guide’. They have a fairly small informational site with 5 pages: site index, Buying Flowers, Types of Flowers, Growing Flowers and Flower Arranging respectively. We will show you a good  example as to how the Title and Link elements and the <h1> tag should be for the ‘Types of Flowers’ page.

Types of Flowers Page

<html>
<head>
    <title>Types of Flowers -  The Flower Guide - www.flowerguide.com</title>
    <link rel="start" title= "The Flower Guide Home" src="index.htm" />
    <link rel="next"  title= "Next page: Arranging Flowers" src="arranging.htm" />
    <link rel="prev"  title= "Previous page: Buying Flowers" src="buying.htm" />
</head>
<body>
    <h1>Types of Flowers</h1>
...content...
</body>
</html>

Sources of Information and Influences

The World Wide Web Consortium’s Specifications

To answer any question regarding the use of HTML tags we must analyze the source. The source, of course, is the specifications as set forth by the W3C. For the purposes of this discussion I have examined the HTML 4.01 and XHTML 2.0 (working draft) specifications, WCAG 1.0 and Techniques, WCAG 2.0 (Working Draft) and Techniques,
and the following W3C’s Tips of the Day:

I have also perused the WHATWG’s Webforms 1.0 proposal to the W3C to be the successor the HTML 4.01 spec. As you can see I have not just examined writings about headers themselves; I have also checked other things that affect or modify the use of header tags such as the link
and title elements which will give us some perspective as to their proper use.

Web Logs of Industry Gurus or Organizations

I also Google’d around for, and check well known BLogs of very active and knowing people in the industry to give even more perspective to the specifications as written. Specifications may look good on paper but how they are implemented and iterpreted may be a different matter. The following Web Logs have influenced my writing as I have referenced them during my research.

BLogs

Organizations

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader.

Tags:
Topics: Web Standards

Trackbacks & Pingbacks

[...] Header Tags.. Oi!! » Free Xenon Consulting [...]

Pingback by Blogging News – get information | Biginfo on 19, 19 October 2009 @ 17:53

Comments

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(required)

(required)


Powered by WP Hashcash