to
Lower-level headings for content hierarchy. Learn more →
<h1> - Level 1 Heading
The <h1> Element
Section titled “The <h1> Element”The <h1> element represents the most important heading on a page, typically used for the main title or primary topic. It’s the top level in HTML’s six-level heading hierarchy.
Quick Example
Section titled “Quick Example” Result
Syntax
Section titled “Syntax”<h1>Your Main Page Title</h1>The <h1> element wraps the text that serves as your page’s primary heading. It should be the most prominent heading on the page.
Attributes
Section titled “Attributes”The <h1> element supports all global attributes like id, class, style, and lang.
<h1 id="main-title" class="page-heading">Main Title</h1>Common Use Cases
Section titled “Common Use Cases”Page Title
Section titled “Page Title”The most common use is as the main page title:
Result
Article Title
Section titled “Article Title”In articles or blog posts, the <h1> represents the article title:
Result
Styled Heading
Section titled “Styled Heading” Result
With Subtitle Pattern
Section titled “With Subtitle Pattern” Result
SEO Best Practices
Section titled “SEO Best Practices”One H1 Per Page
Section titled “One H1 Per Page”<h1>Ultimate Guide to HTML Headings</h1><h2>Understanding Heading Hierarchy</h2><h2>Best Practices</h2><h1>Ultimate Guide</h1><h1>HTML Headings</h1> <!-- Don't use multiple h1 elements --><h1>Best Practices</h1>Use Descriptive Text
Section titled “Use Descriptive Text”Your <h1> should clearly describe the page content:
<h1>How to Build a Portfolio Website in 2025</h1><h1>Beginner's Guide to HTML Forms</h1><h1>Welcome</h1><h1>Click Here</h1>Include Keywords Naturally
Section titled “Include Keywords Naturally”<!-- Good: Natural keyword usage --><h1>HTML Tutorial: Learn Web Development from Scratch</h1>
<!-- Avoid: Keyword stuffing --><h1>HTML Tutorial HTML Guide Learn HTML HTML Web Development HTML</h1>Accessibility
Section titled “Accessibility”Heading Hierarchy Matters
Section titled “Heading Hierarchy Matters”Screen readers use headings to navigate. Always start with <h1> and don’t skip levels:
<h1>Main Page Title</h1><h2>Section Title</h2><h3>Subsection Title</h3><h1>Main Page Title</h1><h4>Section Title</h4> <!-- Skipped h2 and h3 -->Don’t Use Headings for Styling
Section titled “Don’t Use Headings for Styling”Use headings for structure, not visual appearance:
<h1>Article Title</h1><p class="large-text">Important note goes here</p><h1>Article Title</h1><h1 class="small">Important note</h1> <!-- Don't use h1 just for styling -->Screen Reader Navigation
Section titled “Screen Reader Navigation”Users can jump between headings using screen readers. A clear <h1> helps them understand the page immediately:
<!-- Screen reader announces: "Heading level 1: Complete Guide to Responsive Design" --><h1>Complete Guide to Responsive Design</h1>Browser Support
Section titled “Browser Support”| Browser | Version | Notes |
|---|---|---|
| Chrome | 1+ | Full support |
| Firefox | 1+ | Full support |
| Safari | 1+ | Full support |
| Edge | 12+ | Full support |
| IE | 3+ | Full support |
The <h1> element has been supported since the earliest browsers.
Related Elements
Section titled “Related Elements”
Container for introductory content, often contains headings. Learn more →
Self-contained composition that can have its own <h1>.
Learn more →
Thematic grouping of content, usually with a heading. Learn more →