Working with Headings: H1 Through H6 Explained

When you read an article online, you probably notice titles, subtitles, and section labels. Those are usually built with HTML headings, from H1 to H6.

In this guide, you’ll learn what those headings are, how to use each one, and how to structure a simple web page with them. You don’t need any coding experience—just a bit of curiosity and a text editor (like Notepad, VS Code, or any code editor you like).

By the end, you’ll be able to:

Choose the right heading level (H1–H6)
Build a clear outline for a page
Write simple HTML that looks organized and professional

What Are HTML Headings?

HTML is the language used to build web pages. Headings in HTML are special tags that mark titles and section headers. They range from <h1> (the most important) to <h6> (the least important).

Think of headings like the outline of a document:

H1 – Book title
H2 – Chapter titles
H3 – Subsections inside a chapter
H4–H6 – Smaller sub-points, if you need them

They don’t just make your text bigger or bolder. They also tell browsers, search engines, and screen readers how your content is organized.

Why Headings Matter

Using headings correctly helps in three big ways:

Readability: Headings break up long pages so people can scan and find what they need quickly.
Accessibility: Screen readers (used by people who are blind or have low vision) can jump between headings to navigate a page.
SEO (Search Engine Optimization): Search engines use headings to understand what each part of your page is about.

So using H1–H6 properly isn’t just about looks—it’s about making your content understandable and usable.

The Basic Heading Tags (H1–H6)

Here are the six heading levels, from biggest and most important to smallest and least important:

<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>

If you put this in a simple HTML page and open it in a browser, you’ll see the text getting smaller from H1 to H6.

Try it yourself:

Open a text editor.
Paste the code above into a new file.
Save the file as headings-example.html.
Double-click the file to open it in your browser.

You’ve just created a tiny web page using headings.

Example 1: A Simple Page with H1 and H2

Let’s start with a very basic HTML page that uses H1 and H2 headings.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My First Headings Page</title>
  </head>
  <body>
    <!-- Main page title -->
    <h1>My Favorite Hobbies</h1>

    <!-- Section titles -->
    <h2>Reading</h2>
    <p>I enjoy reading mystery novels and sci-fi books.</p>

    <h2>Cooking</h2>
    <p>I like trying new recipes and experimenting with flavors.</p>
  </body>
</html>

What’s happening here?

<h1>My Favorite Hobbies</h1> is the main title of the page.
Each <h2> starts a new section under that main topic.
<p> tags are paragraphs of normal text.

Expected result: When you open this file in a browser, you’ll see a big main title at the top and two smaller section headings (“Reading” and “Cooking”) below it.

Try it yourself idea: Add another hobby using another <h2> and <p> pair, like Gaming or Gardening.

Example 2: Adding H3 for Subsections

Now let’s break one section into smaller parts using H3. This creates a clearer structure under an H2.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Favorite Hobbies</title>
  </head>
  <body>
    <h1>My Favorite Hobbies</h1>

    <h2>Reading</h2>
    <p>I enjoy reading mystery novels and sci-fi books.</p>

    <!-- Subsections under Reading -->
    <h3>Mystery Novels</h3>
    <p>I like stories with twists and clever detectives.</p>

    <h3>Science Fiction</h3>
    <p>Space adventures and futuristic technology fascinate me.</p>

    <h2>Cooking</h2>
    <p>I like trying new recipes and experimenting with flavors.</p>
  </body>
</html>

What’s happening now?

H1 is still the overall page title.
H2s are still main sections (Reading, Cooking).
H3s are subsections inside “Reading” (Mystery Novels and Science Fiction).

You’re starting to build a real outline:

H1: My Favorite Hobbies
- H2: Reading
  - H3: Mystery Novels
  - H3: Science Fiction
- H2: Cooking

Try it yourself idea: Under “Cooking,” add your own H3 subsections like “Baking” or “Quick Meals,” with a short paragraph under each.

Example 3: Using H4–H6 (When You Really Need Them)

For most simple pages, H1 to H3 are enough. But sometimes you have deep structures, like detailed guides or technical documents. That’s when you might use H4–H6.

Here’s an example that goes one level deeper with H4:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Learning to Cook</title>
  </head>
  <body>
    <h1>Learning to Cook at Home</h1>

    <h2>Getting Started</h2>

    <h3>Basic Tools</h3>
    <p>You'll need a few essential tools to start cooking comfortably.</p>

    <!-- Smaller detail under Basic Tools -->
    <h4>Knives</h4>
    <p>A sharp chef's knife makes chopping easier and safer.</p>

    <h4>Cutting Board</h4>
    <p>Use a sturdy cutting board to protect your counters.</p>
  </body>
</html>

Here, the outline looks like this:

H1: Learning to Cook at Home
- H2: Getting Started
  - H3: Basic Tools
    - H4: Knives
    - H4: Cutting Board

In many real-world websites, you rarely need to go all the way down to H6. It’s better to keep your structure simple unless your content is very complex.

Try it yourself idea: Expand this cooking page:

Add another H3 under “Getting Started,” like “Basic Ingredients.”
Add some H4 headings under that for things like “Spices” or “Oils.”

Best Practices for Using H1–H6

Here are some simple rules to keep your headings clean and helpful:

Use one H1 per page
Treat H1 as the main page title. You normally only need one.
Go in order (mostly)
Don’t jump from H1 straight to H4. Move step-by-step: H1 → H2 → H3, and so on.
Use headings for structure, not just style
Don’t pick H3 just because you like how it looks. Pick the heading level based on how important the section is in your outline.
Keep headings clear and short
A heading should describe what comes next, in just a few words if possible.
Don’t use headings for regular text
If it’s not a section title, use a <p> (paragraph) instead of <h2> or <h3>.

Quick “Try It Yourself” Project: A Mini Article

Let’s put it all together and create a small article page with a good heading structure.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Beginner's Guide to Exercise</title>
  </head>
  <body>
    <!-- Main article title -->
    <h1>Beginner's Guide to Exercise</h1>

    <!-- First main section -->
    <h2>Why Exercise Matters</h2>
    <p>Regular exercise can boost your energy, mood, and overall health.</p>

    <!-- Subsections under Why Exercise Matters -->
    <h3>Physical Benefits</h3>
    <p>Exercise strengthens your muscles and improves your heart health.</p>

    <h3>Mental Benefits</h3>
    <p>Moving your body can reduce stress and help you sleep better.</p>

    <!-- Second main section -->
    <h2>Getting Started Safely</h2>
    <p>Start slowly and choose activities that match your fitness level.</p>

    <h3>Talk to a Professional</h3>
    <p>Consider asking a doctor or trainer for advice before starting.</p>

    <h3>Choose Activities You Enjoy</h3>
    <p>Pick exercises you like, such as walking, dancing, or cycling.</p>
  </body>
</html>

What to do now:

Save this as exercise-guide.html.
Open it in your browser.
Read the page and notice how the headings guide your eyes.

Experiment ideas:

Change the H2 headings into H3s and see how the size and structure feel.
Add a new H2 section called “Staying Motivated” with a couple of H3 subsections.

Recap and What’s Next

You’ve learned how HTML headings work from H1 to H6, and you’ve built real examples using them. You now know how to:

Use H1 as a main page title
Use H2–H3 for sections and subsections
Use H4–H6 only when your content truly needs deeper levels
Keep your headings clear, ordered, and meaningful

As a next step, you can:

Add headings to any simple page you create
Experiment with combining headings, paragraphs, and basic styling with CSS
Look at your favorite websites and notice how they structure their content

Every time you practice, you’ll get more comfortable. Keep experimenting, keep tweaking your headings, and celebrate that you now understand one of the most important building blocks of the web.

Mudzinga