What are Headings in HTML?

HTML headings are used to give titles and structure to the content of a webpage.

HTML provides six heading levels: <h1> through <h6>.

<h1> represents the most important heading, while <h6> represents the least important heading.

Basic Heading Syntax

A heading is created using an opening heading tag, some text, and a closing heading tag.

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

HTML Heading Levels

HTML has six heading levels. Each level represents a different level of importance in the document structure.

h1 - Main Heading

h2 - Section Heading

h3 - Subsection Heading

h4 - Smaller Section

h5 - Minor Heading

h6 - Least Important Heading

h1 to h6 Explained

Tag	Purpose	Typical Usage
`<h1>`	Main page heading	Page title
`<h2>`	Main section	Major sections
`<h3>`	Subsection	Sections inside h2
`<h4>`	Smaller subsection	Detailed sections
`<h5>`	Minor heading	Less important sections
`<h6>`	Lowest heading level	Rarely needed

Example: Structuring a Webpage

Imagine you are creating a webpage about learning HTML. You can organize the content using headings.

<h1>Learn HTML</h1>

<h2>HTML Basics</h2>
<p>Learn the fundamentals of HTML.</p>

<h2>HTML Elements</h2>
<p>Learn how HTML elements work.</p>

<h3>HTML Tags</h3>
<p>Learn about opening and closing tags.</p>

<h2>HTML Forms</h2>
<p>Learn how to create forms.</p>

Understanding Heading Hierarchy

Headings should create a logical structure for your webpage.

💡

Think of headings like the chapters and sections of a book. The main title comes first, followed by sections and smaller subsections.

<h1>HTML Tutorial</h1>

    <h2>HTML Basics</h2>

        <h3>HTML Elements</h3>

        <h3>HTML Tags</h3>

    <h2>HTML Forms</h2>

        <h3>Input Fields</h3>

        <h3>Buttons</h3>

What is the h1 Tag?

The <h1> tag is normally used for the main heading of a webpage or the main heading of a document section.

<h1>Learn HTML from Scratch</h1>

💡

Use <h1> for the most important heading rather than choosing it simply because it looks large.

Headings, SEO and Accessibility

Headings help people understand the structure of a webpage. They also provide useful structure for assistive technologies and help search engines understand the organization of your content.

🔍 SEO

Use clear and descriptive headings so the purpose and structure of your content are easy to understand.

♿ Accessibility

A logical heading structure helps users of screen readers navigate long pages more easily.

Common Mistakes

⚠️

Using headings only because of their font size.
Skipping heading levels without a clear structural reason.
Using multiple unrelated main headings without understanding the document structure.
Writing vague headings such as "Click Here" or "More".

Best Practices

Use headings to describe the structure of your content.
Keep heading text short and descriptive.
Use a logical hierarchy from larger sections to smaller sections.
Do not choose a heading only because it looks bigger or smaller.
Use CSS when you need to change the visual size or appearance of a heading.

Try It Yourself

Create a simple webpage with one main heading and three sections.

<h1>My Web Development Journey</h1>

<h2>HTML</h2>
<p>I am learning HTML.</p>

<h2>CSS</h2>
<p>I am learning CSS.</p>

<h2>JavaScript</h2>
<p>I am learning JavaScript.</p>

Quick Summary

HTML provides six heading elements: <h1> to <h6>.
<h1> represents the highest level of heading.
<h6> represents the lowest level.
Use headings to organize and describe content.
Keep the heading hierarchy logical and meaningful.
Use CSS to control the visual appearance of headings.

Headings in HTML