? HTML Headings

⚡ Quick Overview

HTML provides six heading levels (<h1> to <h6>) to create a clear content hierarchy on a web page. A good outline helps readers scan quickly and helps search engines and assistive technologies understand the structure and importance of each section.

? Key Concepts

<h1>: Page title or main heading (use once per page in most cases).
<h2>: Main sections under the title.
<h3>: Subsections under an h2, and so on.
<h4>–<h6>: Deeper levels for large or highly structured documents.

? Syntax and Structure

Headings work like chapters and sub-chapters in a book. A logical order (h1 → h2 → h3…) creates a clear content tree, improves readability, and makes it easier to scan long pages.

? SEO and Semantics

Use one descriptive <h1> per page and then organize sections with <h2>, <h3>, etc. A clear hierarchy sends better topic signals to search engines and improves scannability for users.

♿ Accessibility

Screen reader users often navigate by headings. Keep the order logical and avoid skipping levels (for example, don’t jump from h1 directly to h4) so keyboard and assistive-tech users can move through sections easily.

? Example: Blog Layout

A practical heading hierarchy for a travel blog could look like this:

? View Blog Heading Hierarchy Code

<h1>My Travel Blog</h1>
<h2>Top Destinations</h2>
<h3>1. Paris</h3>
<h4>Best Time to Visit</h4>
<h4>Things to Do</h4>
<h3>2. Tokyo</h3>
<h4>Food Experiences</h4>
<h4>Cultural Spots</h4>
<h2>Travel Tips</h2>
<h3>Packing List</h3>
<h3>Budgeting Tips</h3>

? Live Output and Explanation

? Rendered Structure

My Travel Blog

Top Destinations

1. Paris

Best Time to Visit

Things to Do

2. Tokyo

Food Experiences

Cultural Spots

Travel Tips

Packing List

Budgeting Tips

Visually, the browser renders each heading with different default sizes and weights, making the hierarchy obvious. Semantically, assistive tools and search engines understand that everything nests under the main <h1> “My Travel Blog”.

? CSS Styling Example

You can style headings with CSS instead of using extra heading levels only for visual size differences.

? View CSS for Headings

<style>
h1 {
  color: navy;
  text-align: center;
  font-size: 36px;
}
h2 {
  color: darkred;
  font-size: 28px;
}
</style>

? Tips and Best Practices

Plan your outline first, then fill in the text under each heading.
Use one <h1> as the main page heading; build sections with <h2> and <h3>.
Keep headings short, descriptive, and natural (include keywords without stuffing).
Do not choose heading levels just for bigger or smaller text — use CSS for styling.
Check your heading outline with DevTools or a “headings map” browser extension.

? Try It Yourself

Create a mini article with one h1, at least two h2, and some h3 subsections.
Take an old long page you wrote and add proper headings to make it easier to scan.
Open your page with a headings-map extension or screen reader and verify that the hierarchy is logical.

? Summary

HTML headings define the structure and hierarchy of your content. Using <h1> through <h6> in a logical order improves readability, SEO, and accessibility. Style headings with CSS rather than misusing levels for visual size, and always think of headings as the outline of your page.