HTML structure for showing page title as a selected submenu item

- 1 answer

Ad

On a category archive, I want to use the following layout:

CATEGORY NAME

[All] - Subcategory 1 - Subcategory 2 - Subcategory 3

List of all posts from 'CATEGORY NAME'

with All highlighted.

When somebody clicks on a subcategory, that category highlights and they see posts from that subcategory:

CATEGORY NAME

All - [Subcategory 1] - Subcategory 2 - Subcategory 3

List of all posts from 'Subcategory 1'

It is perfectly clear to users what this means, and that the latter means you are on that subcategory's page.

What is the best way to make this clear to search engines?

As per standard practice, the 'page title' should be an h1 tag. For the first case, this is clearly the category name. However, in the latter case it should be the subcategory. Adding an h1 inside a navigation list doesn't really make any sense; but keeping the h1 tag on the top level category name doesn't really give the right impression.

Ad

Answer

Ad

I assume you have markup like this:

<h1>CATEGORY NAME</h1>
<nav><!-- links to "All" and subcategories --></nav>
<div><!-- List of all posts --></div>

You are right that it’s not appropriate to change/add headings inside of the nav, as this would only affect the outline of the nav element itself, and not the outline of the parent.

One solution might be to change the h1 accordingly (e.g., "CATEGORY NAME: Subtitle 1"). However, this doesn’t really make sense as long as the nav is a subsection.

Another solution (and I think this one is more appropriate): add a h2 that reflects the chosen page:

<h1>CATEGORY NAME</h1>
<nav><!-- links to "All" and subcategories --></nav>
<section>
  <h2>Subcategory 1</h2>
  <div><!-- List of all posts from 'Subcategory 1' --></div>
</section>

If All is chosen, you could of course use a h2 with something like "All posts", but that might not be very elegant; instead, you could consider omitting the section in that case and use the markup from the first snippet above.

Ad
source: stackoverflow.com
Ad