0
0
HTMLmarkup~5 mins

Headings (h1–h6) in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Headings help organize content on a webpage. They show what each section is about in a clear way.

To give a title to the whole page or main topic.
To label different sections or parts of content.
To create a clear structure that helps readers scan the page.
To improve accessibility by letting screen readers understand the page layout.
To help search engines know what your page is about.
Syntax
HTML
<h1>Heading text</h1>
<h2>Subheading text</h2>
<h3>Smaller subheading</h3>
...
<h6>Smallest heading</h6>

Use <h1> for the main title, then <h2> for subsections, and so on.

Headings go from h1 (biggest) to h6 (smallest).

Examples
This is the main heading of the page.
HTML
<h1>Welcome to My Website</h1>
A subheading for a section about the website or company.
HTML
<h2>About Us</h2>
A smaller heading inside the About Us section.
HTML
<h3>Our Team</h3>
A heading for contact details, smaller than previous headings.
HTML
<h4>Contact Info</h4>
Sample Program

This page uses headings from h1 to h4 to organize content clearly. The main title is h1. Sections like Breakfast and Dinner use h2. Recipes inside use h3. The footer has a smaller heading h4.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Heading Example</title>
</head>
<body>
  <header>
    <h1>My Favorite Recipes</h1>
  </header>
  <main>
    <section>
      <h2>Breakfast</h2>
      <article>
        <h3>Pancakes</h3>
        <p>Fluffy and easy to make.</p>
      </article>
      <article>
        <h3>Omelette</h3>
        <p>Quick and healthy.</p>
      </article>
    </section>
    <section>
      <h2>Dinner</h2>
      <article>
        <h3>Spaghetti</h3>
        <p>Classic Italian pasta.</p>
      </article>
    </section>
  </main>
  <footer>
    <h4>Contact Us</h4>
    <p>Email: info@example.com</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always use headings in order. Don't jump from h1 to h4 without h2 or h3 in between.

Headings improve page readability and help people who use screen readers.

Use CSS to style headings if you want different colors or fonts, but keep the heading tags for structure.

Summary

Headings organize your page content from big (h1) to small (h6).

Use headings to make your page easy to read and understand.

Proper heading order helps accessibility and SEO.