HTML Headings

Learn how to use HTML heading elements from h1 to h6 to organize webpage content, create a logical hierarchy, improve accessibility, and help search engines understand your page.

Introduction

In the previous lesson, you learned about the HTML Body Section and how it contains the main content of a webpage.

A webpage can contain many different types of content, including page titles, section names, subsection names, paragraphs, images, tables, forms, and multimedia.

Without a clear structure, a large amount of content can quickly become difficult to read and understand.

HTML provides heading elements to organize content into meaningful levels. These headings help users scan a page, understand how sections are related, and find the information they need.

Basic Content Structure

<h1>Learn HTML</h1>

<h2>HTML Fundamentals</h2>

<h3>HTML Headings</h3>

<p>
    Headings organize webpage content.
</p>

Create Main Topic

↓

Divide into Major Sections

↓

Add Subsections

↓

Add Supporting Content

↓

Create a Clear Document Structure

Headings Create Structure

HTML headings identify titles and section headings. Their levels communicate how different parts of the document are organized.

What are HTML Headings?

HTML headings are elements used to identify titles and section headings in a document.

HTML provides six heading levels, from h1 to h6.

Six HTML Heading Levels

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Topic Heading</h4>
<h5>Subtopic Heading</h5>
<h6>Minor Heading</h6>

Element	Typical Role	Importance Level
<h1>	Main page or document heading	Highest
<h2>	Major section heading	Second level
<h3>	Subsection heading	Third level
<h4>	Nested topic heading	Fourth level
<h5>	Deeper nested heading	Fifth level
<h6>	Deepest heading level	Sixth level

Importance, Not Just Size

The numbers in h1 through h6 represent heading levels in the document structure. They should not be chosen only because of their default visual size.

Why Do We Need Headings?

Headings divide content into meaningful sections and create relationships between topics and subtopics.

Without Headings

Long content becomes difficult to scan.
Important sections are harder to identify.
Relationships between topics are unclear.
Users may struggle to find information.
Assistive technologies receive less useful structure.

With Headings

Content is divided into clear sections.
Users can scan the page quickly.
Topics and subtopics are easier to understand.
Assistive technologies can use the heading structure.
Search systems can better interpret page organization.

Readability

Breaks large amounts of content into understandable sections.

Scannability

Helps users quickly find the section they need.

Structure

Creates relationships between topics and subtopics.

Accessibility

Supports navigation and understanding for users of assistive technologies.

Search Understanding

Helps search systems understand important topics and page organization.

Maintainability

Makes large documents easier for developers and writers to organize.

Identify Main Topic

↓

Create Main Heading

↓

Divide Content into Sections

↓

Add Subsections

↓

Maintain Logical Hierarchy

Real-World Analogy

Imagine reading a textbook.

A textbook is not written as one continuous block of text. It is divided into a title, chapters, sections, subsections, and smaller topics.

Textbook and HTML Heading Analogy

Textbook Structure        HTML Structure
──────────────────        ──────────────

Book Title                <h1>
│                         │
├── Chapter               ├── <h2>
│   │                     │   │
│   ├── Section           │   ├── <h3>
│   │   │                 │   │   │
│   │   ├── Subsection    │   │   ├── <h4>
│   │   │   │             │   │   │   │
│   │   │   ├── Detail    │   │   │   ├── <h5>
│   │   │   │   │         │   │   │   │   │
│   │   │   │   └──       │   │   │   │   └── <h6>
│   │   │   │ Minor Detail│   │   │   │

Textbook

Book title identifies the main subject.
Chapters divide the book.
Sections divide chapters.
Subsections organize smaller topics.

Webpage

h1 identifies the main topic.
h2 elements divide major sections.
h3 elements create subsections.
Lower levels organize deeper topics.

Think in Levels

A heading level should represent the position of a topic within the document hierarchy.

Heading Elements (h1-h6)

HTML provides six heading elements. Each level represents a different depth in the document hierarchy.

Heading	Common Purpose	Example
<h1>	Main document topic	HTML Tutorial
<h2>	Major section	HTML Fundamentals
<h3>	Subsection	HTML Headings
<h4>	Nested topic	Heading Syntax
<h5>	Deeper topic	Opening Tag
<h6>	Deepest topic	Technical Note

Heading Level Structure

h1  Main Topic
│
├── h2  Major Section
│   │
│   ├── h3  Subsection
│   │   │
│   │   ├── h4  Nested Topic
│   │   │   │
│   │   │   ├── h5  Deeper Topic
│   │   │   │   │
│   │   │   │   └── h6  Deepest Topic

Default Size is Not the Meaning

Browsers usually display h1 larger than h6 by default, but heading elements represent semantic levels. CSS can completely change their visual size.

Syntax

A heading element uses an opening tag, heading content, and a matching closing tag.

Heading Syntax

<h1>Heading Text</h1>
<h2>Heading Text</h2>
<h3>Heading Text</h3>
<h4>Heading Text</h4>
<h5>Heading Text</h5>
<h6>Heading Text</h6>

Heading Element Anatomy

<h1>Welcome to HTML</h1>
──── ──────────────── ─────
 │          │           │
 │          │           └── Closing Tag
 │          │
 │          └── Heading Content
 │
 └── Opening Tag

Part	Example	Purpose
Opening tag	<h1>	Starts the heading element
Content	Welcome to HTML	The heading text
Closing tag	</h1>	Ends the heading element

Example 1: Single Heading

The following example creates a single top-level heading.

Single Heading

<h1>Welcome to HTML</h1>

Part	Value	Meaning
Opening tag	<h1>	Starts the top-level heading
Content	Welcome to HTML	Text presented as the heading
Closing tag	</h1>	Ends the heading

Single Heading Example

Welcome to HTML

A Complete Element

The opening tag, heading text, and closing tag together create the heading element.

Example 2: All Levels

The following example demonstrates all six HTML heading levels.

All Heading Levels

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Topic Heading</h4>
<h5>Subtopic Heading</h5>
<h6>Minor Heading</h6>

HTML Heading Levels

Main Heading

Section Heading

Subsection Heading

Topic Heading

Subtopic Heading

Minor Heading

Browsers apply default styles to headings, so the levels often appear with different sizes and margins even when no CSS has been written.

Do Not Choose by Appearance

A smaller heading level does not mean that you should use it whenever you want smaller text. Choose the level according to the document structure and use CSS for visual appearance.

Example 3: Organizing

Headings become most useful when they organize related content into a clear hierarchy.

Organizing a Webpage

<h1>Programming Languages</h1>

<h2>C Language</h2>
<p>
    C is a procedural programming language.
</p>

<h2>C++ Language</h2>
<p>
    C++ supports object-oriented programming.
</p>

<h2>HTML</h2>
<p>
    HTML is used to structure webpages.
</p>

Content Hierarchy

Programming Languages (h1)
│
├── C Language (h2)
│   └── Description
│
├── C++ Language (h2)
│   └── Description
│
└── HTML (h2)
    └── Description

Organized Content Example

Programming Languages

C Language

C++ Language

HTML

Sibling Sections Use the Same Level

C Language, C++ Language, and HTML are equally important sections under the same main topic, so they use the same h2 level.

Heading Hierarchy

Heading hierarchy describes the logical relationship between headings at different levels.

Document Tree

Programming (h1)
│
├── C (h2)
│
├── C++ (h2)
│
└── HTML (h2)
    │
    ├── Headings (h3)
    │
    ├── Paragraphs (h3)
    │
    └── Tables (h3)

Heading Hierarchy in HTML

<h1>Programming</h1>

<h2>C</h2>

<h2>C++</h2>

<h2>HTML</h2>

<h3>Headings</h3>

<h3>Paragraphs</h3>

<h3>Tables</h3>

Heading	Relationship
Programming	Main topic
C	Major section under Programming
C++	Major section under Programming
HTML	Major section under Programming
Headings	Subsection under HTML
Paragraphs	Subsection under HTML
Tables	Subsection under HTML

Confusing Hierarchy

Heading levels chosen randomly.
Topics at the same level use different headings.
Important relationships are unclear.
Levels are selected only for visual size.

Logical Hierarchy

One clear main topic.
Major sections use the same level.
Subsections appear below their parent section.
Heading levels represent content relationships.

Headings and SEO

Search engines can use headings as one of many signals for understanding the topics and organization of a webpage.

A descriptive heading structure can make the page easier for both users and automated systems to understand.

Descriptive Heading Structure

<h1>Complete HTML Tutorial</h1>

<h2>HTML Fundamentals</h2>

<h3>HTML Elements</h3>

<h3>HTML Attributes</h3>

<h2>Working with Text</h2>

<h3>HTML Headings</h3>

<h3>HTML Paragraphs</h3>

Main Topic

A descriptive main heading communicates the primary subject of the page.

Major Sections

Section headings divide the topic into meaningful areas.

Clear Context

Descriptive headings help communicate what each section contains.

Better User Experience

Users can scan the page and find relevant information faster.

SEO Best Practice

Use descriptive headings that accurately represent the content. Maintain a logical hierarchy and avoid creating headings only to insert keywords.

Headings Are Not an SEO Trick

Correct headings improve document structure, but rankings depend on many factors. Do not repeat keywords unnaturally or use heading elements only for search engines.

Browser Rendering Flow

When a browser processes heading elements, it parses them as part of the HTML document and creates corresponding nodes in the DOM.

Receive HTML

↓

Parse Heading Element

↓

Create DOM Node

↓

Apply Browser and Author Styles

↓

Calculate Layout

↓

Paint Heading

↓

Display the Page

Simplified Heading Processing

<h2>HTML Headings</h2>
          │
          ▼
   Parse HTML Element
          │
          ▼
    Create h2 DOM Node
          │
          ▼
 Determine Applied Styles
          │
          ▼
     Calculate Layout
          │
          ▼
        Paint Text
          │
          ▼
     Display Heading

The heading level becomes part of the document structure. The final visual appearance depends on browser defaults and any CSS applied to the element.

HTML Defines Meaning, CSS Defines Appearance

The heading element communicates structure. CSS can change its font size, weight, spacing, color, and other visual properties.

Real-World Applications

Headings are used throughout websites and web applications to identify pages, sections, and nested topics.

News Websites

Article titles, category headings, and section headings.

E-Commerce

Product names, categories, specifications, and related sections.

Educational Websites

Course titles, lesson titles, topics, and subtopics.

Company Websites

Page titles, services, company information, and contact sections.

Blogs

Post titles, major sections, and subsections.

Documentation

Guide titles, chapters, API sections, and technical topics.

Dashboards

Page headings, report sections, and panel titles.

Help Centers

Topic titles, questions, categories, and support sections.

Advantages

Clear Structure

Organizes topics and subtopics into logical levels.

Better Readability

Breaks long content into understandable sections.

Easy Scanning

Helps users quickly identify relevant sections.

Better Accessibility

Provides useful structure for assistive technologies.

Search Understanding

Helps search systems interpret page topics and organization.

Maintainability

Makes large documents easier to organize and update.

Navigation

Heading structures can help users navigate long documents.

Flexible Styling

CSS can control appearance without changing semantic level.

Organize content into meaningful levels.
Identify the main topic of a page.
Divide content into major sections.
Create subsections under larger topics.
Improve readability.
Make long pages easier to scan.
Support logical document structure.
Help assistive technologies understand content organization.
Support navigation through long documents.
Help search systems interpret page topics.
Separate semantic meaning from visual styling.
Make content easier to maintain.
Create consistent information architecture.
Improve the overall user experience.

Common Beginner Mistakes

Using h1 for Every Heading

Do not make every section a top-level heading. Use heading levels to represent the document hierarchy.

Choosing Headings Only for Size

Do not choose h1 because it looks large or h6 because it looks small. Use CSS for appearance.

Randomly Skipping Levels

Avoid jumping between levels when the hierarchy does not require it.

Using Headings for Paragraph Text

Headings identify sections. Normal explanatory content belongs in paragraphs.

Empty Headings

Do not create heading elements with no meaningful text.

Very Long Headings

Keep headings clear and concise enough to communicate the section topic.

Keyword Stuffing

Do not repeat keywords unnaturally inside headings for SEO.

Styling Paragraphs to Look Like Headings

If text is truly a section heading, use the appropriate heading element rather than a styled paragraph.

Using h1 for Every Section

<!-- ❌ Poor hierarchy -->

<h1>My Website</h1>
<h1>About</h1>
<h1>Services</h1>
<h1>Contact</h1>


<!-- ✅ Logical hierarchy -->

<h1>My Website</h1>

<h2>About</h2>

<h2>Services</h2>

<h2>Contact</h2>

Choosing Headings by Size

<!-- ❌ Chosen only because h6 looks small -->

<h6>Main Page Title</h6>


<!-- ✅ Correct semantic level -->

<h1>Main Page Title</h1>

Unnecessary Level Jump

<!-- ❌ Confusing structure -->

<h1>HTML Tutorial</h1>
<h4>HTML Headings</h4>


<!-- ✅ Clear structure -->

<h1>HTML Tutorial</h1>
<h2>HTML Headings</h2>

Heading vs Paragraph

<!-- ❌ Incorrect use -->

<h3>
    HTML is used to structure webpages and
    contains many different elements.
</h3>


<!-- ✅ Correct use -->

<h3>What is HTML?</h3>

<p>
    HTML is used to structure webpages and
    contains many different elements.
</p>

Poor Heading Structure

Levels selected by visual size.
Every heading uses h1.
Levels jump randomly.
Paragraphs are written as headings.
Headings do not describe their sections.

Good Heading Structure

Levels represent content hierarchy.
One clear primary topic when appropriate.
Sibling sections use consistent levels.
Paragraphs contain regular content.
Headings clearly describe each section.

Best Practices

Use headings to identify titles and sections.
Choose heading levels according to document hierarchy.
Use a clear top-level heading for the main page topic when appropriate.
Use h2 elements for major sections under the main topic.
Use h3 elements for subsections under h2 sections.
Continue deeper levels only when the content structure requires them.
Keep sibling sections at consistent heading levels.
Avoid skipping levels unnecessarily.
Do not choose heading levels based only on default font size.
Use CSS to control visual appearance.
Write descriptive heading text.
Keep headings concise and meaningful.
Do not use empty heading elements.
Do not use headings for normal paragraphs.
Do not use bold paragraphs as substitutes for real headings.
Avoid unnatural keyword repetition.
Ensure the heading accurately describes the following content.
Review the page structure without considering visual styling.
Use headings consistently across similar pages.
Test long pages with keyboard and assistive technology when possible.
Make sure headings remain understandable when read as a list.
Avoid creating heading levels that have no content purpose.
Use semantic HTML before visual styling.
Keep the hierarchy simple enough for users to understand.

Professional Heading Structure

<main>
    <h1>Complete HTML Tutorial</h1>

    <section>
        <h2>HTML Fundamentals</h2>

        <section>
            <h3>HTML Elements</h3>

            <p>
                HTML elements create the structure
                of a document.
            </p>
        </section>

        <section>
            <h3>HTML Attributes</h3>

            <p>
                Attributes provide additional
                information about elements.
            </p>
        </section>
    </section>

    <section>
        <h2>Working with Text</h2>

        <section>
            <h3>HTML Headings</h3>
        </section>

        <section>
            <h3>HTML Paragraphs</h3>
        </section>
    </section>
</main>

Read the Headings Alone

A useful test is to read only the headings from top to bottom. They should provide a meaningful outline of the page.

Frequently Asked Questions

What are HTML headings?

HTML headings are elements used to identify titles and section headings in a document.

How many heading levels does HTML provide?

HTML provides six heading levels, from h1 to h6.

Which heading has the highest level?

The h1 element represents the highest heading level.

Which heading has the lowest level?

The h6 element represents the lowest heading level.

Does h1 always have to be visually largest?

No. CSS can change the visual size of any heading. The h1 element represents semantic importance and hierarchy rather than a guaranteed visual size.

Can I use multiple h1 elements?

HTML allows multiple h1 elements, but many pages benefit from one clear primary h1 that identifies the main topic. The correct choice depends on the document structure.

Should I always use exactly one h1?

A single clear h1 is a simple and useful convention for most pages, especially for beginners. The important requirement is that the heading structure clearly represents the content.

Should I skip heading levels?

Avoid skipping levels when it would make the hierarchy confusing. Choose levels according to the actual relationship between sections.

Can I jump from h1 to h3?

It is technically possible, but if h3 represents a subsection, it should normally have an h2-level parent section.

Can I use h1 because I want large text?

No. Choose the heading level based on structure and use CSS to control size.

Can I use h6 for small text?

Only if the text is genuinely a sixth-level heading. Use CSS for ordinary small text.

Are headings block-level elements?

Heading elements are block-level elements in normal HTML layout behavior.

Do headings need closing tags?

Yes. Heading elements should have matching closing tags such as </h1> and </h2>.

Can headings contain links?

Yes. A heading can contain phrasing content such as a link when that structure is appropriate.

Can headings contain images?

Images can appear within headings in valid situations, but the heading should still communicate a meaningful section title.

Are headings important for accessibility?

Yes. A logical heading structure helps many users, including people who navigate pages using assistive technologies.

Can screen reader users navigate by headings?

Many screen readers provide commands that allow users to move between headings or view a list of headings.

Are headings important for SEO?

Headings can help search engines understand page topics and organization, but they are only one part of search optimization.

Should I put keywords in headings?

Use words that accurately describe the section. Avoid unnatural keyword repetition or keyword stuffing.

Should every section have a heading?

Not every visual container needs a heading, but meaningful content sections often benefit from clear headings.

What is heading hierarchy?

Heading hierarchy is the logical relationship between the main heading, major section headings, and nested subsection headings.

What are sibling headings?

Sibling headings represent sections at the same structural level and usually use the same heading level.

Can CSS change heading sizes?

Yes. CSS can change font size, weight, color, spacing, and other visual properties without changing the semantic heading level.

What should I learn after HTML headings?

The next lesson is HTML Paragraphs, where you will learn how to structure regular blocks of text.

Key Takeaways

HTML provides six heading levels.
The heading elements range from h1 to h6.
h1 represents the highest heading level.
h6 represents the lowest heading level.
Heading levels represent document hierarchy.
Headings should not be selected only by visual size.
CSS should control visual appearance.
Headings divide content into meaningful sections.
A clear hierarchy improves readability.
Headings make long pages easier to scan.
Major sibling sections should use consistent levels.
Subsections should appear below their parent sections.
Avoid unnecessary heading-level jumps.
Headings should accurately describe their content.
Normal explanatory text belongs in paragraphs.
A clear primary h1 is useful for most pages.
Multiple h1 elements are technically allowed by HTML.
The complete heading structure matters more than following a mechanical rule.
Headings can support accessibility.
Assistive technologies can use headings for navigation.
Headings can help search systems understand page organization.
Headings should not be stuffed with keywords.
Browsers apply default heading styles.
CSS can completely change those default styles.
Good heading structure creates a meaningful document outline.

Summary

HTML headings are used to identify titles, sections, and subsections in a webpage.

HTML provides six heading levels, from h1 through h6. These levels represent the hierarchy of the document rather than simply different font sizes.

The h1 element represents the highest heading level, while h2 through h6 represent progressively deeper levels of content.

A logical heading hierarchy helps users understand the relationship between topics and makes long pages easier to scan.

Headings also support accessibility because assistive technologies can use the heading structure to help users understand and navigate a document.

Search systems can use headings as one of many signals for understanding page topics and organization, so headings should be descriptive and accurate rather than filled with repeated keywords.

The most important rule is to choose heading levels according to content structure and use CSS to control visual appearance.

In the next lesson, you will learn about HTML Paragraphs and how to create structured blocks of regular text content.

Next Lesson →