22

I agree that every page in a site should have a unique TITLE, and that every page should have one and only one H1 element, but should the text of each H1 be completely unique too?

Instinctively one would think so, but there are potentially many cases where (IMHO) mind this doesn't make sense and attempting to do so will impair the user experience & presentation of the page - for example, where pages are part of a closely related cluster, e.g. a multi-step process/tool/wizard.

Surely the process name should go in the H1 (e.g. "Pregnancy Planner"), and the current step you're on should be marked up as a H2 (e.g. "Step 1 - Trying for a baby"), rather than shoehorning both into a single H1 together (e.g. "Pregnancy Planner - Step 1 - Trying for a baby")?

Not only does this make the H1 rather long and potentially impact the presentation of the page, I would argue that in combining both into one you also lose semantic goodness, as the page is surely semantically richer by keeping parent (process) and child (step) as separate, nested headings?

Furthermore, the current proposal I have read is that on the first page the H1 should be the name of the process and the first step an H2, but on subsequent pages the same text should not be a H1 at all (just text styled exactly the same as an H1) and the current step should become the H1 instead. For me this is introducing unnecessary complexity to the page authoring/production process, and inconsistency in the semantic structure of the pages within the stepped process.

So it all comes back to the basic assertion that each H1 must be completely unique, which I question. Can you convince me that this should be so and that the cost/complexity of implementing this (especially in situations such as that above) is worth it?

Your thoughts please...

Improve this question
5
  • 2
    Great question! There's several good discussion on this at the WebAim Discussion List archives like this one: webaim.org/discussion
    – Susan R
    Commented Sep 30, 2010 at 13:34
  • Thanks for the pointer to WebAim... And I should clarify that the "process" is really more of a collection of pages describing different stages of pregnancy, each of which can be arrived at directly via links elsewhere on the site & search results, which is one of my reasons for saying that the header structure should be the same on all pages within the collection, whether the first/introduction or any other within the set.
    – MarcusT
    Commented Oct 4, 2010 at 10:03
  • Also, the name of the section "Pregnancy Planner" appears separately (above) the styled breadcrumb navigation which shows which pages within the planner you can currently on, hence combining the two would require redesign & development, as well as redundant text / repetition.
    – MarcusT
    Commented Oct 4, 2010 at 10:06
  • In your second last paragraph, I'd agree totally. For example, on your homepage the markup can be something like:
    – jameswanless
    Commented Apr 4, 2011 at 20:50
  • How many titles does a book have?
    – Bobby Tables
    Commented Apr 6, 2011 at 10:27

7 Answers 7

Reset to default
10

There is no rule/recommendations/guideline which says we can't use more than one <h1>. A Google engineer says we can have multiple <h1> on a page if there is reason to do so.

But for better accessibility I always use one <h1>

JAWS will announce how many headings and links are found such as “Page has 5 headings and 30 links”.

Users can jump directly to headings (press H) and it is very common to jump to <h1> because often this is where the content starts.

Source

And must watch this video "Importance of HTML Headings for Accessibility" to see how a screen reader is reading heading levels.

Improve this answer
5
  • Thanks, but though Matt Cutts does indeed say that you can have more than one H1, we follow the usual convention that there should one and only one - challenging that will be difficult indeed, especially since I don't see that in this situation it is justifiable as a significantly better solution (for accessibility or anything else) than following the section name H1 with the page name as an H2...
    – MarcusT
    Commented Oct 4, 2010 at 10:12
  • 1
    Very good point. All h1 indicates is the highest level of heading, though in most cases that should a unique page title. For example, a solid approach to semantic markup will have the site title within an h1 tag on the homepage, but then in a div with an appropriate ID selector on all other pages.
    – jameswanless
    Commented Apr 4, 2011 at 20:49
  • 1
    @Jitendra, although you raise some interesting points for why one <h1> element should be included per page, you're not really addressing the OP's question. The OP was asking whether different pages on the same site can have the same <h1> and your answer is about whether you should have multiple '<h1>` elements on the same page. Perhaps you could consider editing your post to address the OP's question?
    – Graham Herrli
    Commented May 1, 2013 at 17:26
  • @3nafish this answer was left back in 2010 and the site was a bit different back then. It's not really worth asking for 3 year old posts to be improved as its unlikely they will do so after all that time.
    – JonW ♦
    Commented May 1, 2013 at 17:41
  • 2
    @JonW I agree it's unlikely that such old posts will be edited, but I find it's more polite to phrase my comments as suggestions for edits. That comment was meant to serve the four-part purpose of (1) explaining to you, the mod, why I flagged it as "not attempting to address the question," (2) giving Jitendra (who is still active) the opportunity to change the answer if he wants, (3) explaining to him why I down-voted (rather than just down-voting silently), and (4) notifying other users why I think this is a bad answer so that they can flag/delete/modify the question as they see fit.
    – Graham Herrli
    Commented May 1, 2013 at 18:54
4

Can you convince me that this should be so and that the cost/complexity of implementing this (especially in situations such as that above) is worth it?

I'd only argue for unique H1 content (ideally it would mirror the TITLE) for search optimization (and to ensure the user can quickly identify the page as relevant to his or her interests upon arrival).

A step within an interactive portion of the site probably won't be a potential landing page and I think it should be safe to assume the user is oriented to the purpose of the content presented and a prominent H1 is obviated.

Improve this answer
2
  • Two things... Firstly, in practice page titles usually take the format "page name - section name - site name" so they will never match the H1 anyway, but perhaps you meant only the first part which I've referred to as the "page name"? And secondly, in this particular case these "steps" are really mere pages which can be arrived at individually via the site search (and make sense in themselves), which is why it's a rather complex scenario to determine the best heading rule for.
    – MarcusT
    Commented Oct 4, 2010 at 10:00
  • 1
    Since the steps are mere pages, move all the complexity, use the page name part of your title as the H1. The concept of "steps" doesn't apply here, it's not a process, just a series of related topics or concepts.
    – Nathan-W
    Commented Oct 9, 2010 at 20:05
3

There's lots of disagreement on this. And I can come up with several cases that argue that an H1 can be the same.

If it's large company with a huge site, including several applications that all have the same L&F (Off a portal for example). Then the H1 would be the application name / Company and the H2's would be the unique title and the H3's the sub headings and so forth.

In this instance, the H1's would not be unique, but each h2 would be, since it's the unique page title. And I'd be consistent on the entire site so I'm not changing things up for those using assistive technologies.

I'm a strong believer in having only one H1 on a screen (as you stated), and always having an H1 if you have an H2, always having an H2 if you have an H3, and so forth.

Improve this answer
6
  • 1
    The debate there is that an H1 is meant to describe the document you are on (the page) not the site as a whole. I'm not saying that's more correct than what you are proposing, but that's what the debate usually centers around. I tend to let the added fact that an H1 that describes the page itself is better for SEO influence me towards having H1s unique to each page.
    – DA01
    Commented Sep 30, 2010 at 18:00
  • 1
    I agree with what you're saying, and many times will go with this. I do let accessibility influence me more than SEO if it's a portlet where you can go between applications, I want the screen reader to announce which application you're in first.
    – Susan R
    Commented Oct 1, 2010 at 13:50
  • Good point. (Though I'd say if the task requires jumping across multiple applications, there may be bigger accessibility issues than just the headers ;)
    – DA01
    Commented Oct 1, 2010 at 15:29
  • 3
    Meta and page descriptions describe the page you are on. H1 headings should introduce the most important part of each "chunk" of information on a screen, in the case of a portal with multi portlets on a page, multiple H1s would be entirely appropriate.
    – Nathan-W
    Commented Oct 2, 2010 at 20:04
  • @Nathan - so you would agree that in the case I'm citing the H1 should indeed be "Pregnancy Planner" and the H2 should be "Step 1 - Trying for a baby"?
    – MarcusT
    Commented Oct 5, 2010 at 11:31
2

There are some fundamental flaws with the implementation of headers in the HTML spec. They were created back when HTML was pretty much seen as a document structure, rather than any sort of site structure. So, based on that, there's always going to be some debate.

Based on your example, I'd say any of those options would be valid. The only thing I'd add is that a long H1 shouldn't affect your presentation at all. There's no reason the different text in your H1 can't be styled differently from each other. I've been known to use something like this:

<h1>Main Title <span class="secondLine">More Text</span></h1>
Improve this answer
2
  • Alas the page already exists with the "Main Title" and "More Text" strings appearing separately (the latter within a section permitting navigation between sibling pages) and are styled differently accordingly. Furthermore, altering the presentation is out of scope for the time being.
    – MarcusT
    Commented Oct 4, 2010 at 10:08
  • 2
    By the way, this is fixed in HTML5; you're supposed to use the hgroup element within which you can place a h1 and h2 (for instance) to describe a title and associated subtitle.
    – Rahul
    Commented Apr 4, 2011 at 22:49
1

You should check out WCAG rules or any other accessibility guidelines.

You have no limitation on the number of heading you can use, but the headings should follow the rule: R-pd.3.3 Do not skip any levels in the hierarchy of headings in the markup.

See also Using h1-h6 to identify headings.

So the idea is to have semantic, descriptive headings that are used the way they were intended, not from a styling perspective, and that they work accordingly on any reader.

Improve this answer
1

SEO, HTML5, Schema.org, and the less important H1 tag.

Typically the way I've been redesigning sites recently is to use an <H2> tag as a subhead (even if it's above the <h1> in copy visually) but position it in CSS so in code view, the <h1> tag appears first. This way search engines can give priority to the distinct <h1> in their rankings.

Furthermore a lot of my clients have been making the push to go mobile, so we're redesigning a lot of the interfaces using the bleeding edge HTML5 and incorporating schema.org metatag microdata. <H1> tags while useful for older sites had a lot of problems like those you're concerned about. With microdata you can specify clearly what each <H1> or <header> and <footer> is for and if you specify multiple headers and footers you can call out a relationships, indicate a <section> in HTML5 and that the sections are independent from one another.

All of the tags should then work together to help with the layout and SEO, not to mention it helps with the visual clutter of having multiple styling tags. In our usage it creates quite a bit more code, but the results in regard to SEO have been astronomical.

Improve this answer
0

"How many titles does a book have? – Bobby Tables"

My book has 6 titles which should be H1 headers; Three for the ones that are in three language pages in Dutch, French and German, but that have the same title because the title is the name of a house. Three other ones that are mobile and in the same three different languages with the same title.

I am not sure if I can put H1 headers on the 6 pages without the SEO ranking being negatively influenced.

Improve this answer
4
  • I'm not really sure of your point here, if I'm honest. A book is not one page, it is split over several. On a webpage you wouldn't have the French, Dutch and German content all one one page split into language sections. (Well, you could but it wouldn't be advised)
    – JonW ♦
    Commented Feb 12, 2019 at 16:51
  • If an internet site cannot have different languages and responsive subpages under the same main index, then you need a lot of main url
    – V. Bobeldijk
    Commented Feb 12, 2019 at 17:07
  • Depends what you mean by 'same main index'. You wouldn't display all of them to everyone at once all on one page. The question is specifically about a page not all the pages in the site.
    – JonW ♦
    Commented Feb 12, 2019 at 17:13
  • "need a lot of main url" well, not necessarily. The idea of example.com/en-us/ && example.com/de-DE can be done with a comparatively small amount of code (compared to building 2+ fully new pages). Newer tech makes it easy to have many "pages" of content without changing the URL, and many URL's without changing the page (or changing with javascript, no real request).
    – Delioth
    Commented Feb 12, 2019 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.