HTML Headings

Headings are used to define the title or topic of a section of content. In HTML, there are six levels of headings, ranging from the most important (<h1>) to the least important (<h6>).

Just like a book has a main title, chapter titles, and sub-section titles, a web page uses headings to organize its content in a clear and logical order.

The Six Heading Tags

<h1>Heading Level 1 – Largest</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 – Smallest</h6>

Each heading level is progressively smaller in size. The browser automatically applies bold and size styling to headings.

Heading Hierarchy

Headings follow a hierarchical structure. This means headings should be used in order, from H1 down to H6. Skipping levels should be avoided as it affects the readability and accessibility of the page.

Why Headings Matter

1. Readability

Headings break up long content into logical sections, making it easier for readers to scan and find the information they need.

2. SEO (Search Engine Optimization)

Search engines like Google read headings to understand the topic and structure of a page. Using headings correctly helps the page rank better in search results. The <h1> tag is especially important as it tells search engines the main topic of the page.

3. Accessibility

Screen readers used by visually impaired users rely on heading structure to navigate the page. A properly structured heading hierarchy makes the page accessible to everyone.

Practical Example: A Blog Post Structure

<h1>Beginner's Guide to Healthy Eating</h1>

<h2>Why Healthy Eating Matters</h2>
<p>Eating well provides energy and prevents disease.</p>

<h2>Food Groups</h2>

  <h3>Fruits and Vegetables</h3>
  <p>Eat at least five portions per day.</p>

  <h3>Proteins</h3>
  <p>Include lean meats, fish, and beans.</p>

    <h4>Plant-based Proteins</h4>
    <p>Lentils and chickpeas are excellent sources.</p>

<h2>Tips for Getting Started</h2>
<p>Start with small changes like drinking more water.</p>

Headings Are Not for Bold Text

A common mistake is using heading tags just to make text bold or large. Headings should only be used to mark actual section titles. For bold text inside a paragraph, the <strong> tag should be used instead.

<!-- Wrong: Using heading just to make text big -->
<h3>This is just bold text, not a heading</h3>

<!-- Correct: Using strong for emphasis within content -->
<p>This is <strong>important information</strong> in a paragraph.</p>

Key Points to Remember

• HTML has six heading levels: H1 to H6
• <h1> is the most important and should be used only once per page as the main title
• Use headings in sequential order — do not skip levels
• Headings help with readability, SEO, and accessibility
• Do not use heading tags just to make text bigger — use CSS or <strong> for that
• Every heading starts on a new line and has space above and below it by default