HTML Headings - Learn It Quicker

The Six Heading Levels

HTML provides six levels of headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> element represents the most important heading (typically the page title), while <h6> represents the least important. Browsers display headings with decreasing font sizes by default, though this should be controlled with CSS.

Each heading level has semantic meaning. Search engines use headings to understand your page structure and content hierarchy. Screen readers allow users to navigate by headings, making them crucial for accessibility. Think of headings as creating an outline for your document.

Heading levels should form a logical hierarchy without skipping levels. For example, don't jump from <h2> directly to <h5>. This maintains a clear document outline and helps assistive technologies understand your content structure.

<!-- The six heading levels -->
<h1>Most Important - Main Page Title</h1>
<h2>Major Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

<!-- Proper hierarchy example -->
<h1>Complete Guide to Web Development</h1>

<h2>Frontend Development</h2>
<h3>HTML Basics</h3>
<h3>CSS Styling</h3>
<h3>JavaScript Programming</h3>

<h2>Backend Development</h2>
<h3>Server-Side Languages</h3>
<h4>Python</h4>
<h4>Node.js</h4>
<h3>Databases</h3>
<h4>SQL</h4>
<h4>NoSQL</h4>

Best Practices for Headings

Use only one <h1> per page. The h1 should represent the main topic or title of the page. Multiple h1 elements are technically valid in HTML5 when used within sectioning elements (article, section), but using a single h1 per page is simpler and more widely supported by screen readers.

Don't use headings just for styling. If you want larger or bolder text, use CSS instead. Headings should reflect the actual structure and importance of your content, not just its visual appearance.

Make headings descriptive and concise. A heading should clearly indicate what content follows. Good: 'Installation Requirements'. Bad: 'Important Information'. Descriptive headings help users scan your page and find what they need quickly.

<!-- GOOD: One h1 per page, logical hierarchy -->
<!DOCTYPE html>
<html>
<head>
  <title>User Guide</title>
</head>
<body>
  <h1>User Guide</h1>
  
  <h2>Getting Started</h2>
  <p>Instructions for new users...</p>
  
  <h2>Advanced Features</h2>
  <h3>Customization Options</h3>
  <p>How to customize...</p>
  
  <h3>Performance Tuning</h3>
  <p>Optimize performance...</p>
</body>
</html>

<!-- BAD: Multiple h1 elements, skipped levels -->
<h1>Title</h1>
<h1>Another Title</h1>  <!-- Don't use multiple h1 -->
<h4>Skipped h2 and h3</h4>  <!-- Don't skip levels -->

Headings and SEO

Search engines use headings to understand page content and structure. The h1 tag is particularly important for SEO—it should contain the main topic or primary keyword for the page. However, don't keyword-stuff headings; write naturally for human readers.

Subheadings (h2, h3, etc.) help search engines understand content organization and can rank for long-tail keywords. A well-structured heading hierarchy makes your content more likely to appear in featured snippets and rich results.

Keep headings relevant to the content that follows. Search engines may penalize pages where headings don't match the actual content, as this is considered a deceptive practice.

Headings and Accessibility

Screen reader users often navigate by headings, jumping from one heading to the next to find relevant content. A proper heading structure allows them to understand page organization and quickly locate information.

Many screen readers provide a 'headings list' feature that shows all headings on the page. This creates a navigable outline of your content. If your heading structure is illogical or incomplete, this feature becomes much less useful.

WCAG (Web Content Accessibility Guidelines) requires that heading levels follow a logical sequence. Skipping levels (h2 to h5) or having multiple h1 elements can confuse assistive technology users.

<!-- Accessible heading structure -->
<header>
  <h1>Product Documentation</h1>
</header>

<nav aria-label="Table of contents">
  <h2>Contents</h2>
  <ul>
    <li><a href="#installation">Installation</a></li>
    <li><a href="#configuration">Configuration</a></li>
  </ul>
</nav>

<main>
  <section id="installation">
    <h2>Installation</h2>
    <h3>System Requirements</h3>
    <p>Requirements...</p>
    
    <h3>Installation Steps</h3>
    <p>Steps...</p>
  </section>
  
  <section id="configuration">
    <h2>Configuration</h2>
    <h3>Basic Settings</h3>
    <p>Settings...</p>
  </section>
</main>

Styling Headings with CSS

Never choose a heading level based on its default size. Use the semantically correct heading level, then style it with CSS to achieve the desired visual appearance. You can make an h3 larger than an h2 if that's what your design requires.

Reset default heading styles and apply your own to maintain consistent design. Browser default styles vary, so defining your own heading styles ensures consistency across browsers.

<!-- HTML: Use semantic heading levels -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

<!-- CSS: Style headings for visual hierarchy -->
<style>
h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #3a3a3a;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Custom class for special styling */
.hero-heading {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
}
</style>