Article Categories

Selected Reading

How to properly use h1 in HTML5?

HTML Web Development Front End Technology

The h1 element in HTML5 defines the most important heading on a page or within a section. Unlike earlier HTML versions, HTML5 allows multiple h1 elements when used properly within sectioning elements like <article>, <section>, <nav>, and <aside>.

The h1 element represents a heading, not a title. Each sectioning element can have its own h1 heading that describes the content of that specific section. The first h1 element in the document body typically serves as the main heading for the entire page.

Syntax

Following is the basic syntax for the h1 element −

<h1>Heading Text</h1>

The h1 element is a block-level element that creates a line break before and after the heading text.

Traditional HTML Document Structure

In a traditional HTML document without sectioning elements, use only one h1 element followed by hierarchical headings (h2, h3, etc.).

Example

<!DOCTYPE html>
<html>
<head>
   <title>Traditional HTML Structure</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h1>Main Page Heading</h1>
   <p>This is the main content of the page.</p>
   
   <h2>First Subsection</h2>
   <p>Content for the first subsection.</p>
   
   <h3>Sub-subsection</h3>
   <p>More detailed content.</p>
   
   <h2>Second Subsection</h2>
   <p>Content for the second subsection.</p>
</body>
</html>

Main Page Heading        (largest, bold)
This is the main content of the page.

First Subsection         (medium, bold)
Content for the first subsection.

   Sub-subsection         (smaller, bold)
   More detailed content.

Second Subsection        (medium, bold)
Content for the second subsection.

HTML5 Sectioning Elements Structure

HTML5 introduces sectioning elements that create their own heading context. Each <article>, <section>, <nav>, or <aside> can have its own h1 element.

Example − Multiple h1 Elements in Sections

<!DOCTYPE html>
<html>
<head>
   <title>HTML5 Sectioning Structure</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h1>Technology Blog</h1>
   <p>Welcome to our technology blog with the latest updates.</p>
   
   <article>
      <h1>Introduction to HTML5</h1>
      <p>HTML5 is the latest version of HTML with new semantic elements.</p>
      
      <section>
         <h1>New Features</h1>
         <p>HTML5 introduces many new features and improvements.</p>
      </section>
   </article>
   
   <article>
      <h1>CSS Grid Layout</h1>
      <p>CSS Grid provides a powerful layout system for web pages.</p>
   </article>
</body>
</html>

Technology Blog                 (largest, bold)
Welcome to our technology blog with the latest updates.

Introduction to HTML5           (large, bold)
HTML5 is the latest version of HTML with new semantic elements.

New Features                    (medium, bold)
HTML5 introduces many new features and improvements.

CSS Grid Layout                 (large, bold) 
CSS Grid provides a powerful layout system for web pages.

Document Outline and Accessibility

The HTML5 document outline algorithm creates a hierarchical structure based on sectioning elements and headings. Screen readers and other assistive technologies use this structure to help users navigate content.

Example − Complete Document Structure

<!DOCTYPE html>
<html>
<head>
   <title>Complete Document Structure</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <header>
      <h1>Learning Web Development</h1>
      <p>Your guide to modern web technologies</p>
   </header>
   
   <nav>
      <h1>Navigation Menu</h1>
      <ul>
         <li><a href="#html">HTML</a></li>
         <li><a href="#css">CSS</a></li>
      </ul>
   </nav>
   
   <main>
      <article id="html">
         <h1>HTML Fundamentals</h1>
         <p>Learn the building blocks of web pages.</p>
      </article>
      
      <article id="css">
         <h1>CSS Styling</h1>
         <p>Master the art of web page styling.</p>
      </article>
   </main>
   
   <aside>
      <h1>Quick Tips</h1>
      <p>Helpful resources for web developers.</p>
   </aside>
</body>
</html>

Each sectioning element (header, nav, main, article, aside) creates its own heading context, allowing multiple h1 elements.

Best Practices for h1 Usage

Follow these guidelines for proper h1 usage in HTML5 −

Page-level h1 − Always include one h1 element between the opening <body> tag and the first content section to label the overall document.
Section-level h1 − Use one h1 per sectioning element (article, section, nav, aside) to describe that section's content.
Heading hierarchy − Within each section, maintain proper heading hierarchy using h1, h2, h3, etc.
Descriptive content − Make h1 text descriptive and relevant to the section content for better SEO and accessibility.

Common Use Cases

Context	h1 Usage	Example
Blog Homepage	One h1 for site title	<h1>Tech Blog</h1>
Blog Post	One h1 for post title	<h1>Getting Started with HTML5</h1>
Article with Sections	h1 for article, h1 for each section	<article><h1>Tutorial</h1><section><h1>Part 1</h1>
E-commerce Page	h1 for page title, h1 for product sections	<h1>Products</h1><article><h1>Laptops</h1>

Conclusion

In HTML5, you can use multiple h1 elements when they appear within different sectioning elements like article, section, nav, or aside. Each section creates its own heading context, making multiple h1 elements both valid and semantically meaningful for document structure and accessibility.

varun

Updated on: 2026-03-16T21:38:53+05:30

316 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next