Level:Beginner

HTML Headings

HTML headings define the structure and hierarchy of content on a web page. They help users, search engines, and screen readers understand what each section is about.

What Are HTML Headings?

  • HTML headings are used to define titles and subtitles on a web page.
  • There are six heading levels in HTML: <h1> to <h6>.
  • Headings create a content hierarchy, similar to chapters and sub-chapters in a book.
  • Browsers display headings with different default sizes, but their meaning is semantic, not visual.

Heading Hierarchy

  • <h1> — Main title of the page (most important)
  • <h2> — Major sections of the page
  • <h3> — Subsections under <h2>
  • <h4> to <h6> — Further nested sections
  • Always follow a logical order (don’t jump from <h1> to <h4>).

Heading Example

HTML Headings Examplehtml
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

Preview

localhost:3000
Loading preview...

Why Headings Matter

  • SEO: Search engines use headings to understand page structure and topic importance.
  • Accessibility: Screen readers use headings to let users navigate sections quickly.
  • Readability: Proper headings make content easier to scan and understand.

Best Practices

  • Use only one <h1> per page (recommended).
  • Do not use headings just to make text bigger — use CSS for styling.
  • Follow a logical order (<h1> → <h2> → <h3>).
  • Make headings descriptive and meaningful.