Imagine opening a newspaper where every article, headline, and paragraph is printed in the same font size, without any clear separation. Finding the information you're interested in would be quite difficult, wouldn't it?

Fortunately, newspapers don't work that way. They use large headlines to introduce important stories, smaller headings to divide articles into sections, and regular text for the actual content.

Webpages work in a similar way.

When you visit a website, you'll often notice a large title at the top, followed by smaller headings that divide the content into different sections. These headings help you understand what the page is about and make it easier to find the information you need.

In HTML, we create these headings using heading tags.

But HTML headings do more than just make text appear larger or bolder. They also help browsers, search engines, and assistive technologies understand how the information on a webpage is organized.

Let's explore how heading tags work, the differences between the six heading levels, and how to use them correctly when building a webpage.

What Are HTML Heading Tags?

HTML heading tags are used to define headings and subheadings within a webpage.

HTML provides six heading levels, starting from <h1> and ending with <h6>.

Each heading level represents a different level of importance within the document's structure.

The <h1> element represents the highest-level heading, while <h6> represents the lowest-level heading.

Here's a simple example showing all six heading levels:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Heading Example</title>
</head>
<body>

    <h1>This is Heading 1</h1>
    <h2>This is Heading 2</h2>
    <h3>This is Heading 3</h3>
    <h4>This is Heading 4</h4>
    <h5>This is Heading 5</h5>
    <h6>This is Heading 6</h6>

</body>
</html>

When you open this document in a browser, the output will look something like this:

Browser output:

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Notice that the first heading appears larger than the others, while the last heading is usually the smallest.

This happens because web browsers apply default styles to heading elements. Typically, headings are displayed in bold, with different font sizes and spacing depending on their levels.

However, here's something important to understand: heading levels represent the structure of your content, not just its appearance.

Even though <h1> usually appears larger than <h2>, we shouldn't choose a heading simply because we want larger or smaller text.

We'll understand why as we continue.

Understanding the Six HTML Heading Levels

Let's look at each heading level and understand where it should be used.

The <h1> tag

The <h1> element represents the highest-level heading within a document or section of content.

On a typical webpage, it is used for the main title that describes what the page is about.

For example, suppose you're creating a webpage about learning HTML.

<h1>Learn HTML: A Beginner's Guide</h1>

This heading tells readers that the main topic of the page is learning HTML.

If you're writing a blog post about JavaScript, the <h1> might be:

<h1>Introduction to JavaScript</h1>

Similarly, on a product page, you might use:

<h1>Samsung Galaxy Smartphone</h1>

The important thing is that the heading should clearly describe the main subject of the content.

For most beginner websites and ordinary article pages, using one clear <h1> for the main page title is a sensible approach.

However, HTML doesn't strictly prohibit multiple <h1> elements. In more complex documents, multiple top-level headings can exist, although a clear hierarchy with one main page heading is usually easier to maintain.

The <h2> tag

The <h2> element is commonly used to divide the content under an <h1> into major sections.

Let's say you're writing an article titled "Learn HTML."

Your main heading might be:

<h1>Learn HTML</h1>

You can then introduce different sections using <h2>:

<h1>Learn HTML</h1>

<h2>What Is HTML?</h2>

<h2>Basic Structure of an HTML Document</h2>

<h2>Common HTML Elements</h2>

<h2>Creating Your First Webpage</h2>

Each <h2> represents a major topic within the article.

This makes the document easier to read because visitors can quickly identify the sections that interest them.

The <h3> tag

The <h3> element is used when you need to divide an <h2> section into smaller subsections.

For example, suppose your article contains a section called "Common HTML Elements."

Within that section, you want to explain paragraphs, links, and images separately.

<h1>Learn HTML</h1>

<h2>Common HTML Elements</h2>

<h3>Paragraph Elements</h3>
<p>Paragraphs are created using the p element.</p>

<h3>Links</h3>
<p>Links are created using the a element.</p>

<h3>Images</h3>
<p>Images are added using the img element.</p>

Here, "Common HTML Elements" is the main section, while "Paragraph Elements," "Links," and "Images" are its subsections.

This creates a parent-child relationship between the headings.

The <h2> introduces the broader topic, and the <h3> headings organize the smaller topics within it.

The <h4>, <h5>, and <h6> tags

HTML also provides three additional heading levels for situations where content needs more detailed organization.

For example, imagine you're writing technical documentation about HTML forms.

You could organize it like this:

<h1>HTML Forms</h1>

<h2>Form Elements</h2>

<h3>Input Elements</h3>

<h4>Text Input</h4>

<h5>Common Attributes</h5>

<h6>The Required Attribute</h6>

Each heading represents a more specific topic than the heading above it.

In practice, most simple webpages don't need all six heading levels. You might use only <h1>, <h2>, and <h3> in a normal blog post.

That's perfectly fine.

You don't need to use all six heading levels just because HTML provides them. Use only the levels necessary to organize your content clearly.

Understanding Heading Hierarchy

One of the most important concepts when working with HTML headings is heading hierarchy.

Hierarchy simply means arranging information in levels, from the most general topic to more specific topics.

Think about the table of contents in a textbook.

A textbook contains chapters. Each chapter may contain sections, and those sections may have smaller subsections.

HTML headings help us create a similar structure within a webpage.

Consider a blog post about learning web development.

<h1>Introduction to Web Development</h1>

<h2>Frontend Development</h2>

<h3>HTML</h3>
<h3>CSS</h3>
<h3>JavaScript</h3>

<h2>Backend Development</h2>

<h3>Server-Side Programming</h3>
<h3>Databases</h3>
<h3>APIs</h3>

The structure can be visualized like this:

Introduction to Web Development (H1)
│
├── Frontend Development (H2)
│   │
│   ├── HTML (H3)
│   ├── CSS (H3)
│   └── JavaScript (H3)
│
└── Backend Development (H2)
    │
    ├── Server-Side Programming (H3)
    ├── Databases (H3)
    └── APIs (H3)

Notice how the topics are organized.

"Introduction to Web Development" is the main topic. Frontend and Backend Development are major sections, and their related technologies are listed beneath them.

This structure helps both readers and software understand how the different parts of the document relate to one another.

It also makes the content easier to maintain. If you later want to add a new frontend technology, you know exactly where it belongs.

Should You Skip Heading Levels?

Suppose you write the following HTML:

<h1>Learning HTML</h1>

<h3>Introduction</h3>

Here, we've moved directly from <h1> to <h3> without using <h2>.

The browser will still display both headings. This is not a syntax error that prevents the page from working.

However, skipping heading levels can make the document's structure confusing.

If <h3> represents a subsection, readers and assistive technologies may reasonably expect it to belong under an <h2> section.

A clearer approach would be:

<h1>Learning HTML</h1>

<h2>Introduction</h2>

Similarly, if you have an <h3> heading and want to introduce a subsection beneath it, use <h4> rather than jumping straight to <h6>.

That doesn't mean you must always move through every heading level in order.

For example, after finishing an <h3> subsection, it's perfectly normal to return to <h2> when starting a new major section.

<h1>Learning HTML</h1>

<h2>HTML Basics</h2>

<h3>HTML Elements</h3>
<h3>HTML Attributes</h3>

<h2>HTML Forms</h2>

This is a logical structure because "HTML Forms" begins a new major section.

A good rule is to avoid skipping levels when moving deeper into a section and choose heading levels based on the actual organization of your content.

HTML Headings vs Paragraphs

Beginners sometimes confuse heading elements with paragraph elements because both display text on the webpage.

However, they have different purposes.

Headings introduce topics or sections, while paragraphs contain the actual content.

For example:

<h1>What Is HTML?</h1>

<p>
    HTML stands for HyperText Markup Language.
    It is used to define the structure and content
    of webpages.
</p>

The <h1> element tells readers what the following content is about.

The <p> element provides the explanation.

Consider what would happen if we used headings for every line:

<h1>What Is HTML?</h1>

<h2>HTML stands for HyperText Markup Language.</h2>

<h3>It is used to create webpages.</h3>

Although this is valid-looking markup, it doesn't describe the content correctly. The two explanatory sentences are being presented as section headings when they are actually ordinary text.

A better approach is:

<h1>What Is HTML?</h1>

<p>
    HTML stands for HyperText Markup Language.
    It is used to structure webpages using elements
    such as headings, paragraphs, links, and images.
</p>

Use headings to introduce subjects and paragraphs to explain them.

Can We Change the Appearance of HTML Headings?

Yes. Although browsers provide default styles for heading elements, we can customize their appearance using CSS.

For example, let's create a webpage with two headings:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styling HTML Headings</title>

    <style>
        h1 {
            color: darkgreen;
            font-size: 36px;
            font-family: Arial, sans-serif;
        }

        h2 {
            color: darkblue;
            font-size: 24px;
        }
    </style>
</head>
<body>

    <h1>Welcome to My Website</h1>

    <h2>About Us</h2>

    <p>
        We create websites and web applications.
    </p>

</body>
</html>

Here, we've used CSS to change the colors, font sizes, and font family of our headings.

The <h1> will appear in dark green with a font size of 36 pixels, while the <h2> will appear in dark blue with a font size of 24 pixels.

Notice that the HTML heading levels haven't changed.

An <h1> is still an <h1>, even if we make its text smaller. Similarly, an <h3> doesn't become an <h1> simply because we increase its font size.

This separation is important.

HTML describes the structure and meaning of the content, while CSS controls how it looks.

Why You Shouldn't Use Heading Tags Just to Make Text Bigger

Let's say you want to display an important warning on your webpage.

You might be tempted to use an <h1> because it normally appears large and bold.

<h1>Warning: Please Save Your Work!</h1>

But what if this warning is just a short message inside an existing section and isn't actually a heading?

In that case, using <h1> would misrepresent its purpose.

Instead, you could use a paragraph with a CSS class:

<p class="warning">
    Warning: Please Save Your Work!
</p>

.warning {
    font-size: 24px;
    font-weight: bold;
    color: darkred;
}

The warning will still appear large, bold, and red, but it won't incorrectly introduce a new top-level heading.

This is a good habit to develop early.

When writing HTML, choose an element based on what the content means, not simply how you want it to look.

If you want to change the appearance, use CSS.

HTML Headings and Accessibility

Heading tags are also important for accessibility.

Accessibility means designing websites so that people with different abilities can use them, including people who rely on assistive technologies.

For example, some people with visual impairments use screen readers to navigate websites.

A screen reader is software that reads webpage content aloud and provides ways to navigate the document.

Many screen readers allow users to navigate between headings or view a list of headings on the current page.

Imagine opening a long article about HTML with the following structure:

<h1>Introduction to HTML</h1>

<h2>What Is HTML?</h2>

<h2>HTML Document Structure</h2>

<h2>HTML Elements</h2>

<h3>Heading Elements</h3>

<h3>Paragraph Elements</h3>

<h2>Conclusion</h2>

A screen reader user can use the headings to understand how the article is organized and move directly to a particular section.

For example, someone interested in paragraph elements can navigate to that heading without listening to every paragraph before it.

Now imagine that the developer used only <div> elements styled to look like headings:

<div class="main-title">Introduction to HTML</div>

<div class="section-title">What Is HTML?</div>

These elements might look like headings visually, but ordinary <div> elements don't automatically communicate heading semantics to assistive technologies.

That's why using actual HTML heading elements is preferable when the content is a heading.

Well-structured headings make webpages easier to understand and navigate for everyone, not just people using screen readers.

Do Heading Tags Help with SEO?

Yes, heading tags can contribute to how search engines understand the structure and subject of a webpage.

SEO stands for Search Engine Optimization. It involves improving a website so that search engines can discover, understand, and present its content appropriately.

When a search engine analyzes a webpage, the headings provide useful information about its main topic and the subjects covered in different sections.

For example, consider an article about CSS:

<h1>CSS Tutorial for Beginners</h1>

<h2>What Is CSS?</h2>

<h2>How to Add CSS to HTML</h2>

<h3>Inline CSS</h3>

<h3>Internal CSS</h3>

<h3>External CSS</h3>

<h2>CSS Selectors</h2>

These headings describe the subjects covered in the article.

A reader can understand much of the article's structure just by looking at them.

Search engines can also use headings as signals when interpreting the content.

However, heading tags aren't a shortcut to better search rankings. Simply adding more <h1> or <h2> elements won't automatically make a webpage rank higher.

What matters more is that your headings accurately describe the content and are useful to readers.

For example, if you're writing a tutorial on HTML tables, a heading such as "How to Create a Table in HTML" is more helpful than a vague heading like "More Information."

It's also better to avoid repeatedly stuffing keywords into headings.

A heading should sound natural and describe the section beneath it.

Does Every Webpage Need an H1?

For most ordinary webpages, including blog posts, tutorials, product pages, and landing pages, having a clear <h1> is a good practice.

It helps identify the main subject of the page.

For example, a blog post about HTML headings might begin with:

<h1>HTML Heading Tags Explained</h1>

The remaining sections can use <h2> and <h3> elements as needed.

However, HTML doesn't require every document to contain exactly one <h1>.

A webpage can technically contain multiple <h1> elements, and browsers will still render it.

Even so, using a single main <h1> for the primary content is usually the clearest approach for beginner projects.

There's another practical detail worth mentioning.

Some websites use a content management system or framework that automatically renders the page title as an <h1>.

If you're writing an article inside such a system, you may not need to include another <h1> inside the article body.

It's worth checking the generated HTML to avoid unnecessary duplicate page titles.

A Complete Example: Building a Webpage with Proper Headings

Let's put everything we've learned into a simple webpage.

Imagine we're creating a page about a tourist destination. We want to introduce the destination, explain popular attractions, and provide travel information.

Here's how we can organize the content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Explore Kerala</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
        }

        h1 {
            color: #256D3B;
            font-size: 36px;
        }

        h2 {
            color: #333333;
            font-size: 26px;
            margin-top: 30px;
        }

        h3 {
            color: #555555;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <main>
        <h1>Explore Kerala</h1>

        <p>
            Kerala is a state in southern India,
            known for its backwaters, beaches,
            hill stations, and cultural heritage.
        </p>

        <section>
            <h2>Popular Tourist Destinations</h2>

            <h3>Munnar</h3>
            <p>
                Munnar is known for its tea plantations,
                green hills, and cool climate.
            </p>

            <h3>Alappuzha</h3>
            <p>
                Alappuzha is popular for its backwaters
                and houseboat experiences.
            </p>

            <h3>Wayanad</h3>
            <p>
                Wayanad is known for its forests,
                waterfalls, and scenic landscapes.
            </p>
        </section>

        <section>
            <h2>Travel Information</h2>

            <h3>Best Time to Visit</h3>
            <p>
                The best time depends on the places
                you want to visit and the type of
                weather you prefer.
            </p>

            <h3>Getting Around</h3>
            <p>
                Visitors can travel using trains,
                buses, taxis, and other local
                transportation options.
            </p>
        </section>
    </main>

</body>
</html>

Let's understand the structure.

The <h1> element contains the main heading, "Explore Kerala." This introduces the entire page.

Next, we've divided the content into two major sections: "Popular Tourist Destinations" and "Travel Information."

Both use <h2> because they represent major sections under the main heading.

Within "Popular Tourist Destinations," we have three smaller topics: Munnar, Alappuzha, and Wayanad. These use <h3> because they are subsections of the destination section.

Similarly, the travel information section contains smaller subsections for the best time to visit and getting around.

Notice that we've also used paragraphs to provide the actual information under each heading.

The CSS makes the headings visually distinct, but their HTML levels are based on the document's structure.

This is how headings should be used in a real webpage.

Common Mistakes to Avoid

The first mistake beginners often make is choosing heading tags based only on their default font sizes. For example, using <h4> instead of <h2> because the text looks smaller. This creates an incorrect hierarchy. Choose the right heading level first, then adjust its appearance using CSS.

Another mistake is skipping levels unnecessarily. Moving directly from <h1> to <h4> can make it harder to understand how sections relate to one another. Use heading levels in a logical order as you move into subsections.

Some developers also use multiple headings when ordinary paragraphs would be more appropriate. Remember that headings should introduce sections or topics. They shouldn't replace normal body text.

Finally, avoid using headings that don't clearly describe their sections. A heading such as "Introduction" may be fine in some situations, but something more specific, like "How HTML Headings Work," often gives readers a better idea of what to expect.

Conclusion

HTML heading tags are one of the first things you'll encounter when learning HTML, and they're also among the most useful elements for organizing webpage content.

HTML provides six heading levels, from <h1> to <h6>. The numbers represent the hierarchy of headings within a document, with <h1> being the highest level.

Although browsers usually display higher-level headings with larger text, their real purpose is to describe the structure of your content.

When headings are used correctly, they make webpages easier to read, help assistive technologies navigate the content, and provide search engines with useful information about the page.

The next time you create an HTML document, don't choose a heading tag based only on how large you want the text to appear.

Instead, think about where that heading belongs in the document.

Use HTML to describe the content and CSS to control its appearance. That's a good principle to follow throughout your journey as a web developer.

Practice Questions

Now that you've learned how HTML heading tags work, try answering the following questions before checking the solutions.

Question 1: How many heading levels are available in HTML?

Answer: HTML provides six heading levels, from <h1> to <h6>.

The <h1> element represents the highest heading level, while <h6> represents the lowest.

Question 2: What is the difference between <h1> and <h2>?

Answer: <h1> is generally used for the main heading of a webpage or document, while <h2> is used for major sections beneath the main heading.

For example:

<h1>Learning HTML</h1>

<h2>HTML Elements</h2>

<h2>HTML Attributes</h2>

Question 3: Is the following HTML heading structure recommended?

<h1>My Website</h1>
<h4>About Us</h4>
<h6>Our Team</h6>

Answer: No. Although the browser can display this code, it skips heading levels unnecessarily.

A clearer structure would be:

<h1>My Website</h1>
<h2>About Us</h2>
<h3>Our Team</h3>

This creates a more logical heading hierarchy.

Question 4: Can we change the font size of an <h1> using CSS?

Answer: Yes. We can customize heading styles using CSS.

For example:

<h1 class="title">Welcome</h1>

.title {
    font-size: 28px;
    color: darkgreen;
}

Changing its font size doesn't change its semantic heading level.

Question 5: Write HTML code for the following structure.

Create a webpage with the main heading "Programming Languages." Under it, add two sections called "Frontend Languages" and "Backend Languages." Under "Frontend Languages," include JavaScript and TypeScript. Under "Backend Languages," include C# and Java.

Answer:

<h1>Programming Languages</h1>

<h2>Frontend Languages</h2>

<h3>JavaScript</h3>
<h3>TypeScript</h3>

<h2>Backend Languages</h2>

<h3>C#</h3>
<h3>Java</h3>

The <h1> introduces the main topic. The <h2> elements divide the content into major categories, while the <h3> elements represent individual languages within those categories.

Question 6: Should we use <h1> just to make text appear larger?

Answer: No. Heading elements should represent actual headings in the document structure.

If you want ordinary text to appear larger, use CSS.

For example:

<p class="large-text">
    This is an important message.
</p>

.large-text {
    font-size: 28px;
    font-weight: bold;
}

Question 7: Why are HTML headings important for accessibility?

Answer: Headings help people using assistive technologies, such as screen readers, understand the structure of a webpage.

Many screen readers allow users to navigate between headings, making it easier to find specific sections without reading the entire page.

Question 8: Is it mandatory to use all six heading levels in every webpage?

Answer: No. Use only the heading levels needed to organize your content.

For a simple blog post, <h1>, <h2>, and <h3> may be sufficient.

Question 9: Identify the heading hierarchy in the following code.

<h1>Web Development</h1>

<h2>HTML</h2>
<h3>Headings</h3>
<h3>Paragraphs</h3>

<h2>CSS</h2>
<h3>Selectors</h3>
<h3>Properties</h3>

Answer: "Web Development" is the main heading. "HTML" and "CSS" are major sections, while "Headings," "Paragraphs," "Selectors," and "Properties" are subsections of their respective major sections.

The hierarchy is correctly organized.

Question 10: Create a simple webpage about your favorite hobby using heading tags.

Sample answer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Favorite Hobby</title>
</head>
<body>

    <h1>My Favorite Hobby: Photography</h1>

    <h2>Why I Enjoy Photography</h2>
    <p>
        Photography allows me to capture
        interesting moments and places.
    </p>

    <h2>Types of Photography</h2>

    <h3>Nature Photography</h3>
    <p>
        I enjoy taking photos of forests,
        mountains, and landscapes.
    </p>

    <h3>Street Photography</h3>
    <p>
        I like capturing everyday life
        in cities and towns.
    </p>

    <h2>My Photography Equipment</h2>
    <p>
        I usually take photographs
        using my smartphone.
    </p>

</body>
</html>

Try replacing photography with a hobby you're interested in. Add more sections and subsections while maintaining a logical heading hierarchy.

This exercise will help you practice using heading tags to organize real webpage content.