H2 comes before h1 in source, Is it ok?

Question

IF i use <h2> for left sidebar heading and use <h1> for main center content area heading then actually in source and and if CSS is disabled , in both condition <h2> comes before <h1>.

Is it ok? or i should not use <h2> for left sidebar headings?

Update: 5 Feb

Example image added

Why I'm asking because i always read in many articles <H1> should be the first heading in the page .

Answer 1

You should think about it semantically. H1 should come before H2 in a document. H2 is a sub element of H1.

The way I approach a page is to code it in HTML first so that it makes sense to a user without JavaScript and CSS enabledProgressive Enhancement .

Only, then do I worry about styling the content.

Answer 2

Well, considering the semantics of the h-tags, it is not OK. Your headlines in the finished document should produce a document outline like

 1. H1-Head
     1.1 H2-Head
         1.1.1 H3-Head
         1.1.2 H3-Head
         ...
     1.2 H2-Head
         1.2.1 H3-Head
         ...
     1.3 H2-Head
     ...

and so forth.

Of course this outline should conform the chronology of the tag occurences.

---

Update for your update

I would suggest the following markup

<h1><a>Main title of your site</a></h1>
<h2>Sidebar</h2>
    <h3>Sidebar Headline 1</h3>
    <h3>Sidebar Headline 2</h3>
    ....  
<h2>Main content</h2>
    <h3>Headline 1</h3>
    <h3>Headline 2</h3>
    ...

Do you know the Firefox Web Developer Plugin? It has a function "Show document outline". There you can easily validate the logic of your markup. And to give you an idea, one good and one bad example from pfizer.com and phizer.de (I think you can get the idea, even if it is German - the headlines in red say "Missing Headline").

---

By the way: Having all that h-tags in your markup doesn't neccessarily mean that they all have to be visible ;-) !

Answer 3

You can put any HTML tag anywhere you want.

Hello

Hello

Is perfectly fine.

Answer 4

probably best option would be to have actually the sidebar after the content in your html and use css to position it where you want.

Answer 5

Semantically, you will want to have the <h2> tags to come after <h1> for the document outline. In this case - does the sidebar really make sense within the flow of the document headers?

From the structure you've described, it seems that the <h2> tag is being used as a header for content that may not be related to the content on a specific page. From a search engine optimization perspective, this may not be optimal if these headers are not actually used in context, but used for the styling.

this article can clarify a bit more: http://www.nathanrice.net/blog/ultimate-guide-to-wordpress-seo-optimized-heading-tags/

Answer 6

From browser's point of view, the order of the tags does not matter. However, the order of the h1 and h2 has semantic implications for the structure of your document. So, having them in the correct order does matter.

Of course, a modern web app does not consist of one document only. There are "external" panels, which are not part of the document (sidebars, panels and so on). Thus, if you want to be semantically "correct", you should reserve h1, h2 and the rest to the main content of your page only, and use div and span for block and inline containers, that do not belong to the semantic structure of your document.

Answer 7

Put the H1 around your logo. Even if that logo is just a link around an image. (You're using alt tags, right?) Problem solved.

Answer 8

I think people are being pedantic when they say the h1 must come before the h2 in the code. The h1 should be around the most important information on the page whether it is at the top or in the footer.

What is your focus? Are you promoting the company name or what the company does/sells?

I figure if the company is selling 'red widgets', I want 'Red Widgets' to be an h1 on the product page, 'Widgets' to be the h1 on the product listing page and 'We Sell the Best Red, White, and Blue Widgets!' to be the h1 on the home page.

If somebody is looking for 'red widgets', they are usually searching for 'red widgets' and not 'ThisWidgetCompanyName'. The 'ThisWidgetCompanyName' in the title tag will catch anyone searching for the company name and unless there are a lot of companies with the same name, they should pop up near the top.