#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    597
    Rep Power
    140

    H2 before H1 is it acceptable?


    Hello, so far what I know regarding H-tags is that there should be one H1 with the title of the page. In the websites I develop I usually have the main menu before the actual article. Therefore my H-tags are usually as follows:

    H2: Main Menu
    H1: Article Title
    H2: Article Sub-Title
    H2: Footer Menu

    Obviously I hide the H2-tag for the Main Menu and Footer Menu. I put them there for screen readers.

    Now I was reading on the Internet that an H1 tag should come before any H2 tag and that the document should be as follows (which does make sense).

    H1
    H2
    H2
    H3
    H2
    H3

    My problem is that my Main Menu always comes before the actual Article and therefore I do not know what I can do. I found some examples where the H1 tag always hold the site title however I do not like this way forward since as much as know the H1 is very important from a SEO view and should always contain the actual title of the document being read.

    Should I maybe put an H1 tag at the top with the article title, hide this through css, and then have an h2 tag (containing the same exact text as the h1 tag) before the article text?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    16
    Rep Power
    0
    Originally Posted by sim085
    Should I maybe put an H1 tag at the top with the article title, hide this through css, and then have an h2 tag (containing the same exact text as the h1 tag) before the article text?
    How about a hidden H1 tag, and then use styling on a div tag for your visible title -- because it still wouldn't really be a level 2 heading. Or maybe your menu shouldn't use an h2 tag; it's probably not really part of the document's content.

    But yes, you should start with an H1 tag because the idea is that the headers should be able to give an outline for your page. You should think of it really more like this:

    • H1
      • H2
      • H2
        • H3
        • H3
      • H2
        • H3


    H2s are subtopics of the H1, and H3s are subtopics of the H2s. H1 is the root topic that the whole page is about. H2s are used to divide the page into its most basic pieces, and H3s and so on can be used to subdivide the H2 pieces into smaller pieces.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    597
    Rep Power
    140
    Originally Posted by nathanwall
    Or maybe your menu shouldn't use an h2 tag; it's probably not really part of the document's content.
    Thank you for tour reply. The only reason why I used an h2 for the menu is for screen readers. Infact I hide these with css.

    I will change my document to something as follows...
    Code:
    <img src="logo.png" alt="Logo" />
    <div>
       <ul class="main-menu">
          <li>Open 1</li>
          <li>Open 2</li>
          <li>Open 3</li>
       </ul>
    </div>
    <h1>Document Title</h1>
    <p>Text</p>
    <h2>Another Title</h2>
    <p>More Text</p>
  6. #4
  7. No Profile Picture
    Online Strategist
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Location
    Moratuwa, Sri Lanka
    Posts
    111
    Rep Power
    24
    I also think the styling would solve your problem. I know marketers constantly use styling to add hidden H tags, but I have never heard that the order would matter. But it does makes sense to have then in the order.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    Originally Posted by sim085
    H2 before H1 is it acceptable?
    I think this depends on how you define "acceptable."

    Both XHTML 1.1 and HTML5 validate when heading ranks are out of order.

    HTML 4 documentation says it's up to you but some people won't like it if you mess with rank order.

    At WHATWG HTML5 recommendations, they say that putting headings out of order (h4 - h2 - h1) is "correct" but less "clear."

    W3C Quality Assurance Tips for Webmasters recommends always starting with a clear h1. But it isn't required.

    So, putting heading ranks out or order seems to be "acceptable," just less than best practice.

    Originally Posted by sim085
    ... In the websites I develop I usually have the main menu before the actual article. ...
    You and 99% of web page developers.*

    A nice thing, I think, about HTML5 is the addition of the <header> section which acknowledges the practice of putting logos, navigation, etc. above the main article. So, if you can target HTML5, I think that solves your dilemma.

    Having said that, in your case, it didn't appear you had good justification for using H2 in your header, and your alternative of putting it in a ul, I think, was a better (more semantically correct) choice.

    * A made up fact, based on observation, not data.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Posts
    7
    Rep Power
    0
    I agree with one of my friend EEsterling

IMN logo majestic logo threadwatch logo seochat tools logo