References

Beginner-friendly references for web development, with live, editable examples.

The HTML <h1> tag

Element All modern browsers By David AdamsUpdated
In short

The HTML <h1> element is the top-level heading of a page, usually its main title, as in <h1>Banana bread</h1>. Sections under it use <h2>. Browsers show it in bold at twice its parent's font size, and CSS can restyle it.

Overview

The HTML <h1> element marks the highest-level heading of a page or document. HTML has six heading elements, from h1 down to <h6>, and h1 is the one for a top-level section, with <h2> for its subsections.

Browsers draw an h1 as a bold block on its own line. By default its font size is 2em and its top and bottom margins are 0.67em, so 16px parent text gives a 32px h1 with 21.44px margins.

Older default styles shrank an h1 placed inside <section>, <article>, <aside> or <nav>. The HTML standard removed that style in 2025, and from Chrome 140, Firefox 140 and Safari 26.2, such an h1 keeps its full size.

Browsers expose an h1 to assistive technology as a heading with level 1. HTML allows more than one h1. Even so, use one per page, much as each page has one <title>.

Syntax

<h1>Banana bread</h1>
<h2>Ingredients</h2>

Example

Live example 
<h1>Banana bread</h1>
<p>A moist loaf made with three ripe bananas.</p>
<h2>Ingredients</h2>
<h2>Method</h2>
<p id="outline"></p>
<script>
const items = [...document.querySelectorAll('h1, h2')].map(h => h.tagName + ' ' + h.textContent);
document.getElementById('outline').textContent = 'Outline: ' + items.join(', ');
</script>

Best practices

  • Give each page one h1 that states its topic in words close to the page's title element.
  • Follow the h1 with h2 sections. Any heading deeper than h2 straight after an h1 skips a level, which makes the HTML non-conforming.
  • Don't choose h1 to make text big. Size text with the CSS font-size property and keep heading levels for structure.
  • Leave aria-label off an h1, since screen readers then read the label instead of the heading's visible text.
  • If older browsers must show an h1 inside a section or article at full size, add the rule h1 { font-size: 2em; margin-block: 0.67em; }.

Accessibility

An h1 that names the page's topic helps anyone who navigates by headings. Jumping from heading to heading is a common way for screen reader users to get around a page. A page whose first heading isn't level 1 is still conforming HTML, though not encouraged.

Frequently asked questions

What is the h1 tag in HTML?
The h1 tag marks the main heading of a page or document. It is the highest of six heading levels, and its text shows bold and large by default.
How many h1 tags should a page have?
Use a single h1 that describes the page's content. HTML itself allows several h1 elements side by side on a page.
What attributes does the h1 tag have?
The h1 tag has no attributes of its own and accepts global attributes such as id, class and lang. Its old align attribute is obsolete, so align an h1 with the CSS text-align property instead.
What is the default font size of h1?
An h1 defaults to 2em, twice its parent's font size, so 32px when the parent's text is 16px. Its default margins above and below are 0.67em.
Is the h1 tag the same as the title tag?
No, the h1 tag is a visible heading inside the page body. The title element names the document in places such as the browser tab, and it isn't a heading itself.
How do I change the size of an h1?
Set the CSS font-size property on the h1, as in h1 { font-size: 2.5rem; }. The h1 keeps heading level 1 in the accessibility tree whatever size you give it.
form h2