Should I use multiple h1 or multiple h2 without h1?

Question

In a web page that shows a list of tutors, the current HTML codes:

<div id="tutors">

 <h1>Tutors</h1>
 <div class="tutor">
  <h2>John</h2>
  <p>...</p>
 </div>

 <div class="tutor">
  <h2>Mary</h2>
  <p>...</p>
 </div>

 <div class="tutor">
  <h2>David</h2>
  <p>...</p>
 </div>

</div>

Now, for some reasons, the word Tutors which is currently wrapped by h1 needs to be removed in the page. I can think of 3 choices:

1. Use css to hide it.
2. Simply remove it, and the page will have h2 without h1.
3. Remove it, and change all h2 to h1.

Which one is more appropriate?

Sod

Answer 1

#3: Remove it, and change all h2 to h1.

1. For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors".
   • Should I include my logo text using 'alt' or CSS?
   • Hiding Text with CSS for SEO
   • If you insist on hiding the text, Accessibility/SEO Friendly CSS Hiding
2. You cannot have <h2> unless there's an <h1> beforehand.
   • Headings, heading hierarchy, and document outlines

Drusi

I did not know that an <h1> tag had to be before an <h2> tag? Is this new to xhtml strict or html5? – Sauna

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.). - w3.org/TR/WCAG20-TECHS/G141.html – Drusi

Answer 2

Depending on the use case for the page, any three of those sound like valid options. That said, here are some things I thought about when considering this question:

• SEO: it appears there is some opinion out there that the choice of tag content may affect search engine ranking.
• Style-less rendering: if for some reason the page might be rendered without the accompanying css sheets, be aware of the effect of default rendering on the page and how you might want it to perform
• Be aware that there are new common tags like 'section' in HTML 5, which might fit your page and be a bit clearer semantically than H tags

Puett

Answer 3

Doesn't matter.

If you are using jQuery to show and hide things it has no bearing on SEO. Search engines see what you see when you view source in all practical senses. You aren't doing anything sneaky anyway.

Reference my post here on stack overflow If I do everything on my page with Ajax, how can I do Search Engine Optimization?

because what you are doing is AFTER the search engines have looked at it for all practical purposes.

Lougheed

Answer 4

None of these options are good SEO.

1. This is risky and a bad practice. Search engines have become very good at figuring out when text is hidden and if they find that a heavily weighted tag like <h1> is hidden it will hurt your rank.
2. You should never skip a step in the hierarchy of headers (don't have <h3>'s without <h2>'s etc.). In addition they should always appear in decreasing order of importance.
3. Every page should have exactly one <h1> and it should be the first heading tag. They are on the order of <title> in terms of SEO weight.

Why does this headline need to be hidden in the first place? It seems like a good description of the content of the page.

Angeliqueangelis

Point #3 is not necessarily true. Not any more anyways. This is a heavily debated topic. – Drusi

Good point, especially in HTML5. However In the case of this specific example I don't think that giving each tutor's name an <h1> makes sense semantically. I rather like @Aaron's <dl> solution however the page should still have an <h1> and I don't think it makes sense for it to be anything other than Tutors – Angeliqueangelis

Answer 5

Perhaps you should consider formatting these items as a definition list, e.g:

<div id="tutors">
    <h1>Tutors</h1>
    <div class="tutor">
        <h2>John</h2>
        <p>...</p>
    </div>
    <div class="tutor">
        <h2>Mary</h2>
        <p>...</p>
    </div>
    <div class="tutor">
        <h2>David</h2>
        <p>...</p>
    </div>
</div>

becomes:

<dl title="Tutors">
    <dt>John</dt>
        <dd>...Description here...</dd>
    <dt>Mary</dt>
        <dd>...Description here...</dd>
    <dt>David</dt>
        <dd>...Description here...</dd>
</dl>

And then apply CSS classes and styles to the elements to prettify it for sighted users. Just a thought.

Ury

Answer 6

This is a preference. You should always separate presentation and structure, so I would say just comment it out, and put that it use to be there. If you hide it, this really isn't presentation because it is never seen. So 3 would be the most appropriate.

Sauna