What is the difference between and ?

The is the main heading of the whole page — what the page is about — and normally appears once. headings divide that topic into its main sections, and there can be as many as you need.

HTML Headings: <h1> to <h6> – Syntax & Live Example

Quick facts

Category	Flow content, heading content, palpable content
Content model	Phrasing content
Tag omission	Neither the start nor end tag can be omitted
Permitted parents	Any element that accepts flow content
DOM interface	`HTMLHeadingElement`

Syntax

<h1>Page title</h1>
<h2>Section heading</h2>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	Headings have no attributes of their own — only the global attributes shared by every HTML element.

Common examples

A clear page outline

Use one <h1> for the page topic, <h2> for main sections and <h3> for their sub-sections — like the chapters and sub-chapters of a book.

<h1>Chocolate Cake Recipe</h1>
  <h2>Ingredients</h2>
  <h2>Method</h2>
    <h3>Making the batter</h3>
    <h3>Baking</h3>
  <h2>Serving tips</h2>

Change a heading’s size without changing its level

Choose the level for the structure, then set the size with CSS. A small-looking section title can still be an <h2>.

<h2 class="section-title">Latest news</h2>

<style>
  .section-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
</style>

Headings you can link to

Give a heading an id and you can jump to it from a table of contents or share a link straight to that section.

<a href="#faq">Jump to the FAQ</a>

<h2 id="faq">Frequently asked questions</h2>

<h1> vs <title>

They are often confused because both describe what the page is about. The <title> lives in the <head> and appears in the browser tab and as the clickable headline in Google. The <h1> is the main heading visible on the page itself.

Every page should have exactly one title and, as a rule, one <h1>. They usually say similar things, but they don’t have to match: the title can be shorter and include your site name, while the <h1> can be friendlier for people already on the page.

	<h1>	<title>
Where it appears	On the page	Browser tab, search results
Where it goes	In the <body>	In the <head>
How many	Usually one	Exactly one

Common mistakes to avoid

Choosing a level by its size. Picking <h4> because it “looks right” breaks the outline. Choose the level for the structure and change the size with CSS.
Bold paragraphs instead of headings. <p><b>Pricing</b></p> looks like a heading but screen readers and search engines can’t tell it starts a section.
Using headings for taglines or decoration. A slogan under the logo is not a heading; use a <p> and style it.
Several <h1>s fighting for attention. One clear main heading tells everyone what the page is about.

Accessibility & SEO tips

Screen reader users jump between headings (often with the H key) to skim a page, much like sighted readers scan bold titles — a logical outline makes your page easy to navigate.
Write descriptive headings that include the words people search for. Search engines use headings to understand a page, and question-style <h2>s often appear as featured snippets.
Keep the order logical: don’t jump from <h2> to <h4>, and don’t use an empty heading just to create space.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.

Tutorial: How to change the font

Related tags

Frequently asked questions

Should I use <h1> more than once on a page?

HTML5 technically allows multiple <h1>s inside different sectioning elements, but for SEO clarity most sites still use exactly one <h1> per page for the main title.

Can I skip heading levels, like going from <h2> straight to <h4>?

You can visually, but it breaks the logical outline for screen reader users and SEO crawlers. Pick heading levels by document structure, not by what font size you want — style that with CSS instead.

How do I change the size of a heading without changing its level?

Use CSS, for example h2 { font-size: 1.25rem; } or a class on the heading. The level should describe the structure of the page, and the size is a design choice.

Do headings help SEO?

Yes. Search engines use headings to understand what a page and each of its sections are about, and well-worded headings can be shown as featured snippets. Use one clear <h1> and descriptive <h2>s.

Can a heading contain a link?

Yes. An <a> inside a heading is valid, for example <h2><a href="/blog/post/">Post title</a></h2> in a list of blog posts.

What is the difference between <h1> and <h2>?

The <h1> is the main heading of the whole page — what the page is about — and normally appears once. <h2> headings divide that topic into its main sections, and there can be as many as you need.