Tricky questions on good usage of headers (h1, h2, etc.)
I am really confused and frustrated now. I can't figure out how to correctly use the header elements (h1, h2, etc.) in my XHTML document.
The structure of my document is a header, left sidebar, content, right sidebar, and finally a footer.
Convention: Let's wrap the logo in a h1 header (you all know why and I won't explain).
Here are some litigious cases:
1/ On my article page, I have a h2 header with the text Article cats. Under that header are quite some categories as you have understood. Should I wrap each of the article titles in a h3 header even if the category only consist of this title and under it some sub-categories displayed on a single line?
My reasoning goes like this: No, I shouldn't because a category under Article cats isn't a section of the page.
2/ On the same article page, I have another h2 header with the text Articles, which is the articles in this article category. Now, under this header are let's say 15 articles. Each article is like 500px * 1000px. Each article has a title with parentheses after it on the same line with additional info like # of pages and so on (this article is just a quite long snap of a very long article of let's say 50 pages that you will get to when you click the title). How should I mark up the snap article title?
My reasoning goes like this: No, I shouldn't use headers because an article isn't a section of the page. Moreover, as said just above, each article title has elements on the right on the same line in another font size. Should I include those elements in the header then? Moreover, just under the last article and still in the h2 section is a small legend of text. Putting the article titles up in h3s would create a structure like this:
<p id="legend"></p> -> legend comes here directly
<h2>Other h2 header</h2>
This would be absurd. The same applies for the categories (there is a legend describing the colors used in the categories).
3/ In my sidebars, I have various sections like Recommended articles (top list made up of a <ul> and a title, a quick search form (with no title at all!), a quick login form (with a title of the same size as the title of the top list).
How should I mark up these titles?
What am I gonna do about the quick search box with no title? Please note that it lies on the same level as the other 2 elements that have titles. Maybe I could create a header and then hide it with CSS using the display: none property?
Also, please note that the title of the quick login box is within a legend. YOU CANNOT PUT h1 or h2 IN LEGENDS (only inline elements). Nor can you put the legend element in a h2 (checked with the XHTML validator). What am I gonna do?
Thank you a lot! These are some tricky cases that I have failed to resolve.