HTML Headings

Learn how to use HTML headings from <h1> to <h6> to organize and structure web page content.

What are HTML Headings?

HTML headings are used to define titles and section headings on a web page.

HTML provides six heading levels, starting from <h1> and going up to <h6>.

Heading Levels: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Six Levels of HTML Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

1. <h1> - Main Heading

The <h1> element is normally used for the main heading of a page or the main topic of a document.

<h1>Introduction to HTML</h1>

Introduction to HTML

2. <h2> - Section Heading

The <h2> element is commonly used for major sections under the main heading.

<h2>HTML Elements</h2>

HTML Elements

3. <h3> - Subsection Heading

The <h3> element can be used for subsections within an <h2> section.

<h3>HTML Attributes</h3>

HTML Attributes

4. <h4> - Smaller Section Heading

The <h4> element is used for a deeper subsection level when required.

<h4>Global Attributes</h4>

Global Attributes

5. <h5> - Smaller Heading

The <h5> element represents a lower-level heading in the document hierarchy.

<h5>Additional Information</h5>

Additional Information

6. <h6> - Lowest Heading Level

The <h6> element is the lowest of the six standard HTML heading levels.

<h6>Smallest Heading Level</h6>

Smallest Heading Level

Heading Hierarchy

Headings should generally be organized in a logical hierarchy so that users and assistive technologies can understand the structure of the document.

<h1>Web Development</h1>

    <h2>HTML</h2>

        <h3>HTML Elements</h3>

        <h3>HTML Attributes</h3>

    <h2>CSS</h2>

        <h3>Selectors</h3>

        <h3>Properties</h3>

Web Development

HTML

HTML Elements

HTML Attributes

CSS

Selectors

Properties

Headings and Page Structure

Headings help organize content into meaningful sections. A well-structured heading hierarchy makes a page easier to understand and navigate.

Better Readability

Headings break large amounts of content into understandable sections.

Better Organization

Headings create a logical structure for different topics and subtopics.

Accessibility

Assistive technologies can use headings to help users navigate page sections.

Content Structure

Headings clearly separate major sections and subsections.

Common Mistake

Headings should not be selected only because of their visual size.

The heading level should represent the logical position of the content in the document structure.

Example: Do not use <h4> simply because you want smaller text. Use the appropriate CSS when visual size needs to be changed.

Heading Structure vs Visual Styling

HTML headings define document structure, while CSS can control their visual appearance.

<h1 class="page-title">
    CIIT INSTITUTE ❤️
</h1>

<style>

    .page-title {
        font-size: 32px;
        color: #4c1d95;
    }

</style>

CIIT INSTITUTE ❤️

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>Heading Example</title>

</head>

<body>

    <h1>Web Development</h1>

    <h2>HTML</h2>

    <h3>HTML Elements</h3>

    <p>
        HTML elements are the building blocks of web pages.
    </p>

    <h3>HTML Attributes</h3>

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

    <h2>CSS</h2>

    <h3>CSS Basics</h3>

    <p>
        CSS controls the visual appearance of HTML content.
    </p>

</body>

</html>

Heading Quick Reference

Element	Typical Use	Example
`<h1>`	Main page or document heading	`<h1>HTML Course</h1>`
`<h2>`	Major section heading	`<h2>HTML Basics</h2>`
`<h3>`	Subsection heading	`<h3>Elements</h3>`
`<h4>`	Lower-level subsection	`<h4>Details</h4>`
`<h5>`	Lower-level heading	`<h5>Additional Details</h5>`
`<h6>`	Lowest heading level	`<h6>Notes</h6>`

Practice Exercise

Create an <h1> containing your website name.
Create an <h2> for a major section.
Add two <h3> subsections.
Add paragraphs under each subsection.
Organize the headings in a logical hierarchy.
Use CSS only when you need to change the visual appearance.

Summary

HTML provides six heading levels from <h1> to <h6>. Headings help organize content into a logical hierarchy. Use heading levels according to the structure of the content, and use CSS to control visual styling.

← Previous: HTML Attributes Next: Paragraphs →