• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Headings

← Previous Next →

Headings are essential for structuring content on a webpage. They organize information, make it easier to read, and help search engines understand the hierarchy of your content. In this chapter, you’ll learn about HTML headings, the six heading levels, how to use them effectively, their impact on accessibility and SEO, and best practices for creating well-structured content.

What Are HTML Headings?

Headings in HTML are tags that define titles or subtitles in a webpage. They range from <h1> to <h6>, where <h1> is the most important and largest, and <h6> is the least important and smallest.

Headings help users quickly scan content and understand its hierarchy. They are commonly used for:

  • Page titles

  • Section titles

  • Subsection headings

  • Article headings

HTML Heading Tags

HTML provides six levels of headings:

  1. <h1> – Main heading, usually used once per page

  2. <h2> – Section heading

  3. <h3> – Subsection heading

  4. <h4> – Sub-subsection heading

  5. <h5> – Smaller subsection heading

  6. <h6> – Smallest heading

Example:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Minor Heading</h4>
<h5>Smaller Heading</h5>
<h6>Smallest Heading</h6>

Each heading appears progressively smaller by default, but the importance is more than just visual—search engines also consider heading levels to understand content structure.

Using Headings Correctly

Some rules to follow when using headings:

  1. Use <h1> only once per page – It represents the main topic.

  2. Use headings in order – Don’t skip from <h1> to <h4> without using <h2> and <h3> in between.

  3. Headings should be descriptive – They should give a clear idea of the section content.

  4. Avoid styling headings only visually – Don’t use CSS to mimic heading sizes without using proper <h> tags.

Correct example:

<h1>My Travel Blog</h1>
<h2>Trip to India</h2>
<h3>Mumbai</h3>
<h3>Jaipur</h3>
<h2>Food Adventures</h2>
<h3>Delhi Cuisine</h3>
<h3>Hyderabad Biryani</h3>

Incorrect example:

<h1>Main Title</h1>
<h4>Subsection</h4> <!-- Skipping h2 and h3 -->
<h2>Next Section</h2>

Following a proper heading structure improves readability, accessibility, and SEO.

Headings and Accessibility

Headings are important for accessibility because screen readers use them to navigate a page. Proper heading hierarchy allows visually impaired users to understand the page structure quickly.

  • <h1> for the main topic

  • <h2> for major sections

  • <h3> for subsections

  • <h4> to <h6> for smaller sections

Using headings correctly ensures that your webpage is accessible to all users.

Styling Headings

Headings can be styled using CSS. You can change their:

  • Font size

  • Color

  • Font family

  • Background

  • Text alignment

Example:

<h2 style="color: green; font-family: Arial; text-align: center;">
    Section Title
</h2>

Even after styling, the heading tag determines its importance in the page structure.

Headings vs Paragraphs

Headings and paragraphs serve different purposes:

  • Headings: Define structure and hierarchy.

  • Paragraphs: Contain content or text.

Example:

<h2>About Me</h2>
<p>My name is Aarohi, and I enjoy exploring Indian cities and learning new recipes.</p>

Headings introduce sections, and paragraphs explain them in detail.

Example: Webpage With Headings

<!DOCTYPE html>
<html>
<head>
    <title>HTML Headings Example</title>
</head>
<body>
    <h1>Riya's Travel Blog</h1>

    <h2>Trip to India</h2>
    <h3>Mumbai</h3>
    <p>Visited Marine Drive, Gateway of India, and Colaba Causeway. Loved the street food.</p>
    <h3>Jaipur</h3>
    <p>Explored City Palace, Hawa Mahal, and Amber Fort. Enjoyed traditional Rajasthani cuisine.</p>

    <h2>Food Adventures</h2>
    <h3>Delhi Cuisine</h3>
    <p>Tried parathas at Chandni Chowk and famous street snacks at Connaught Place.</p>
    <h3>Hyderabad Biryani</h3>
    <p>Visited Charminar area and tasted authentic Hyderabadi biryani and kebabs.</p>
</body>
</html>

This example uses Indian names like Riya and cities like Mumbai, Jaipur, Delhi, Hyderabad while maintaining proper heading hierarchy.

Real-Life Uses of Headings

Headings are used widely in:

  • Blogs and articles

  • News websites

  • E-commerce product categories

  • Tutorials and documentation

  • Dashboards and admin panels

  • Reports and presentations

Proper headings improve readability, navigation, and SEO ranking.

Practice Task

Create a small webpage with:

  1. One <h1> main title

  2. Two <h2> sections

  3. Each <h2> section has two <h3> subsections

  4. Add a paragraph below each <h3>

  5. Use Indian names and cities in headings and paragraphs

This will help you practice heading hierarchy and structure.

Summary of HTML Headings

HTML headings define the structure of a webpage. You learned about six levels of headings (<h1> to <h6>), proper hierarchy, accessibility considerations, styling options, and best practices. Using Indian names and cities in examples ensures your content feels more relatable while still teaching proper heading usage. Correct headings improve readability, navigation, and SEO for all webpages.

Practice Questions

Q1. Create an HTML page that includes all six heading tags.

Q2. Write a web page with one <h1> and two <h2> subheadings.

Q3. Add <h3> and <h4> headings under a service section.

Q4. Create a heading that says "My Blog" using <h1>.

Q5. Use <h5> to display a small subheading.

Q6. Nest a paragraph under an <h2> heading labeled "About Me".

Q7. Show a company name using <h1> and team roles using <h3>.

Q8. Make a simple portfolio layout using only heading tags.

Q9. Create a recipe structure using <h2> for steps and <h3> for details.

Q10. Use <h6> in a webpage footer for copyright.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top