You are here

How to use the h1 heading tag

Some are not aware that there's a h1 tag. Some use is as they please. Others try to think what makes the most sense and act accordingly.

Let's see what is the best way to use the h1 heading tag on your website to appease both the humans and the search engines.

How is it supposed to be used?

Judging by the HTML 4.01 Strict specification:
A heading element briefly describes the topic of the section* it introduces.
*- bolding mine.

It means that not only a h1 tag can be used multiple times on a page, but it also determines a topical section of the page. Depending on the page type and structure, there may be several sections, so it can be pretty handy.

How to use the h1 heading tag?

So, as mentioned above, the right way to use h1 tag is to either describe a page or a section of a page, if the page has two distinct topics.

Of course, it may need some styling up with CSS, as default browser h1 styling leaves much to be desired, mostly. Especially, if you are using a custom theme design.

There are several cases, when a page can have numerous topics, and, thus, h1 tags:

  • a homepage, introducing numerous site sections
  • an index page, introducing categories (or a category page, introducing its subcategories)
  • a page about something in general, then talking about different subtypes (for example a page about felines, first talking about them in general, then about wild cats, then about domestic cats)

For the title of each of the page sections, you'd rather be using the h1 heading tag.

Here's a desrcription of why the headings should be properly used from Web Content Accessibility Guidelines.

WCAG also has a test for the headings:

Test Process

Procedure

1. For each h1 element, find the header element that follows it.

Expected Results

1. The header following an h1 is h1 or h2.

Fail Instructions

1. Rearrange the header order so h1 or h2 elements follow h1 elements.

Pass Instructions

Any accessibility check may be performed after this test.

How not to use the h1 tag

Quite often, you will find that most WordPress and Drupal themes have h1 used for the site name (company name, etc). This is not the right way to use it, as every page has site name and, thus, the title does not describe anything page-specific.

Since we are talking about how not to use the h1 tag, you shouldn't use it only for the search engines - use it for the humans only by pointing out a heading, which describes a page or a page section.

Rounding up

Of course, the main reason to use the h1 right is the process of doing things right. A perfectionist that I am, it seems quite important.

Also, it gives people and spiders that can't see a chance to use the software to understand what the page is about. While using h1 for the page-specific titles may bring you a tiny little bit of traffic, you can create much better titles by writing them for the people.

Learn more and discuss the topic at Cre8asite and learn more about semantic markup at Pearsonified.

Topics: 

Comments

You say don't use it for something like the company name, what then, would you wrap around that? I don't like to reuse the H1 tag, I'll typically use it for the title of a page, and then use the H2 tag to define major sections within an article, and the H3 tags within those sections if warranted.

Well, use it for the main page title. If the page has two topics, use the h1 tag for both section titles.

There are many different suggestions on using the H1 tag. The best two I have heard are already mentioned in the post and comments but they are:

Title of the page/ blog
and also
as Yuri suggested by the main page/ article heading. I do not think you should use the H1 tag for the title of the page (Bobs website) and also the title of the article.

I have heard another argument that you should not use the H1 tag more than once on a page, which I agree makes sense. I have done both in my designs and at the moment would suggest using the title of the page as a DIV tag instead as a H1 tag.

I think however, most of it comes down to personal choice

Jermayn - http://www.germworks.net

Can the h2 be used for the site name (company name, etc) and then the h1 for an article title?

Jermayn, it does not say anywhere you can only use one h1 heading tag. You are to use it for each page section. However, I doubt a site name can qualify as a site section (it is just a design section, but without content visitors would consider worthy being a section).

As I said, only humans need to be taken into account. H1 is supposed to be used for identifying the main topic(s) of the page. Company name isn't one.

I doubt it is wise to use h2 for a site name. I'd suggest placing it in a div and formatting it accordingly, as you want it specially styled anyway, I'd suppose. Semantic tags aren't supposed to be used for visual markup (to make fonts larger), remember?

Thanks for commenting.

P.S. Jermayn, I have deleted the entire database the site's been running a day ago, so I had to restore everything from scratch. I have re-registered you right now, the details should be in the e-mail. Thanks for being a loyal reader :)

I tend to agree that the best bet is to use a div for the heading of the website.

I disagree a bit however with your point of not using the H tags for visual mark up. I think it is good to play around with the settings to make it look pretty which helps keep the user on the site.

btw as a side note, below you have a list of allowed HTML tags, I do not see H1 listed??? :D

Hi, Jermayn

Separating presentation and content is one of the main directions in which the W3C goes. It basically means using HTML for structural markup and CSS for styling/layout.

Using h1 tags for visual presentation goes against the grain. You can, instead, label a heading div and apply styles to it.

Using HTML for structure and CSS for styling is a good habit to have, because people with disabilities rely on software that interprets HTML markup, such as headings, lists and such.

You don't want to redo your websites to make them accessible to comply with already functioning Web accessibility law, right?

Using hx for presentation (for increasing font-size and making text block elements) is a pretty grey area now with the search engines, too. If you overuse or abuse it, you may have issues (ranking or indexing), with Google, at least.

Though I don't see how one would create a page on two different topics right now, I'll add h1 to the list.

At the moment, h1 is used automatically for page titles (the one you see as "Page title" when creating pages).

Cheers.

so I am unclear then about the use of the H1 tag, will the search engines penalize you for having to many H1 tags on a site.

Michael, the search engines won't benalize you on using many h1 tags on a page. But they will punish you, if you don't write them for the humans, i.e. use keyword stuffing, make them invisible to cheat the search engines and so on.

Technically, as I have described above, using many h1 tags on a page (not site) is a rare case, when you have several topics/main sections on the page. Normally, you are well off using one h1 tag for the main page heading (such as post/article name).

As for using h1 tags per site, as long as you follow the guidelines I have outlined here (mostly, one (or more) h1 tags per page, written for the humans), you'll be fine. The search engines don't count the total number of h1 tags used on the website: what they care is the intent with which the tags are used.

Cheers.

Any thoughts on how to control the size and font style when using

?

The only option is the Cascading Style Sheets.

The external CSS file would contain this:
h1 {font-size:10pt; font-family:verdana,helvetica,arial,sans-serif; font-weight:normal;}

The inline styles would look like this:
(h1 style="font-size:10pt; font-family:verdana,helvetica,arial,sans-serif; font-weight:normal;") - replace () with <>.

Technically, there's a shorter form of "h1 {font: normal 10pt Verdana Artial sans-serif}", but it only works if all three attributes (weight, size, family) are specified, as far as I remember.

You can also specify the color (so the font trinity might actually be "color,size, family"). Check out http://www.w3schools.com/css/default.asp for more CSS goodiness.

I know I need to use h1 and h2 for story and for site name, but h3-h6 ? where do I need to use them ?

You use h3-h6 as subheadings.

For example, you write an article about widgets and you talk both about three types of widgets and three ways to do something with them.

h1 goes for the article title

h2 goes for the three types of widgets

h3 is used for subheadings in the h2 sections to show the three ways to do something with widgets (buy, tune, store, for example).

h1: Widgets, The Complete Guide
h2: Blue Widget
h3: How to Find a Blue Widget
h4: Local Shops
h4: Internet
h4: Local Communities
h3: How to Repair a Blue Widget
h4: Do it Yourself
h4: Find a Master
h4: Send to the Service Center
h3: How to Sell a Blue Widget
h4: Sell to a collectioner
h4: Sell to a specialized shop
h4: How To Sell on eBay

h2: Green Widget
h3: How to Find a Green Widget
h3: How to Repair a Green Widget
h3: How to Sell a Green Widget

h2: Red Widget
h3: How to Find a Red Widget
h3: How to Repair a Red Widget
h3: How to Sell a Red Widget

As you can see, such heading structure is pretty neat. I can foresee rare cases for the use of h4 tags, but the HTML specs have tags up to h6, which should work for really, really long and detailed articles.

As a side note, using words in h2-4 tags will help, because:
- it makes reading faster and allows the visitors to jump to the section they want and allows them to convert
- works for the search engines, who see the words your visitors use in your subheadings to show the page to them

Thanks for this post. It's very helpful.
I want to have subheads/bylines/heading descriptions that appear immediately after each heading.

For example:

H2 Matt's Cookie Recipes
Here I describe all my groovy cookie recipes

H2 Matt's Bread Recipes
With breads from around the globe

Anywhere but the web, these would be called subheadings. But since H2-6 are often called subheadings in web work, this jargon doesn't work. But regardless, I am trying to decide on the best way to mark them up in an authoring tool I am programming. I need to choose an inline element to wrap the subhead with, inside the Heading element.

* I want every heading to acomodate the optional subheads with the least amount of markup.

* I don't want to use spans for the subhead, as they might also be used for font specs on the heading itself.

* The subheading must align left, so it has to be an inline element that validates, then set to a block level element by CSS.

<style>
h1 small {display:block; font-size:.8em; color:gray}
</style>

<h1> Heading
Subheading
</h1>

This seems like the best approach, but perhaps I am missing something? Any ideas/Comments?

Can I use H1 tags in navigation bar? My navigation bar is set up with main heading followed by subcatagories, but the content is not divided into topics. Can I use the main catagory as H1 tag and the subcatagories as H2 tags ? On subcatogory pages they become the H1 tag and the subsections H2 ? Any advice would help, thank you.

Tony

If I don't have good title could
I start with from h2 or h3 without h1 ?

Can I use 20 h2 tags on one page ?

Tony, hx tags are supposed to used as headings, not as navigation points.

You might have a right or left side navigation and have a name for it, such as Categories, where you might use an h2 tag, but it isn't ideal, anyway.

I'd only recommend using hx tags in the content.

Favorite, the main page topic/title should be in an h1. If your headline leaves much to be desired, write a better headline.

Internauta: yes, but I'd caution to make the page easy to read for the visitors. If the headlines are of different importance (5 main ones, 3 subtopics in each), then you need to use 5 h1 tags for the main page topics and 3 h2 tags for each of the subtopics.

Matt, it's probably best to use paragraph or div tags for the subheadings, depending on the formatting/positioning you want to use for them.

Can the H1 be the same on each page. What if I put an important text on the footer as H1 tag, this H1 them will be the H1 of every page and then as H2 the product name, is that allowed?

You can use several h1 tags on the page as long as they denote page topics. I think it makes most sense to only use them in the main content area, where the actual topic is located.

Putting any text in the footer in h1 is probably meaningless. Don't use h1 for formatting, use it only for the main page topics (not page blocks: a different thing).

Regarding the product name, it depends on the page. If it is a product page in a shop, then the product name would probably be in an h1 tag. It depends, really.

I tend to agree that the best bet is to use a div for the heading of the website.

I disagree a bit however with your point of not using the H tags for visual mark up. I think it is good to play around with the settings to make it look pretty which helps keep the user on the site.

btw as a side note, below you have a list of allowed HTML tags, I do not see H1 listed??? :D
xrapid search

Add new comment