Introduction to HTML Headings

Headings are used to structure content on a webpage.

They create a hierarchy, making your content readable, organized, and SEO-friendly.

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

Headings Hierarchy

TagDescriptionUse Case<h1>Main heading / Page titleOnly one per page; most important<h2>Section headingSubsections under <h1><h3>Sub-section headingSubsections under <h2><h4>Sub-sub-section headingSubsections under <h3><h5>Minor headingSubsections under <h4><h6>Least important headingSubsections under <h5>

Basic Syntax

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

Headings automatically have larger text size than normal paragraphs
Browsers apply default bold styling

Best Practices

Use only one <h1> per page for SEO and accessibility.
Maintain proper hierarchy: don’t skip heading levels unnecessarily.

✅ <h1> → <h2> → <h3>
❌ <h1> → <h4> → <h6>

Use headings to structure content, not just for styling.

Styling Headings

Headings can be styled using CSS for font, color, and size:

<style>
h1 {
    color: #2c3e50;
    font-family: Arial, sans-serif;
    font-size: 36px;
}

h2 {
    color: #e74c3c;
    font-family: Verdana, sans-serif;
}
</style>

Accessibility and SEO

Screen readers use headings to navigate pages.
Search engines give more weight to <h1> and <h2> for ranking.
Proper use of headings improves both usability and SEO.

Practice Code Example

Create a webpage demonstrating all heading levels with CSS styling:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Headings Practice</title>
    <style>
        h1 { color: #1abc9c; font-family: Arial, sans-serif; }
        h2 { color: #3498db; font-family: Verdana, sans-serif; }
        h3 { color: #9b59b6; }
        h4 { color: #e67e22; }
        h5 { color: #e74c3c; }
        h6 { color: #7f8c8d; }
    </style>
</head>
<body>

    <h1>Main Heading (H1)</h1>
    <h2>Section Heading (H2)</h2>
    <h3>Sub-section Heading (H3)</h3>
    <h4>Sub-sub-section Heading (H4)</h4>
    <h5>Minor Heading (H5)</h5>
    <h6>Least Important Heading (H6)</h6>

    <p>This is a normal paragraph under headings.</p>

</body>
</html>

HTML Heading