whats the correct approach to this css

Question

I have a page where the main element is a document, in this case a privacy policy.

The privacy policy title is an <h1> with the rest of the headings following, <h2> etc.

At the side of the document, but not in the flow of the H1, I have a small submenu which also has a heading. The question is what should the heading tag be on that?

Although I'm using some html5 elements I'm not using SECTION etc, due to the reliance on javascript for older browsers.

Answer 1

If this web page is part of a web site (and not a stand-alone document), you probably don't want to use h1 for the main content heading.

Even if you don't use the sectioning elements (section, article, aside, nav), your headings still create an outline. This outline should represent the structure of your page, similar to a ToC.

So let's think of a simple website with: a) site header, b) main content, c) site navigation

If you use h1 for the heading of your main content, the site-wide header and the site-wide navigation would be in the scope of this main content:

1. Privacy Policy
   1. My cool website
   2. Navigation

But this is not correct. "Privacy Policy" is part of "My cool website", not the other way around. And "Navigation" is not a sub-part of "Privacy Policy". So your outline should look like:

1. My cool website
   1. Privacy Policy
   2. Navigation

So the solution is: use h1 for your site-wide heading (typically the name of your company/project/person/etc.). All scopes of your page are "dominated" by this heading. This is what unites your pages to a site.

Note: if you would use sectioning elements, you could use h1 for each sectioning content.

Answer 2

if there are no <h3> in the main content, then use a <h3> in the sidebar. If you want to see it as e new content, use <h1> again.

It really depends on the context you see it, or your UX'er.

Answer 3

Use a H1 tag, contrary to popular belief you don't get penalized for multiple H1 tags; however it may have some effect on the SEO of your site.

For confirmation you can browse the articles below:

Is it alright to use multiple h1 tags on the same page, but style them differently?

http://www.seomoz.org/q/multiple-h1-tags-on-same-page

And most importantly, the below link offers an interesting read:

http://productforums.google.com/forum/#!topic/webmasters/kYX4Upa8_es

Snippet from the link above of particular interest:

When google is 'allocating' weight to a page, one of the factors is the text found inside your H tags.

So if you have one H1 tag, and not much text in it, google will see this as 'very strong text' with lots of meaning. If you have one H1 tag for a whole paragraph of text, google will see this as 'weak text' due to the total number of words contained inside the H1 tag.

The number of H1 tags on a page also affects this, if you have two H1 tags, this 'very strong text' weight will be halved, if you have three, it will be (well, I'm not sure if it's a third of the original weight, or reduced by a factor of three (ie, original weight divided by two, and then divided by two again)) and so on. So having many H1 tags is a bad idea because you will have more combined text inside H1 and it also gets divided by the number of H1 tags on the page.

As for what happens in HTML5, sorry, but I'm not sure how google views this nested syntax, I just wanted to expand and clarify on what Cristina was talking about.

Although if you're really paranoid about SEO just stick a H3 in there, I'm sure it doesn't matter much.

Answer 4

because of each heading tag indicates the relative importance of each section, so it's best to start with the highest level header and work you way down. I would put it in h3

Answer 5

I would say h3 according to WordPress widget-titles that are also h3

e.g.

<h3 class="widget-title srp-widget-title">
    POPULAR ARTICLES
</h3>

I would stay away from h1 and h2 in widgets(sidebars). If it is h3 or h4 doesn't matter too much... imho.

Answer 6

It is considered a heading, so it should probably be <h3>.