What is the <h1> tag in HTML? Definition and usage

Definition of the <h1> tag

The <h1> tag is the HTML element that represents the main title of a web page. It belongs to the heading tags family which includes levels from <h1> to <h6>, where <h1> represents the most important hierarchical level.

In simple terms, the <h1> tells browsers, search engines and assistive technologies what the main subject of your page is. It is a fundamental element for the semantic structure of any HTML document.

If you want to perfectly master HTML structure tags like <h1>, our complete HTML course will guide you step by step in your learning.

Basic syntax

The syntax of the <h1> tag is particularly simple:

<h1>Your main title here</h1>

Like all content tags in HTML, the <h1> requires an opening tag and a closing tag. Your title text is placed between these two tags.

Importance of <h1> for SEO

The <h1> tag plays a crucial role in the organic search ranking of your web pages. Here's why it's so important:

Relevance signal for search engines

Search engines like Google use the <h1> content to understand the main subject of your page. A well-optimized <h1> containing your target keywords helps algorithms index your content correctly.

Improved user experience

A clear and descriptive <h1> title allows visitors to immediately confirm they are on the right page. This reduces bounce rate and improves engagement.

Accessibility

Screen readers used by visually impaired people rely on heading structure to navigate through a page. The <h1> allows them to quickly identify the main subject.

Difference between <h1> and <title>

A common confusion exists between the <h1> tag and the <title> tag. Here are their differences:

Both tags can contain similar text, but they have distinct functions. The <title> appears in Google search results, while the <h1> is the first visible element on the page itself.

Practical usage examples

Basic page structure

Here is an example of a complete HTML structure with a properly positioned <h1>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Complete guide to garden flowers</title>
</head>
<body>
    <header>
        <nav>
            <!-- Site navigation -->
        </nav>
    </header>
    
    <main>
        <h1>Complete guide to garden flowers</h1>
        <p>Discover everything you need to know about flowers...</p>
        
        <h2>Roses</h2>
        <p>Roses are among the most popular flowers...</p>
        
        <h2>Tulips</h2>
        <p>Originally from Turkey, tulips...</p>
    </main>
    
    <footer>
        <!-- Footer -->
    </footer>
</body>
</html>

In this example, you can observe that the <h1> is placed at the beginning of the main content, inside the <main> tag. It is followed by <h2> subheadings that structure the different sections.

Blog article page

For a blog article, the <h1> typically corresponds to the article title:

<article>
    <header>
        <h1>How to create a vegetable garden in an apartment</h1>
        <p class="meta">Published on January 15, 2024 by Marie Dupont</p>
    </header>
    
    <p>Do you dream of growing your own vegetables but live in an apartment? Good news: it's entirely possible!</p>
    
    <h2>Choosing the right containers</h2>
    <p>The first step is to select...</p>
    
    <h2>Vegetables suited for indoor cultivation</h2>
    <p>Certain vegetables are particularly well suited...</p>
    
    <h3>Aromatic herbs</h3>
    <p>Basil, parsley, chives...</p>
    
    <h3>Cherry tomatoes</h3>
    <p>With enough light...</p>
</article>

Notice the use of the <article> tag that encapsulates all the content, with the <h1> in a semantic <header>.

Homepage

On a homepage, the <h1> can be used to present your main value proposition:

<main>
    <section class="hero">
        <h1>Learn web development interactively</h1>
        <p>Over 50,000 students trust us for their training paths.</p>
        <a href="/signup">Start for free</a>
    </section>
    
    <section>
        <h2>Our popular courses</h2>
        <!-- Course list -->
    </section>
    
    <section>
        <h2>Student testimonials</h2>
        <!-- Testimonials -->
    </section>
</main>

Heading hierarchy: from <h1> to <h6>

The <h1> fits into a logical hierarchy of six heading levels. Here's how to use them correctly:

<h1>Main page title</h1>

    <h2>Major section 1</h2>
        <h3>Subsection 1.1</h3>
        <h3>Subsection 1.2</h3>
            <h4>Detail 1.2.1</h4>
            <h4>Detail 1.2.2</h4>
    
    <h2>Major section 2</h2>
        <h3>Subsection 2.1</h3>
        <h3>Subsection 2.2</h3>

Best practices for the <h1> tag

One <h1> per page

Although HTML5 technically allows multiple <h1>s in different sections, SEO best practice recommends using only one <h1> per page. This clarifies the main subject for search engines.

Include your main keyword

Your <h1> should contain the main keyword for which you want to rank the page, ideally at the beginning of the title.

<!-- Good example -->
<h1>Traditional apple pie recipe</h1>

<!-- Bad example -->
<h1>Welcome to our website!</h1>

Be descriptive but concise

A good <h1> should be descriptive enough to inform the reader, while remaining concise. Aim for between 20 and 70 characters.

Avoid duplication

Each page on your site should have a unique <h1>. Identical titles on multiple pages create confusion for search engines.

Position it at the top of the page

The <h1> should be one of the first visible elements in your page's main content. Don't hide it at the bottom of the page or in less visible elements.

Styling the <h1> with CSS

By default, browsers display the <h1> with a large font size and bold weight. You can customize its appearance with CSS:

h1 {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-align: center;
}

/* Different style for articles */
article h1 {
    font-size: 2rem;
    text-align: left;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

Common mistakes to avoid

Using <h1> for styling only

Never use an <h1> simply because you want larger text. Use CSS for styling and reserve heading tags for their semantic function.

<!-- Bad: usage for styling -->
<h1>SALE -50%</h1>

<!-- Good: using a CSS class -->
<p class="promo-banner">SALE -50%</p>

Placing the <h1> in the site header

The global navigation <header> should not contain the page's <h1>. The logo can use an <img> or a <span>, not an <h1>.

<!-- Bad -->
<header>
    <h1>My Website</h1> <!-- Repeated on all pages -->
    <nav>...</nav>
</header>

<!-- Good -->
<header>
    <a href="/" class="logo">My Website</a>
    <nav>...</nav>
</header>
<main>
    <h1>Unique title of this page</h1>
</main>

Using multiple <h1>s

Even though it's valid in HTML5, avoid having multiple <h1>s on the same page for SEO reasons.

Forgetting the <h1>

Every page should have an <h1>. A page without a main title is poorly structured and loses SEO opportunities.

Attributes of the <h1> tag

The <h1> tag accepts all global HTML attributes:

Using the id attribute is particularly useful for creating anchor links to the main title:

<h1 id="complete-guide">Complete gardening guide</h1>

<!-- Link to this title -->
<a href="#complete-guide">Back to top</a>

Browser compatibility

The <h1> tag is supported by all browsers since the early days of the web. It is part of the original HTML specification and benefits from universal compatibility:

• Chrome: All versions
• Firefox: All versions
• Safari: All versions
• Edge: All versions
• Internet Explorer: All versions
• Opera: All versions

You can use this tag without any compatibility concerns.

Frequently asked questions

Technically yes, HTML5 allows multiple <h1>s in different sectioning elements (<article>, <section>). However, for SEO and clarity, it is strongly recommended to use only one <h1> per page. Search engines prefer a clear structure with a unique main title.

No, it's not mandatory, but they should be thematically related. The <title> is optimized for search results (50-60 characters), while the <h1> can be more descriptive or creative. Both must however reflect the main subject of the page.

Yes, the <h1> remains an important ranking factor. Google uses it to understand your page's subject. A well-optimized <h1>, containing your target keywords and accurately describing the content, positively contributes to your positioning in search results.

Mastering HTML structure, including the correct use of <h1> and all semantic tags, is acquired through guided practice. Our complete HTML course will teach you all the best practices for creating perfectly structured, accessible and SEO-optimized web pages.