← Back to HTML Course | Chapter 1: Introduction & Basics | Lesson 6 of 11

HTML Headings

Imagine opening a newspaper where every single word is printed in the exact same size, weight, and font. You would have to read every sentence just to find out what the articles are about. It would be incredibly frustrating. HTML headings are your digital headlines. They structure your page from the most important topic down to the smallest detail. They act like visual signposts that let your visitors scan your page in seconds. More importantly, headings create a structured map that helps search engines like Google understand the main theme of your website.

In this page:

  1. The Heading Hierarchy (h1 to h6)
  2. Why Headings Matter for SEO
  3. Accessibility and Screen Readers
  4. Headings are Structural, Not Visual
  5. Managing Default Spacing and Margins
Syntax
markup 
<h1>Heading text</h1>
<h2>Heading text</h2>
<h3>Heading text</h3>

The Heading Hierarchy (h1 to h6)

HTML offers six levels of headings, starting with h1 as the largest and most important, moving down to h6 as the smallest. This hierarchy establishes a clear order of importance for your content, similar to chapters and sub-chapters in a book.

Note: Use only one h1 per page to represent the main topic of your document.
Warning: Do not skip heading levels like jumping from h1 directly to h3 as it breaks the structural flow.

Example: The Heading Hierarchy (h1 to h6)

markup 
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>

Why Headings Matter for SEO

Search engines use headings to read, categorize, and index your website. If you structure your headings properly with relevant keywords, search bots can easily determine what services or products you offer.

Note: Incorporate your main target keywords naturally inside your h1 and h2 tags.
Warning: Avoid stuffing headings with too many keywords as search engines will flag this as spam.

Example: Why Headings Matter for SEO

markup 
<h1>Affordable Web Hosting Plans</h1>
<h2>Shared Hosting Pricing</h2>

Accessibility and Screen Readers

Visually impaired users often rely on assistive technologies like screen readers to navigate websites. These devices allow users to skip from heading to heading to skim the content, making proper heading structures essential.

Note: Make your headings descriptive enough to make sense even when read out of context.
Warning: Never use bold paragraph tags instead of actual heading tags because screen readers will ignore them during fast navigation.

Example: Accessibility and Screen Readers

markup 
<h1>Article Title</h1>
<h2>Introduction</h2>
<h2>Conclusion</h2>

Headings are Structural, Not Visual

A common mistake is selecting a heading tag based purely on how large it looks in the browser. Headings must represent structural relationships. If you want larger or smaller text, you should always control that using CSS.

Note: Use CSS font-size properties to style your text instead of misusing heading tags.
Warning: Do not wrap non-heading text in heading tags just to make it bold or prominent.

Example: Headings are Structural, Not Visual

markup 
<h2>Correct: Structural Heading</h2>
<p style="font-size: 24px;">Large text without using a heading tag</p>

Managing Default Spacing and Margins

Browsers automatically add pre-set margins above and below headings to separate them from adjacent paragraphs. Understanding these default styles prevents layout surprises when arranging elements.

Note: Use inline or external CSS to zero out default margins when you need elements to sit closer together.
Warning: Relying purely on browser default spacing can make your layouts look inconsistent on different mobile devices.

Example: Managing Default Spacing and Margins

markup 
<h2 style="margin: 0;">Heading with margins removed</h2>
<p>Paragraph sitting closer to the heading above.</p>
Live Example
Related Topics

HTML Attributes · HTML Paragraphs · HTML Elements · HTML Styles

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using h3 or h4 tags purely because you like their default size, ignoring the hierarchy.
  2. Including more than one h1 tag on a single webpage.
  3. Using bold paragraph tags instead of heading tags, which makes your site invisible to screen-reader shortcuts.
Chapter Summary
  • HTML headings organize content into six structural levels from h1 to h6.
  • Proper heading hierarchy is crucial for search engine optimization and website navigation.
  • Headings should define structural hierarchy, while CSS should define visual size and design.
Browser Support

Heading elements from h1 to h6 have absolute native support across every browser ever made.

🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson HTML Attributes Next Lesson → HTML Paragraphs

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.