<h1> Heading level 1
The top-level heading, naming what the page is about.
HTML gives you six heading levels, <h1> to <h6>. The h1 is the main title and should say what the page is about.
Use one h1 per page. Screen reader users often jump from heading to heading, so the headings have to form a sensible outline. Do not pick a level for its default size; CSS changes the look. Browsers will not adjust levels for nested sections either, so you choose every level yourself.
The h1 to h6 section of the WHATWG standard (opens in a new tab) covers all six levels and how they form the document outline. Practise them in the Headings lesson.
Syntax
<h1>Main page title</h1>When to use it
The h1 answers "what is this page?". On an article that is the headline, in a shop the product name, on the contact page "Contact us". The home page often uses the site name, a logo, or a short promise of what the site offers.
A logo at the top of every page should not be the h1 everywhere, or every page ends up with the same main heading. The same goes for a big slogan when a different line actually names the page: style the slogan with a class and give the h1 to the real title. The h1 and the <title> may use different words, but they should describe the same thing.
Older advice said to start every section with an h1 and let browsers work out the real levels. Browsers never implemented that outline algorithm, and the standard dropped it in 2022. Use h2 to h6 for nested parts, as the headings and outlines section of the standard (opens in a new tab) now describes.
Live example
Edit the code and watch the preview.
<h1>Learn HTML</h1>
<p>A free course for beginners.</p>More examples
Logo as the home page h1
On the home page, the site's logo can be the main heading. The image's alt text becomes the heading text that screen readers announce, so it must contain the site name. Inner pages would use their own topic as the h1 instead.
<header>
<h1><img src="logo.svg" alt="HTML Schools" width="200" height="60"></h1>
<p>Free interactive HTML lessons for beginners.</p>
</header>A smaller h1 styled with CSS
In an app or dashboard, a huge h1 can look out of place. Keep the correct level and change only its size and color with CSS. The small label above it is a paragraph, not a heading, so it does not disturb the outline.
<style>
h1{font-size:1.4rem;margin:0 0 8px;color:#234}
.kicker{margin:0;font-size:.8rem;text-transform:uppercase;color:#777}
</style>
<p class="kicker">Account</p>
<h1>Billing history</h1>
<p>You have no unpaid invoices.</p>Tip: One h1 per page, and it describes the page.
Browser support
The h1 element has been supported in every browser since the earliest days of HTML. One detail is changing: browsers have started removing the old default style that shrank an h1 nested inside article, aside, nav or section, so set heading sizes in your own CSS instead of relying on those defaults.
Accessibility
A lot of screen reader users navigate by headings and start at the h1. Make it describe the page, and keep the levels in order below it (WCAG 1.3.1, 2.4.6). What makes a heading descriptive is explained in the W3C note Understanding Headings and Labels (opens in a new tab).
Common mistakes
Wrong
<h1>Welcome</h1>
<h1>Our Products</h1>
<h1>Contact</h1>Right
<h1>Acme Garden Tools</h1>
<h2>Our Products</h2>
<h2>Contact</h2>The page topic gets one h1. Its main sections get h2.
Wrong
<h1 class="small-text">Note</h1>Right
<p class="note"><strong>Note</strong></p>Structure sets the level; CSS sets the size.
Frequently asked questions
Can a page have more than one h1 tag?
HTML allows it. Still, we recommend one <h1> that describes the whole page. Browsers and screen readers do not compute a nested outline from sections, so several h1 elements all show up as top-level headings. A single clear h1 followed by <h2> and <h3> subheadings gives users and search engines the most predictable structure. The Heading Order lesson practises a clean outline that starts from one h1.
Should the h1 be the same as the title tag?
Not necessarily. They can be similar without matching word for word. The <title> shows in tabs and search results and often ends with the site name, while the <h1> is the visible heading on the page. Both should be about the same topic, so nobody is surprised when they land. Google's guide to title links (opens in a new tab) describes how titles and headings feed its results.
Practise it
- What HTML Is (Module 1: First Page)
- Tags and Elements (Module 1: First Page)
- Attributes (Module 1: First Page)
- The Page Skeleton (Module 1: First Page)
- Head and Body (Module 1: First Page)
- Project: Hello World Page (Module 1: First Page)