Is it ok to use the H1 tag for bullet points?

[mevseo]

Our search results page doesn't have a typical H1 tag because adding a true header would take up space unnecessarily. Therefore, we've assigned the h1 tag to be the breadcrumb.

As filters are applied, the breadcrumb grows to include these filters. This breadcrumb is coded as bullet points, even though they're not the typical style of bullet points.

Here's a screenshot: http://screencast.com/t/AjGC9iAYR3

For example, the breadcrumb:

Home >> NYC Social Media Classes >> Adult >> Manhattan

is currently coded as:

| |
|   | * class="first"><a <span="">href</a><a <span="">="</a>/">Home |
|   | * <a <span="">href</a><a <span="">="</a>/nyc/classes/social-media/age-adults/neighborhood-manhattan" class="Selected">Search results |
|   | |
|   | |
|   | id="cat_social-media" type="checkbox" checked onclick="setCategory('social-media')" /> |
|   | # style="font-size: 12px; display: inline;">NYC Social Media Classes |
|   | <label <span="">for</label>="cat_social-media"> |
|   | |
|   | |
|   | |
|   | <nobr>id="age_adults" type="checkbox" checked onclick="setAge('adults')" /><label <span="">for</label>="age_adults">Adults</nobr> |
|   | |
|   | |
|   | <nobr>id="nbhd_manhattan" type="checkbox" checked onclick="setNeighborhood('manhattan')" /><label <span="">for</label>="nbhd_manhattan">Manhattan</nobr> |
|   | |
|   | |

Right now that H1 tag just relates to 'NYC Social media classes', but we'd like to expand it to include both 'Manhattan' & 'Adults' - would that be ok?

And if so, would it be better to put the tag before and after the

• tag?

[mevseo]

Thanks Mat for your reply. Why do you think the markup is horrible?

[Dr-Pete]

I doubt it would harm you, but it is a bit unorthodox. Why not make the table header a header tag?

I'd argue with the "take up space unnecessarily" point a little. Headers aren't just for SEO (their SEO impact is probably pretty small these days) - they're for visitors. If these pages get direct visits (including from search), a prominent header can really help people know their on the right path. Breadcrumbs are great for people who are already on your site and have a sense of it, but they're too small and complex for that 5-second test of "Am I in the right place?"

[matbennett]

Ick - horrible markup.

If you are choosing the HTML element based on spacing then you probably need to look at your CSS. I've never seen an H tag used in this way before, it is certainly an original approach.  I don't think it'll kill you, but I'd avoid it if you can.

I would say that a bullet list is a more correct element for those breadcrumbs. I suspect that the thought process is along the lines of making them H1 will lend greater weight to them. It won't really work in that manner so you will probably be better served with code that is more "correct".

[theLotter]

You should keep the H1 tag to only one per page and make the other headings H2.

Change the sizing of the H1 bullet to slightly bigger than the rest of the text on the page.