HTML Headings

Six hierarchical heading levels from h1 through h6 establish content organization, where h1 carries maximum weight and h6 minimal importance.

Heading tags build structured document outlines that boost search visibility and assist readers with disabilities. Proper heading usage creates scannable, well-organized content that serves both human visitors and search algorithms.

Six Heading Level Options

HTML offers six distinct heading tiers, spanning from h1 down to h6:

Complete Heading Range

<h1>Primary document title</h1>
<h2>Major section header</h2>
<h3>Subsection heading</h3>
<h4>Topic-level title</h4>
<h5>Minor subdivision</h5>
<h6>Smallest subheading</h6>

Result:

Primary document title

Major section header

Subsection heading

Topic-level title

Minor subdivision
Smallest subheading
Default Behavior: Browsers inject automatic spacing around headings, with h1 rendering largest and h6 appearing smallest by default.

Strategic Heading Value

Headings deliver critical benefits across multiple dimensions:

  • Search Optimization: Crawlers analyze heading structure to comprehend page topics and content hierarchy
  • Assistive Technology: Screen reader software leverages headings to enable efficient content navigation
  • Reader Comprehension: Visitors quickly grasp content organization through visual heading patterns
  • Information Architecture: Headings establish clear structural relationships between content sections
Critical Principle: Select headings based on structural meaning, never merely for visual sizing. Apply CSS styling for appearance modifications.

Optimal Heading Patterns

Implement these structural principles for effective heading hierarchies:

Well-Structured Heading Example

<h1>Complete Web Development Guide</h1>

<h2>Introduction to HTML</h2>
<p>HTML is the standard markup language...</p>

<h2>HTML Elements</h2>
<p>HTML elements are building blocks...</p>

<h3>Common HTML Elements</h3>
<p>Some commonly used elements include...</p>

<h3>Element Attributes</h3>
<p>Attributes provide additional information...</p>

<h2>HTML Best Practices</h2>
<p>Follow these best practices...</p>

Result:

HTML Free Codes Tutorial

Introduction to HTML

HTML is the standard markup language...

HTML Elements

HTML elements are building blocks...

Common HTML Elements

Some commonly used elements include...

Element Attributes

Attributes provide additional information...

HTML Best Practices

Follow these best practices...

Heading Best Practices

1. Use Only One h1 Per Page

Each page should have only one h1 tag, which should describe the main topic of the page:

Good Practice

<h1>Complete Guide to HTML Headings</h1>

2. Don't Skip Heading Levels

Don't go from h1 directly to h3. Follow the hierarchical order:

Good Practice

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Avoid This

<h1>Main Title</h1>
<h3>Subsection Title</h3>  <!-- Skipped h2 -->

3. Make Headings Descriptive

Write clear, descriptive headings that tell users what to expect:

Good Practice

<h2>How to Create HTML Tables</h2>
<h3>Table Structure and Elements</h3>

Avoid This

<h2>Step 1</h2>
<h3>More Info</h3>

Styling Headings with CSS

You can customize the appearance of headings using CSS:

CSS Styled Headings Example

<h1 style="color: #2c3e50; text-align: center;">Welcome to HTML Free Codes</h1>
<h2 style="color: #3498db; border-bottom: 2px solid #3498db;">Getting Started</h2>
<h3 style="color: #e74c3c; font-style: italic;">Important Tips</h3>

Result:

Welcome to HTML Free Codes

Getting Started

Important Tips

Try it Yourself

Experiment with different heading styles and create your own designs!

Try Heading Styles

Headings and SEO

Proper use of headings is crucial for Search Engine Optimization (SEO):

  • Keyword Placement: Include relevant keywords in your headings, especially h1
  • Content Structure: Use headings to create a logical content structure
  • User Intent: Write headings that match what users are searching for
  • Featured Snippets: Well-structured headings can help your content appear in featured snippets

SEO-Friendly Heading Example

<h1>Complete HTML Tutorial for Beginners - HTML Free Codes</h1>

<h2>What is HTML? A Beginner's Guide</h2>

<h2>How to Create Your First HTML Page</h2>

<h3>Setting Up Your HTML Document Structure</h3>

<h3>Adding Content with HTML Elements</h3>

Complete Headings Example

Here's a complete example showing proper heading usage:

Complete Headings Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Learn Web Development</title>
</head>
<body>

    <h1>HTML Free Codes - Your Web Development Journey Starts Here</h1>

    <h2>HTML Fundamentals</h2>
    <p>Learn the basics of HTML markup language.</p>

    <h3>HTML Elements and Tags</h3>
    <p>Understanding how HTML elements work.</p>

    <h3>HTML Attributes</h3>
    <p>Adding properties to your HTML elements.</p>

    <h2>Advanced HTML Topics</h2>
    <p>Dive deeper into HTML capabilities.</p>

    <h3>Semantic HTML</h3>
    <p>Writing meaningful and accessible HTML.</p>

</body>
</html>

Result:

HTML Free Codes - Your Web Development Journey Starts Here

HTML Fundamentals

Learn the basics of HTML markup language.

HTML Elements and Tags

Understanding how HTML elements work.

HTML Attributes

Adding properties to your HTML elements.

Advanced HTML Topics

Dive deeper into HTML capabilities.

Semantic HTML

Writing meaningful and accessible HTML.

Try it Yourself

Create your own webpage with proper heading structure!

Try Complete Example

Test Your Knowledge

Previous HTML Attributes
Next HTML Paragraphs