The <h1> element represents the top-level heading of a page or section — the most important title, describing what the content is fundamentally about.

Syntax

<h1>Main Page Title</h1>

Deep Dive Course

**`<h1>`** is the highest level of the six HTML heading elements (`<h1>`–`<h6>`), and browsers render it with the largest default font size and boldest weight. Beyond styling, it plays a real structural role: it tells search engines and screen readers 'this is the primary topic of this page'. The long-standing best practice is **exactly one visible `<h1>` per page**, matching (or closely echoing) the page's `<title>`, so both users skimming the page and search engines crawling it immediately understand its main subject.

1Understanding <h1>

`<h1>` is the highest level of the six HTML heading elements (<h1>–<h6>), and browsers render it with the largest default font size and boldest weight. Beyond styling, it plays a real structural role: it tells search engines and screen readers 'this is the primary topic of this page'. The long-standing best practice is exactly one visible `<h1>` per page, matching (or closely echoing) the page's <title>, so both users skimming the page and search engines crawling it immediately understand its main subject.

💡

Don't choose a heading level based on how big or small you want the text to look — that's what CSS font-size is for. Choose the heading level based on its actual place in the document's logical outline.

editor.html

<body>
  <h1>Learn HTML Fundamentals</h1>
  <p>Welcome to this free interactive course.</p>
</body>

localhost:3000

2Practical Example

Here is a real-world application of <h1> showing how it is used in production HTML.

editor.html

<!-- Anti-pattern: using h1 purely because it looks big -->
<!-- Bad -->
<h1>Related Products</h1> <!-- this is a sidebar widget title, not the page's main topic -->

<!-- Good -->
<h2>Related Products</h2>

localhost:3000

3Best Practices

Follow these guidelines when working with <h1>:

1. Use exactly one <h1> per page, describing its main topic

2. Don't skip heading levels going down (h1 straight to h3) — go h1, then h2, then h3

3. Never pick a heading tag purely for its default visual size — restyle with CSS instead

⚠️

Tip: Don't choose a heading level based on how big or small you want the text to look — that's what CSS font-size is for. Choose the heading level based on its actual place in the document's logical outline.

editor.html

<body>
  <h1>Learn HTML Fundamentals</h1>
  <p>Welcome to this free interactive course.</p>
</body>

localhost:3000

Examples

Example 01Basic Usage

<body>
  <h1>Learn HTML Fundamentals</h1>
  <p>Welcome to this free interactive course.</p>
</body>

Example 02Advanced Example

<!-- Anti-pattern: using h1 purely because it looks big -->
<!-- Bad -->
<h1>Related Products</h1> <!-- this is a sidebar widget title, not the page's main topic -->

<!-- Good -->
<h2>Related Products</h2>

Best Practices

Use exactly one
per page, describing its main topic
Don't skip heading levels going down (h1 straight to h3) — go h1, then h2, then h3
Never pick a heading tag purely for its default visual size — restyle with CSS instead

Interview Question

Why do SEO and accessibility guidelines both recommend exactly one <h1> per page?▼

Hint: Think about how both a screen reader user and a search engine crawler try to quickly understand 'what is this page about'.

Both search engines and screen reader users rely on the heading structure to quickly grasp a page's topic and organization. A single, clear <h1> unambiguously answers 'what is this page fundamentally about', which search engines weight heavily for ranking and screen reader users often jump to first when landing on a page. Multiple or missing <h1>s create ambiguity — search engines may misidentify the primary topic, and screen reader users lose the quick 'orientation' a single top-level heading provides.

Exercises

EasyPractice using <h1> in a real scenario.

View Solution

<body>
  <h1>Learn HTML Fundamentals</h1>
  <p>Welcome to this free interactive course.</p>
</body>

Frequently Asked Questions

Why do SEO and accessibility guidelines both recommend exactly one <h1> per page?▼

Both search engines and screen reader users rely on the heading structure to quickly grasp a page's topic and organization. A single, clear

unambiguously answers 'what is this page fundamentally about', which search engines weight heavily for ranking and screen reader users often jump to first when landing on a page. Multiple or missing

s create ambiguity — search engines may misidentify the primary topic, and screen reader users lose the quick 'orientation' a single top-level heading provides.

Related Functions

h2-tagtitle-tag