HTML Headings Explained for Beginners - From H1 to H6

Previous Next

After you master the page structure, elements, attributes, and comments, it is time to fill the page with real content. The first thing on any web page is the heading. HTML gives you six different heading levels - each one has a specific role.

The Six Heading Levels

HTML headings range from <h1> (the largest and most important) to <h6> (the smallest and least important). The letter h is short for heading.

<h1>Level One Heading</h1>
<h2>Level Two Heading</h2>
<h3>Level Three Heading</h3>
<h4>Level Four Heading</h4>
<h5>Level Five Heading</h5>
<h6>Level Six Heading</h6>

If you open this code in the browser, you will notice that:

<h1> is the largest and boldest heading
As the number goes up, the heading gets smaller and less important
The browser automatically adds spacing before and after each heading

Reference Table - All Heading Levels

Tag	Typical Use	Default Appearance
`<h1>`	Main page title - only once per page	Largest and darkest
`<h2>`	Chapter and major section titles	Very large
`<h3>`	Subsection headings inside h2	Large
`<h4>`	Detail headings inside h3	Medium
`<h5>`	Rarely used - very secondary headings	Small
`<h6>`	Very rare - the smallest heading level	Smallest

Why Are Headings So Important?

Headings are not just big, bold text. They have three key roles:

1. SEO - Help Google Understand Your Page

Search engines like Google read your headings to understand your page topic. <h1> is the most important SEO element on your entire page. Google uses it to know exactly what the page is about.

<!-- A page about learning HTML - h1 tells Google the topic -->
<h1>Learn HTML from Scratch</h1>
<h2>What Is HTML and How Does It Work?</h2>
<h2>The Basic Structure of an HTML Page</h2>

2. User Experience - Fast Navigation on the Page

Most visitors do not read the page word by word. They scan it quickly by looking at the headings. Clear headings help your visitor find what they need in seconds.

3. Accessibility - Help People with Visual Impairments

Screen readers rely on headings to navigate between sections of a page. Correct heading structure = a page everyone can use.

Golden Rules for Using Headings

Rule 1: Use `<h1>` only once per page

<!-- Yes - correct -->
<h1>Learn HTML from Scratch</h1>
<h2>What Is HTML?</h2>
<h2>How Does It Work?</h2>

<!-- No - wrong - repeated h1 -->
<h1>Learn HTML from Scratch</h1>
<h1>What Is HTML?</h1>

Rule 2: Follow logical order - do not jump from h1 to h4

<!-- Yes - logical order -->
<h1>Benefits of Apples</h1>
<h2>Health Benefits</h2>
<h3>Boosting Immunity</h3>
<h3>Heart Health</h3>
<h2>Types of Apples</h2>

<!-- No - wrong - jump from h1 to h4 -->
<h1>Benefits of Apples</h1>
<h4>Health Benefits</h4>

Rule 3: Do not use headings only to make text bigger

If you want big text without it being a heading, use CSS. Headings have semantic meaning - they are not just visual styling.

<!-- No - wrong - using h3 only for size -->
<h3>This text should be big but it is not a heading</h3>

<!-- Yes - correct - use CSS for size -->
<p style="font-size: 24px;">This is big text and not a heading</p>

Practical Example - Article Structure About HTML

This is how correct heading usage looks in a real article:

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

    <!-- One main title for the entire page -->
    <h1>Learn HTML from Scratch</h1>

    <!-- Main sections -->
    <h2>What Is HTML?</h2>
    <p>HTML is a markup language used to build web pages...</p>

    <h2>HTML Basics</h2>

        <!-- Subsections inside the main section -->
        <h3>Basic Tags</h3>
        <p>Tags like p, h1, and img...</p>

        <h3>Attributes</h3>
        <p>Attributes add information to elements...</p>

    <h2>Your Next Steps</h2>
    <p>After HTML, learn CSS and then JavaScript...</p>

</body>
</html>

Frequently Asked Questions - FAQ

Do I need to use all six levels?

No. Most pages only use h1, h2, and h3. Levels h4, h5, and h6 are very rare and are used only in long, complex content.

Can I put HTML inside a heading?

Yes, you can put some formatting elements inside a heading, such as <em> or <strong>. But avoid elements that break text flow like images or buttons.

What is the difference between <h1> and <title>?

<title> sets the page name that appears in the browser tab and Google results - it does not appear on the page. <h1> appears on the page itself as a visible main heading. They are usually similar, but they are not the same thing.

Does Google prefer certain words in h1?

Yes. Put the most important keywords your audience searches for in <h1>. This improves your visibility in search results.

Great! You have now mastered HTML headings professionally. In the next lesson we will learn text paragraphs - the <p> tag and how to control the text inside your page.