HTML Heading

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

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

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

1. 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: