In HTML there are few tags as important as the <h1> tag. It is literally the heading for your page and when we talk about how to structure a document, we’re taught that the <h1> tag should represent the title of the document.

Common Mistakes

Having more than one H1 per page.

A web document can have only one title, and that’s what the H1 tag is meant to be. Instead of having more than one, use the <h2> tag and stylize it with CSS.

Using the H1 tag because you like the font size

The H1 tag is big because it’s meant to be important not because people think it’s pretty. As will all HTML elements, you can use CSS to change the look and feel of tags easily. For example:

[source lang="html"]
<h1>Test Title</h1>
<h2>Test Title Two</h2>
<strong>Test Strong</strong>
[/source]

[source lang="css"]
h1,h2,strong {
font-size: 100px;
font-weight: normal;
}
[/source]

Using the code above will make all H1,H2 and strong (bold) tags throughout a website look identical.

Using the same H1 throughout the site

The purpose of the H1 tag is … as I’ve said to represent the content of a specific page so it’s important that the contents of your heading are unique for each page.

Using the H1 for the wrong content, or not using it at all

If the purpose of a heading tag is to highlight the heading (or title) of the document, then not including one at all will result in search engines being unable to properly understand your content.

Using Heading Tags to separate content

Let’s take a look for example at a simple piece of Lorem Ipsum to see how search engines may see your content with (and without) proper headings.

Example One : No Formating

As you can see from this example, it’s nearly impossible to determine what text is important and which is worthless in this post.

[source lang="html"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst. Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus. Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Two: Simple Text Formating

Now, with paragraph breaks, we can at least start to understand the format but not what is important.

[source lang="html"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

Example Three: Formating with Headings

Using both paragraph formating and headers:

[source lang="html"]
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>

Sed sapien nulla, malesuada eu, tincidunt eu, dapibus sed, risus. Curabitur rutrum velit non enim. Duis congue, neque non pharetra blandit, est lectus aliquet purus, id dapibus augue lacus sed sem. Aliquam erat volutpat. Ut hendrerit sapien vitae lacus. Duis libero lectus, varius sit amet, auctor ut, mattis id, magna. In hac habitasse platea dictumst.

<h2>Aliquam libero neque, interdum id, dignissim id, fermentum eget, tellus.</h2>

Aliquam eget lorem quis nibh fermentum egestas. Duis id ante sed ligula egestas malesuada. Maecenas pharetra mollis ipsum. Vestibulum dignissim, turpis vel luctus facilisis, dolor mi gravida nisi, ac suscipit enim ipsum vel elit. Aenean mauris purus, convallis ac, pellentesque suscipit, varius in, lacus. Morbi blandit odio quis libero. Nullam gravida rhoncus massa. Fusce ullamcorper. Phasellus sapien nibh, consequat eu, semper in, pretium in, dui. Vivamus scelerisque.
[/source]

As you can see, using the heading tag properly in example three allows us to clearly see a separation of content and allows robots such as Google to properly crawl and identify the critical areas of our websites.

You may also care to watch the video Does it matter what order you put header tags in?