Structure is important.
A house wouldn’t be a house without structure - it’d be a pile of bricks and mortar, with some windows and doors.
Now, while you can’t have a house without structure, unfortunately, you can build a web page without any structure.
It’s not hugely useful though, so to help you make sure your pages are useful to your users, here’s our How To Do Headings guide.
The rules for Headings are simple:
- Every page must have at least one (the H1)
- Only one H1 per page
- The H1 must be applied to the main heading of the page
- The H1 should ideally be the first heading in the source code
- Subheadings of any heading should be given the next heading level down (e.g., H2 for subheadings of H1, H3 for subheadings of H2, etc.)
- No jumping levels (e.g., H1 to H3)
- Everything that’s actually a heading needs to be coded as a heading, not just made bold.
- No using heading tags to make text bigger or smaller
The H1 (aka The Main Heading)
On the Home Page, the main heading is likely to be the site name. It can’t really be anything else.
On other pages, it’s the main heading of the document, not the site name, and there some very good reasons for that.
Using Word documents as an analogy - you wouldn’t use the organisation name as the level one heading on every document produced, because the level one heading quite rightly identifies the content of the document, not the organisation that produced it.
Secondly, there is no concept of site in HTML, each page is a document which is intended to be treated on its own.
Thirdly, the name of the website will be the first, or close to the first piece of content on the page because it’ll be included in the page title, and also in the alt text for the logo, or even in plain text at the top of the page adjacent to the logo. All of these things provide context to the user. They’re highly unlikely to be confused as to which site they’re on if the site name isn’t the H1.
Fourthly, there’s a potential risk to search engine optimisation. By placing the organisation name in H1 tags on each page, you lose the boost to ranking gained by placing the actual title of the page in H1 tags. You may gain places for people searching for you by name, but you’ll potentially lose for people searching by subject.
On most sites, the site name is either text, or an image of text (usually the logo) with appropriate ALT text. If you’ve gone down the logo road, you can quite happily put your H1 tags around this image, and the ALT text will function as the H1 text. If you’ve got your site name in text, and you want it to look the same whether it’s the H1 (on the Home Page) or a P (on any other page), then you can create a CSS class which has all the style info you want to use and apply it where necessary.
Same look, different tag, proper heading structure.
(and before anyone comments, yes, we know that the blog name is the H1 on every page when it shouldn’t be. This is a Wordpress thing that we’re trying to get changed.)
H2 (aka Sub-headings, Second level headings and/or Section headings)
It’s quite easy really. Anything that’s an immediate sub-heading of the H1 has to be an H2.
If you want to name your sections and include these sections in the heading structure then these should be marked up as H2, along with any subheadings within the main content of the document.
You don’t have to include section headings in your heading structure for pages, but if you’ve got more than just main and secondary navigation, it’s probably worth thinking about. A really good example of a site that’s just crying out for this kind of heading struture is the BBC News website.
H3, H4, H5 and H6
Subheadings of H2s are H3s.
Subheadings of H3s are H4s.
And so on.
A tip though: if you’re using lots of H4s, H5s and H6s, then you should probably consider splitting your pages into smaller, separate pages.
JackP | 02/11/2007 at 17:55 | Permalink
Just out of interest, why is it bad for accessibility to skip heading levels e.g. H1 to H3?
All I can find in the spec is something that states “some people consider skipping heading levels to be bad practice”, with no explanation of why, and no indication that (according to W3C at least) it’s formally frowned upon.
Ann | 02/11/2007 at 18:11 | Permalink
From the HTML techniques for WCAG1.0 section on headings:
which doesn’t specify why.
Happily, they do in the WCAG2 documentation, specifically: H42: Using h1-h6 to identify headings which states (amongst other things):
Ben 'Cerbera' Millard | 02/11/2007 at 22:02 | Permalink
So what heading do you use for sections which are siblings of the main content section? Commonly, this includes:
A navigation list.
A sidebar of promotions.
A footer of site information.
Would these also be
<h1>? They aren’t part of the main content, so<h2>would be wrong using your interpretation, as I understand it.Ben 'Cerbera' Millard | 02/11/2007 at 22:03 | Permalink
(Another WordPress issue you might look into is to allow list markup in comments!)
Ann | 05/11/2007 at 10:33 | Permalink
Ben,
As I said in the main article:
So by that logic, the headings you mention would be H2s, as they can only be subheadings of the main heading, and wouldn’t be H1s because there’s only one main heading of a document.
If it was a home page, an example structure would then be along the lines of:
H1 - Site Name
H2 - Main Navigation
H2 - Section Navigation
H2 - Latest News
H3 - News Article 1
H3 - News Article 2
H2 - Quick Links
H2 - Footer
On the markup in comments issue - we only allow very basic markup in comments to avoid spam issues, but I’ll look into getting lists added to the list of allowed markup.
Ben 'Cerbera' Millard | 05/11/2007 at 20:13 | Permalink
Aha, that makes sense. What confused me was this:
I thought you were saying the main title of the content area had to be the
<h1>, even when there were other significant sections on the page.JackP | 06/11/2007 at 12:04 | Permalink
But what if you had a site with two halves to the page that normally ran like
H1 - the page
H2 - content of type X
H3 - type X item 1
H3 - type X item 2
H2 - content of type Y
H3 - type Y item 1
H3 - type Y item 2
and then for some reason, you removed one of the H2s (perhaps there was only one sub-item, so it didn’t warrant a group header?)
you’re either left with
H1 - main page
H2 - individual item
where the styling presumably won’t be consistent as it won’t equate to the equivalent item on the other half of the page - or you can use
H1 - main page
H3 - individual item
…where it will match up; it’s of the same relative importance as the other H3 levels and so on, but there is an assumption made that doing this is wrong, simply because some people may infer that “that’s not what you really meant”…
Surely it’s not the job of user agents (whether assistive or not) to tell me what I should have put when designing my website. It’s my website, and it’s like that because that’s how I wanted it to be.
The question I was trying to ask whether or not skipping any levels makes anything actually inaccessible, not whether or not something would have rather I’d designed my site differently. If it doesn’t, then frankly I’m not going to lose any sleep over it, and I’ll continue to structure them as I see fit…
Sarah Blackburn | 07/11/2007 at 13:40 | Permalink
I think the problem with skipping levels is that you’re left thinking
‘why is this heading a level 3? wasn’t the previous one a level 1? Did I miss the level 2 because it wasn’t marked up? or because it wasn’t there?’
Sarah Blackburn | 07/11/2007 at 13:40 | Permalink
We’re trying to figure out a way around a problem we’re having.
We want to label up the various parts of the page with Headings to give the page structure - so far so good. However the design of the page has some text above the H1 (and other navigation things too)
This text is grouped into 3 ’sections’, so my feeling is that they should have headings on each of those 3 sections and possibly a group heading for the 3. I’d quite like the overall navigation to have a heading to indicate what the purpose of the group of links is.
However we know that if we have an before the then it will fail AA. (3.5 - not nesting headings correctly)
So we came up with the idea that we could put another H1 at the top of the page before the for the text and navigation.
Running it through bobby, having a second on a page isn’t a problem and there isn’t anything specific in WCAG to forbid multiple H1’s (as long as they make sense within the document structure.
But this posting suggests that having more than one H1 is a big no no… (it’s in the simple rules at the top of this page).
So can I ? should I? and if not, why not? what’s the rationale?
One thing I’ve already suggested is that the actual HTML should read in this order
Page title
Main content (including etc)
navigation items
specific parts of navigation
but the development team think this may have it’s own technical problems. They like the 2 idea much better.
JackP | 12/11/2007 at 12:54 | Permalink
@Sarah:
I understand that is the reason: I just don’t think that’s a good reason.
That’s like saying “you left the alt text for that image blank, what should you have put instead?”. The alt may be blank because I meant it to be (decorative image); similarly H3 may be more appropriate to that title than H2, which is why I’ve used H3.
Using alt=”" isn’t much help; many CMS would include alt=”" even if there ought to be proper alt text, so it doesn’t necessarily indicate by itself that the image is decorative (although it should - just as using H3 should indicate “heading of the 3rd level of importance”)
If the person reading the site is going to try and second-guess what the site owner meant every time they include any content, then shouldn’t they just write the darn thing themselves if they don’t believe me?
I put what I put because that’s what I mean by it. If you don’t believe that, then what benefit are you actually going to get out of reading any content?
mattobee.com | 14/11/2007 at 13:56 | Permalink
Describing Structure with Headings…
Six of the simplest yet commonly misunderstood and misrepresented HTML elements….
Ozbon | 23/11/2007 at 19:31 | Permalink
While I have no issue with H1-6, I do have a minor problem with your connecting the analogy to use of Word®
To whit : It assumes that people in general know how to use Word in this way, too. Most of the documents I see in Word actually end up defining a heading as “Bold (usually) and (maybe) indented. But maybe not. Depends on how I feel, really.”
The number of documents I see that’re properly structured and actually, well, use the tools that Word provides for headings and general styling markup is remarkably small in comparison to the ones that don’t.
Actually, it’s probably pretty much the same ratio as with properly marked up web pages to incorrectly marked-up ones. I wonder if there’s a connection? *grin*
Jens | 22/01/2008 at 2:13 | Permalink
> Every page must have at least one (the H1)
Do you have any experience how using more than one H1 on a page affects users and search engines?