Using H1 for Logos and Sections

The: 21/05/2009 - AT: 12:53

The H1, as well as the rest of the HTML Headings, are meant for content headings.

The H1 element is best suited for the main title of the Page, and while you can include multiple H1s, it is generally considered a bad practice. The h1 heading, should be the first heading that the user agent encounters on a page, and should indicate the start of the content section. Followed by the subheading h2, which should indicate the start of a subsection of the main heading.

The second heading can also be used for navigation/menu titles, you should place it before the navigation lists, for best accessibility. Basically this gives people with a screen reader the chance to jump between the page headings, to find the section of interest. Their screen reader would basically read out the Heading Title, followed by List with X Links. Obviously this site structure makes is very convenient for such users, and it doesn't have to impact the visual appearance of your site, because you can style that through CSS.

The Site Logo

So where dose this leave the Site Logo you might ask? Well i would include it in a simple Paragraph, either in the top of the source, or in the bottom. If you place it in the bottom of your page-source, it would be so that the actual content comes before everything else, even navigation. As this has been known to increase your ranking in some cases. Check out the SEO Tutorial at Brugbart for more Tips to increase your search engine Ranking.

Multiple H1s on a single Page

Having multiple H1s is valid, and could be considered more semantically correct, in the case where you have navigation included on your page, which ain't directly a part of the content. It is preferred to include a heading above navigation, for accessibility reasons. But using H2s indicate that the navigation-links is a part of the main article or content, while using H1s would indicate that they are a separate section of the site.

The problem is that the current versions of HTML is better suited for documents, and look at any page as a document. But a website is different from a document, in that it may include navigation, not directly related to the actual content of the page, a website is not a document, but yet we include a so called doctype.

Using H1s for navigation headings, or anything else not directly related to the content, could solve the main problem. But we would still need to stop looking at a website as being a document, a is to complex to be called a document.

The perfect solution, would be if we had elements for content, and elements for navigation. Maybe HTML5 will solve some of these issues.

Comments: [1]

Author: BlueBoden

Poster: HvYaURLmSSGsirv

Date: 21/02/2010 - 14:15

Excellent work, Nice Design