HTML <h1>-<h6> Tags
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Try examples!
The <h1> to <h6> elements are used to define six levels of HTML Headings, with <h1> being the highest (or most important) level and <h6> the least important one.
Each web page must have only one <h1> heading. As search engines use it to index the structure and content of web documents, be sure to include keywords in it.
User agents may use heading information for automatically creating a content table for a document.
If you want to resize text, it’s better not to use heading tags. You can use the CSS font-size property instead. It’s recommended not to skip heading levels (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) and to use <h1> only once on a page.
Headline tags have SEO value as well. A search engine tries to find out two things about your page: what the page is about, and how good it is. One of the main things that search engines look at for determining page content is the words inside heading tags.
When a page has a single piece of content, its main title must be in an <h1> tag, the larger sections must be included in <h2> and so on. In this way, you can make your content more organized. You should remember that no one reads every word of content.
There are two types of pages with content: single content pages and index pages. On single content pages, the title of that piece of content must be in <h1> near the top of <body>. On an index page, the site title or the index name is usually put in <h1>. Then the titles of all the listed individual parts must use <h2> tags.
As the <h1> to <h6> tags are block-level elements, they always start on a new line and take up the full width available.
By default, browsers render <h1>-<h6> tags with the following CSS, where the font-size shrinks at each level while the font-weight stays bold:
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;Syntax
The <h1>-<h6> tags come in pairs, so the closing tag is required.
Example of the HTML <h1>-<h6> tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>The <h1>-<h6> elements must not be used to markup subheadings, subtitles, alternative titles, and taglines unless intended to be the heading for a new section or subsection.
As the align attribute is not supported in HTML5, use the CSS text-align property instead.
Building a Document Outline
Headings are not about size — they are about structure. Think of <h1>-<h6> as the table of contents of your page. The <h1> names the whole page, each <h2> opens a major section, and <h3> (and deeper) nest subsections inside it, just like 1 → 1.1 → 1.1.1 in a printed outline.
In the example below, an article has one <h1> title, two <h2> sections, and an <h3> subsection nested under one of them. Read only the headings and you already understand what the page covers:
<!DOCTYPE html>
<html>
<head>
<title>Growing Tomatoes at Home</title>
</head>
<body>
<article>
<h1>Growing Tomatoes at Home</h1>
<p>A beginner's guide to a healthy tomato harvest.</p>
<h2>Choosing a Variety</h2>
<p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>
<h2>Planting and Care</h2>
<p>Tomatoes need full sun and consistent watering.</p>
<h3>Watering Schedule</h3>
<p>Water deeply two to three times a week, more often in heat.</p>
<h3>Common Pests</h3>
<p>Watch for aphids and hornworms on the underside of leaves.</p>
</article>
</body>
</html>The <h3> headings belong to the "Planting and Care" <h2> because they appear after it and describe parts of it. Notice that the example never jumps from <h1> straight to <h3> — each level follows the one above it.
Styling headings with CSS
To change how a heading looks — its color, size, alignment, or spacing — use CSS, not a different heading level. Pick the heading tag by its place in the outline, then style it freely:
<!DOCTYPE html>
<html>
<head>
<title>Styled headings</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
h2 {
color: #22c599;
font-size: 22px;
}
h3 {
color: #bc22c5;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>Growing Tomatoes at Home</h1>
<h2>Choosing a Variety</h2>
<h3>Watering Schedule</h3>
</body>
</html>Accessibility and Heading Order
Screen-reader users rarely read a page top to bottom. Instead they pull up a list of headings and jump between them, the way a sighted reader skims bold titles. This only works when your headings form a correct, gap-free outline.
Two rules make headings accessible:
- Don't skip levels. Go
<h1>→<h2>→<h3>, not<h1>→<h3>. A skipped level makes assistive technology report a section that has no parent. - Don't choose a heading by its visual size. If you want a small section title, use the correct level (for example
<h3>) and shrink it with CSS font-size. Never use<h4>just because it happens to look smaller.
The two snippets below mark up the same content. The first breaks the outline; the second keeps it intact:
<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>
<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>Use only one <h1> per page. The <h1> answers "what is this page about?" — having several muddles that answer for both search engines and screen readers. (You may see older advice that allowed one <h1> per <article> or <section>; it relied on a document-outline algorithm that no browser ever implemented, so stick to a single <h1> per page.) The page title shown in the browser tab is set separately with the <title> tag inside the <head>.
For the bigger picture of how the six levels work together, see the HTML Headings chapter.
Attributes
The <h1> to <h6> tags have no element-specific attributes of their own. Two attributes from the global set are especially common on headings:
| Attribute | Value | Description |
|---|---|---|
| id | text | Gives the heading a unique identifier so it can be targeted by an anchor link (#section-name) or by CSS and JavaScript. |
| align | left, right, center, justify | Sets the horizontal alignment of the heading. Deprecated — not supported in HTML5; use the CSS text-align property instead. |
A common use of id is letting readers jump straight to a section:
<h2 id="planting">Planting and Care</h2>
<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>The <h1> to <h6> tags also support the Global Attributes and the Event Attributes.