thoughts
[HTML] Release h1
2005-01-15 modified: 2005-03-18
Now people are more and more using <h1> to <h6> to identify headings (instead of some <div id="heading"> construct), let's look at how it is used.
As an example I'll take the hierarchical structure of an imaginary site:
- <h1>Dave's Pet Place</h1>
- <h2>Introduction</h2>
- <h3>History</h3>
- <h3>Current store</h3>
- <h2>Contact</h2>
- <h3>Complaints</h3>
- <h2>Introduction</h2>
We see here what I see on a lot of sites: <h1> contains the name of the company (logo) / site / weblog or similar. So what's wrong with that?
Well, we got the <title> element as well.
The <title> element shows the title of the page, just like the title of a book would do. In this case "Dave's Pet Place" would be an excellent title for our page. Then what is the sense in repeating that title in <h1>? This is double information.
All headers together should provide a nice Table Of Contents (TOC) for a page (or site), so in Dave's case, that would start with "introduction", but that would not be simple for al sites to say. There are sites that could go quite deep. Take weblogs for example. We've got the whole site, with a section, say Articles, containing a lot of articles which have there own titles and paragraph titles. No what's a proper <h1>?
One could say the title of the page should be "Dave's weblog", and let <h1> start with "Articles". This would be quite nice for an overview of articles, but when viewing one article, maybe <h1> should be the article's title.
I think that's open for discussion, all I am saying is: don't repeat information.
Now there remains the question how do we display the company name or logo (or site name or whatever) when it's in the <title> element. Simple:
head, title {
display: block;
}
This should work, because <title> is just another element and can be styled with CSS. And it works in every browser, except for Internet Explorer. Therefore I suggest to add a title replacement div in your code for IE until this works everywhere (using conditional comments):
<body>
<!--[if lte IE 6]>
<div id="flag">Dave's Pet Place</div>
<![endif]-->
...
</body>
But wouldn't this lead to double information again? Yes, but for IE it's a must and we hide it for other browsers by means of this conditional comment.
Now before diving into the source code of my site: I admit this is not done well on this site either, nor on other sites I made. I will change it on this site in the near future (it means shifting al headers, both in templates and content, which is quite a task).
Update 2005-03-18
I now fixed it on my own site as well
Additional resources (top 15)
Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).
