<h1>
The <h1> element represents a top-level heading, the highest level in the document's heading hierarchy. It typically describes the main topic or purpose of the page and should be used only once per page for optimal SEO and accessibility.
This page was last updated on 2025-11-27
Syntax
<h1>Main Page Title</h1>
Attributes
- class - CSS class name
- id - Unique identifier
- style - Inline CSS styles
- title - Advisory information
- lang - Language of the heading
Examples
Simple page title:
<h1>Welcome to Our Website</h1>
Article title:
<article>
<h1>How to Learn HTML in 30 Days</h1>
<p>Article content here...</p>
</article>
With styling class:
<h1 class="site-title">Company Name</h1>
Complete heading hierarchy:
<h1>Main Topic</h1>
<h2>Subtopic</h2>
<h3>Sub-subtopic</h3>
<h2>Another Subtopic</h2>
When to Use
Use <h1> for the main heading of your page that describes what the page is about. Each page should have exactly one <h1> element. This helps search engines understand your content and improves accessibility for screen reader users who navigate by headings.
The heading hierarchy should be logical: <h1> for the main title, <h2> for major sections, <h3> for subsections within <h2>, and so on. Avoid skipping heading levels (for example, going from <h1> directly to <h3>) as this confuses both users and search engines.
Do not use headings merely for visual styling. If you need large bold text that is not a heading, use CSS on a <p> or <div> element instead. Headings carry semantic meaning about document structure.
