HTML Headings

HTML headings are used to define titles and section headings on a web page.
They help users and browsers understand content hierarchy.

Heading Tags

HTML provides six levels of headings:

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
  • <h1> → most important heading
  • <h6> → least important heading

Proper Heading Structure

<h1>HTML Tutorial</h1>

<h2>HTML Basics</h2>
<p>Introduction to basic concepts.</p>

<h3>HTML Elements</h3>
<p>Explanation of elements.</p>

Structure Rules

  • Use one <h1> per page
  • Do not skip heading levels
  • Headings define structure, not size

Headings with Attributes

Headings support global attributes.

<h2 
  id="intro"
  class="section-title"
  title="Introduction section">
  Introduction
</h2>

Attributes Used

  • id → unique identifier
  • class → styling or grouping
  • title → tooltip text

Accessibility & SEO

  • Headings improve screen reader navigation
  • Search engines use headings to understand content
  • Proper headings improve page readability

Important Notes

  • Do not use headings for styling
  • Use CSS for font size and appearance
  • Headings must follow logical order