HTML Headings
In this page:
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)
<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
<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
<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
<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
<h2 style="margin: 0;">Heading with margins removed</h2>
<p>Paragraph sitting closer to the heading above.</p>- Using h3 or h4 tags purely because you like their default size, ignoring the hierarchy.
- Including more than one h1 tag on a single webpage.
- Using bold paragraph tags instead of heading tags, which makes your site invisible to screen-reader shortcuts.
- 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.
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: