How to Create a Heading in HTML

Use HTML heading tags when you want to give your page clear structure and make sections easy to scan. Headings also help search engines and screen readers understand the content hierarchy.

What you’ll build or solve

You’ll learn how to create headings in HTML using the correct heading tags. You’ll also know how to choose the right level so your page stays organized and readable.

When this approach works best

This approach is the right choice when your page needs clear section titles and a logical reading order.

Common real-world scenarios include:

• Page titles and article titles
• Main section headings
• Subsections inside tutorials or guides
• FAQ questions and grouped content blocks

This is a bad idea when you only want bigger text for visual styling. In that case, use CSS font sizing instead of changing the heading level.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the correct heading tag for the section level

Choose the heading tag that matches the importance of the content section.

<h1>Welcome to My Website</h1>

For sub-sections, use lower heading levels in order.

<h1>HTML Tutorial</h1>
<h2>Text Formatting</h2>
<h3>Bold Text</h3>

What to look for:

• <h1> is usually the main page title
• Use <h2> for major sections under the main title
• Use <h3> under an <h2>, and continue in order
• Do not skip levels just because you want larger or smaller text
• HTML supports heading levels from <h1> to <h6>

Examples you can copy

Blog article title

<h1>How to Learn HTML</h1>

Tutorial structure

<h1>JavaScript Basics</h1>
<h2>Variables</h2>
<h2>Functions</h2>
<h3>Arrow Functions</h3>

FAQ section

<h2>Frequently Asked Questions</h2>
<h3>What is HTML?</h3>
<h3>How do headings work?</h3>

Common mistakes and how to fix them

Mistake 1: Skipping heading levels

What the reader might do:

<h1>HTML Guide</h1>
<h3>Paragraphs</h3>

Why it breaks: skipping levels makes the content hierarchy confusing for readers, screen readers, and search engines.

Corrected approach:

<h1>HTML Guide</h1>
<h2>Paragraphs</h2>

Mistake 2: Using headings only for bigger text

What the reader might do:

<h1>Buy now</h1>

Why it breaks: heading tags should describe document structure, not act as styling shortcuts.

Corrected approach:

<p class="large-text">Buy now</p>

<style>
  .large-text {
    font-size: 32px;
  }
</style>

Mistake 3: Using multiple <h1> tags for unrelated page parts

What the reader might do:

<h1>Products</h1>
<h1>Pricing</h1>
<h1>FAQ</h1>

Why it breaks: the page loses a clear top-level structure.

Corrected approach:

<h1>Products</h1>
<h2>Pricing</h2>
<h2>FAQ</h2>

Troubleshooting

If your heading looks too large or too small, keep the correct level and change the size with CSS.

If the page structure feels confusing, check whether heading levels follow a clear order.

If screen readers or SEO tools flag structure issues, look for skipped levels like <h1> to <h3>.

If everything looks like a title, reduce some sections to paragraphs or lower heading levels.

Quick recap

• Use <h1> to <h6> to create headings in HTML
• Match the level to the section importance
• Keep heading levels in logical order
• Do not use headings only for styling
• Use CSS when you only want visual size changes