Published in Web Development on Wednesday, July 21st, 2004
Everyone's talking about it, here's one persons interpretation of how to use Headings.
It seems to be a hot topic these days. I wrote about my views in March, and they haven't changed, however I think I can explain them better, and have a better understanding of how I feel.
Notice how many times "I" is used in that first paragraph. Make no mistake, this isn't a straight forward topic, it can be personal, and there are many interpretations. I present my thoughts here in the hopes of hearing what others may think of them.
Below are the posts that fanned this fire ;-]
The first post in that list started this examination of headings by looking at blog markup.
Anne van Kesteren makes a good point, saying that HTML is really limited and only intended for documents
.
This is fine. If one assumes that each individual web page is a document, then we could assume that the components that make up that document are, in fact, legitimate pieces of that document.
The specs state the following:
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
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.
Noting that this is in the 'global structure of an html page', we can see that laying out the headings, with each describing the topic of the section it introduces
, those headings may be used by user agents, for example, to construct a table of contents for a document automatically
.
The second paragraph indicates the hierarchy of the headings relative to each other.
The result of the above is pretty much what Tomas was saying in his article (I think!). Personally, I believe that each document has one purpose or objective, and therefore, one <h1>:
Here's a more complicated example as seen by the validator.
While I do agree that we are bending the tools a bit to fit our needs, the method presented above, for me, gets the job done ;-] (until someone uses the comments to poke holes in the theory!).
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
I tend to be a bit pragmatic when it comes to heading tags. I use a specifically styled h1 for marking up the title in the site banner (whether it be a graphic or plain text, though usually the logo is outside this h1) and then another more generic h1 to mark up the title of the current section in the body of the page. Headings go down from there in the main content.
In an ideal world I'd mark up the section title with an h2 and everything below that accordingly, but I've found when working with template-based solutions that it's a nightmare trying to account for the heading-levels that might be used by the banners for each site. Hence I find it's just easier to 'reset' the heading level when going into main content (stored outside of the main content).
Similarly, I don't hold with the strict interpretation that insists that an h3 can't be below an h1 without an h2 before it. According to the spec definition, headings mark up importance, not specifically heirarchy. Hence I find it useful to mark up sidebar items or 'alert' messages with h3s or h4s to reflect their ancillary nature, even though they may not come below an h2 in the document structure.