Should I use multiple h1 or multiple h2 without h1? - html

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:
Use css to hide it.
Simply remove it, and the page will have h2
without h1.
Remove it, and change all h2 to h1.
Which one is more appropriate?

Answer 1

#3: Remove it, and change all h2 to h1.
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
You cannot have <h2> unless there's an <h1> beforehand.
Headings, heading hierarchy, and document outlines

Answer 2

None of these options are good SEO.
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.
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.
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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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.