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?

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