Skip to main content

Practical Exercise 2: How to Use HTML Heading Tags (h1 to h6)

In this practical HTML exercise, we will learn how to use heading tags. From the word heading, the tags start with the letter h and range from h1 to h6. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

<h1> defines the most important heading. <h6> defines the least important heading.

tip

It is best practice for each page of your website to have at least and only one <h1> element.

Headings Are Important​

Search engines use headings to index the structure and content of your web pages.

caution

Use HTML headings only for titles. Do not use headings to make text BIGGER or make it bold.

Activity​

Create an HTML document that uses all heading tags from <h1> to <h6>.

Interactive Solution​

DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code​

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Headings</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>

🧪 Exercise Variants​

Variant 1: Realistic Article Hierarchy​

In a real project, headings are used to structure content, not just to display all levels. Here's what a well-structured article looks like:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Learning HTML from Scratch</title>
  </head>
  <body>
    <h1>Learning HTML from Scratch</h1>
    <p>A complete guide for beginners.</p>

    <h2>What is HTML?</h2>
    <p>HTML is the markup language that structures the web.</p>

    <h3>History of HTML</h3>
    <p>Created by Tim Berners-Lee in 1989.</p>

    <h3>HTML Versions</h3>
    <p>From HTML 1.0 to HTML5.</p>

    <h2>First Steps with HTML</h2>
    <p>Set up your editor and create your first file.</p>

    <h3>Basic Structure</h3>
    <p>DOCTYPE, html, head, and body.</p>

    <h3>Essential Tags</h3>
    <p>Paragraphs, links, images, and lists.</p>
  </body>
</html>

Notice how the hierarchy is logical: a single <h1>, main sections with <h2>, and subsections with <h3>. This structure is what Google and other search engines reward.

Variant 2: Example of Bad Heading Usage (don't do this!)​

HTML
<!-- ❌ BAD USAGE: do not copy this pattern -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Bad Practice</title>
  </head>
  <body>
    <h1>Main Title</h1>
    <h1>Another Main Title</h1>
    <h1>A Third Main Title</h1>
    <!-- Multiple h1s confuse search engines and screen readers -->

    <h2>Section</h2>
    <h4>Subsection skipping h3</h4>
    <!-- Skipping levels breaks semantic hierarchy -->

    <h2 style="font-size: 60px;">Giant text with h2</h2>
    <!-- Using headings for large text is incorrect: use CSS -->
  </body>
</html>

🎯 Mini-Challenge: Put It to the Test​

Create the structure of a blog page with the following hierarchy:

  • Blog title: "Cooking Recipes" (<h1>)
  • Two sections (<h2>): "Sweet Recipes" and "Savory Recipes"
  • Each section should have two subsections (<h3>): for example "Chocolate Cake" and "Homemade Flan" within Sweet Recipes
  • Add a short paragraph below each <h3>

The goal is to practice correct hierarchy without using more than one <h1> and without skipping levels (don't jump from h2 to h4).

Common Mistakes with HTML Headings​

MistakeWhy It's a Problem
Multiple <h1> on a pageConfuses search engines and screen readers; each page should have a single main title
Skipping levels (h2 → h4)Breaks semantic hierarchy and makes keyboard navigation difficult
Using headings to enlarge textUse CSS for that (font-size, font-weight); headings are for structure, not decoration
Not using headings at allSearch engines can't understand your content structure and penalize the lack of hierarchy
Having only an <h1> and nothing elseA page without subtitles is hard to scan for both humans and bots

Frequently Asked Questions​

Can I have more than one <h1> on a page?​

Technically HTML5 allows it if you use <section> or <article>, but it's not recommended. The best practice for SEO and accessibility is to have a single <h1> per page describing the main topic. Browsers and screen readers use <h1> as the primary reference point.

Do headings affect SEO?​

Yes, significantly. Google uses headings (<h1> through <h6>) to understand the hierarchical structure of your content. A clear and descriptive <h1> with relevant keywords is one of the most important on-page factors. <h2> and <h3> help distribute semantic relevance across subtopics. A good heading hierarchy can make the difference between position 10 and position 3.

🚀 Practice with DivZone AI

Have you mastered headings? Create a web page with DivZone AI and see how the generator automatically organizes titles with h1, h2, and h3. You'll see everything you learned in action!

info

📘 Learn more about this topic here 👉 Fundamental elements in HTML.