Headers & Page Outline

Reading the Google (and other) guidelines for the construction of a web page the notion of having a "logical" outline is discussed.

When validating your pages using the W3C validator you get the option to view the outline:

As seen above, the headers H1, H2 and H3 are reported as "Missing". If you read the guidelines for the structuring pages you are told that Screen Readers and Search Engine robots use the Outline tags in order to "make more sense" of your pages. I am not so sure that it makes much difference.

The New Design

This was based on a design from W3C using the W3.css Framework. I find it interesting that if the use of header levels was as important as stated in some of the design guides the usage and formatting of the heading tags were not made such that the outline began at H1 and so on.

The formatting of the H4 and H3 headers could have been modified in the CSS to give the same visual effect. The fact that they were not seems to indicate that the order of the header tags is of secondary importance. It is also further presumed that the formating of the header tags has been set to give a uniform behaviour across other designs using the Framework.

The effect on SEO

While the incorrect useage of header-levels is considered bad practise, it seems to have little impact on the way that your pages are ranked by search engines.

My current template design, which was inherited from an example on the W3C Schools website, uses the H4 tag for the header of the menu. My guess this was done to ensure its size. All header tags are (re)defined in the file portfolio.css, but the sizes are left as the default. While the normal H1 tag size is probably too big in this situation, and it is not really a "main" header.

The H3 tag is used for the main page header and headers of sub-sections, such as the "links". These should really be H1 and H2. However, this is not likely to make that much difference unless the webpages are required to be converted to a PDF or a Word format, the response of a screen-reader may also be affected.