HTML · Quick Reference

Lesson 7 — HTML Headings Cheat Sheet

HTML

In one line: HTML headings go from <h1> (most important) to <h6> (least important). Each level is visually smaller by default, but their real power is semantic — they tell browse...

Key Ideas

1The Six Heading Levels. HTML headings go from <h1> (most important) to <h6> (least important). Each level is visually smaller by default, but their real power is semantic — they t...

2Hierarchy Rules. Headings must follow a logical outline. Two rules are critical:

3Headings & SEO. Search engines use your heading structure to understand what your page is about. Your <h1> should contain your primary keyword and clearly describe the page. <...

4Headings & Accessibility. Screen reader users frequently navigate a page by jumping between headings — this is how they scan content, just as sighted users scan visually. A broken heading struc...

5Best Practices Checklist. Follow these rules to write heading markup that scores well on accessibility audits and SEO crawlers:

Code Examples

<h1>Page Title — The Big One</h1>
<h2>Major Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Sub-sub-section</h4>
<h5>Rarely used heading</h5>
<h6>Smallest heading</h6>

<!-- ✅ CORRECT: logical nesting -->
<h1>JavaScript Guide</h1>
  <h2>Getting Started</h2>
    <h3>Installation</h3>
    <h3>First Program</h3>
  <h2>Variables</h2>

<!-- ❌ WRONG: ski...

<!-- Screen readers build this outline from headings: -->
<!--
  1. Introduction to Python        (h1)
     1.1 What is Python?           (h2)
     1.2 Why Learn Python?         (h2)
         1.2.1 Job Market          (h3)
         1.2.2 Vers...