Headings (h1-h6)

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings create a hierarchy of content on your page.

The Six Heading Levels

Each heading level has:

• Decreasing size by default
• Semantic meaning (importance hierarchy)
• Impact on accessibility and SEO

Heading Hierarchy

Headings should follow a logical order, like an outline:

Best practices:

• Use only one <h1> per page (main title)
• Don't skip heading levels (h1 → h3)
• Use headings for structure, not for styling

Why Heading Order Matters

Proper hierarchy helps:

• Screen readers navigate the page
• Search engines understand content structure
• Users scan and find information quickly

Headings vs. Styling

Don't use headings just to make text bigger:

Use headings for meaning, not appearance. Use CSS for styling.

Exercise: Create Document Outline

Create a properly structured document with an h1, two h2s, and h3s under each:

Proper heading structure makes your content accessible and easy to navigate!