References

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

The HTML <h1> tag

Element All modern browsers Updated
Quick answer

The HTML <h1> element is a level-1 heading. It represents the top-level, most important heading on the page — typically its title or main subject. Headings (<h1>–<h6>) define a page's outline — use them in order without skipping levels, and style their size with CSS.

Overview

The <h1> element is a level-1 section heading — one of the six heading levels from <h1> (most important) down to <h6> (least). It represents the top-level, most important heading on the page — usually its title or main subject.

Together, the headings on a page form its document outline — the structure that browsers, search engines and assistive technology use to understand it. Screen-reader users in particular navigate by jumping from heading to heading, so a logical, well-ordered hierarchy is one of the highest-impact things you can do for accessibility.

The golden rule is to choose a level for its place in the structure, not for how big it looks, and never skip a level (do not jump from <h2> straight to <h4>). Headings carry meaning; for appearance, restyle them freely with the CSS font-size and font-weight properties.

Syntax

<h1>This is a level-1 heading</h1>

Example

Live example 
<h1>Main heading</h1>
<h2>A section heading</h2>
<p>Body text under the section.</p>

Best practices

  • Choose a heading level for its place in the document structure, not for how big it looks.
  • Never skip heading levels — follow <h1>, <h2>, <h3> in order.
  • Use a single <h1> for the page's main title or subject.
  • Restyle headings with the CSS font-size and font-weight — the element is for meaning, CSS for appearance.

Accessibility

Headings are the primary way screen-reader users navigate a page — they can jump from heading to heading and pull up a list of them to understand the structure at a glance. For that to work:

  • Keep the hierarchy logical and gap-free (do not jump from <h2> to <h4>).
  • Never choose a heading level for its visual size; use the correct level for the structure and restyle with CSS.
  • Do not use a heading purely to make text big and bold — use a styled <p> or <span> for that.

Frequently asked questions

What does the <h1> element represent?
A level-1 heading. The six levels run from <h1> (most important) to <h6> (least); the level should reflect the heading's depth in the page structure, not its visual size.
How many h1 elements should a page have?
Generally one, for the page's main title or subject. A single, clear <h1> is the safest, most widely understood choice.
Can I skip heading levels?
No. Skipping levels (for example <h2> to <h4>) breaks the document outline that assistive technology relies on. Keep them in sequence.
Does the size of a heading matter for SEO or accessibility?
What matters is the level and order, not the visual size. Pick the level for structure and control the size with the CSS font-size property.
form h2