Skip to main content

HTML Headings

Think of a newspaper or a textbook. Big titles tell you what the page is about, and smaller titles break it into sections. HTML headings do the same job on the web. They give your content a clear outline that people, search engines, and screen readers can all follow.


What You Will Learn​

  • What heading elements are and how to write them
  • The six heading levels, from <h1> to <h6>
  • How to build a correct heading hierarchy
  • Why headings matter for SEO and accessibility
  • Common mistakes and how to avoid them
  • How to change heading size and style with CSS

What Is a Heading?​

A heading is a short piece of text that names the content below it. HTML provides six levels of headings. <h1> is the most important and <h6> is the least important.

Syntax
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Each heading has an opening tag, the text, and a closing tag. The browser makes headings bold and gives them a default size, and it adds space above and below them.

index.html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The Six Heading Levels​

TagLevelTypical useDefault size (approx.)
<h1>1The main title of the page2em (32px)
<h2>2Major sections1.5em (24px)
<h3>3Subsections of an <h2>1.17em (18.7px)
<h4>4Smaller subsections1em (16px)
<h5>5Fine-grained details0.83em (13.3px)
<h6>6The lowest level0.67em (10.7px)
info

The sizes above are browser defaults. You can change them with CSS. The level tells the browser how important the heading is, not how big it should look.

Heading Hierarchy​

Headings should form a tree, like the table of contents of a book. Each level nests inside the one above it.

A good outline
h1  Web Development
├── h2  HTML
│   ├── h3  Text Content
│   └── h3  Links and Images
├── h2  CSS
│   ├── h3  Selectors
│   └── h3  Layout
└── h2  JavaScript

Here is the same outline written in HTML.

outline.html
<h1>Web Development</h1>

<h2>HTML</h2>
<h3>Text Content</h3>
<p>Learn how to format text.</p>
<h3>Links and Images</h3>
<p>Connect pages and add pictures.</p>

<h2>CSS</h2>
<p>Style your pages.</p>

Best Practices​

1. Use one <h1> per page​

The <h1> is the title of the whole page. A blog post, a product page, and a tutorial each get one <h1>.

2. Do not skip levels​

Go from <h2> to <h3>, never from <h2> to <h5>. A missing level leaves a hole in the outline.

3. Choose by rank, not by size​

If you want smaller text, use CSS. Do not pick <h6> just because it looks small.

4. Keep headings short and clear​

A good heading tells the reader what comes next in a few words. Prefer "Install Node.js" over "Things you might want to do first".

Read your headings alone

Take away all the paragraphs and read only the headings. If the page still makes sense, your outline is good.

Common Mistakes​

<h1>My Blog</h1>
<h4>Latest Posts</h4>      <!-- skipped h2 and h3 -->
<h1>About Me</h1>          <!-- a second h1 -->
<h3>Please subscribe!</h3> <!-- used only to get bigger text -->
Do not fake headings

Wrapping text in <b> or <span style="font-size: 2rem"> looks like a heading but is not one. Screen readers and search engines will not treat it as a heading.

Why Headings Matter​

SEO​

Search engines read your headings to learn what each section is about. Clear headings that contain your topic words help your page rank for the right searches.

Accessibility​

Screen reader users often jump from heading to heading instead of reading the whole page. A correct outline is like a menu for them. Without it, the page is much harder to use.

Readability​

Headings break long text into pieces. Readers scan them to decide which part to read.

Styling Headings with CSS​

You control the look of headings with CSS while keeping the correct level in HTML.

styled-headings.html
<style>
  h1 {
    color: #2563eb;
    font-size: 2.5rem;
    text-align: center;
  }
  h2 {
    color: #334155;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 4px;
  }
</style>

<h1>CodeHarborHub</h1>
<h2>Learn to Code</h2>
<p>Start your journey today.</p>

Headings vs the Title Tag​

Beginners often mix up <title> and <h1>. They are different.

ElementWhere it appearsPurpose
<title>Browser tab and search resultsNames the page for browsers and search engines
<h1>Inside the page contentNames the page for the reader

They are often similar, but they do not have to match exactly.

Practice​

Try this in your editor.

  1. Create a file called recipe.html.
  2. Add an <h1> with the name of a dish.
  3. Add two <h2> headings: Ingredients and Steps.
  4. Under Steps, add an <h3> for each stage, such as Prepare and Cook.
  5. Add a short <p> under every heading.
  6. Read only the headings. Does the outline tell the story of the recipe?

Quick Recap​

Click a question to reveal the answer.

1. How many heading levels does HTML have?

Six, from <h1> to <h6>.

2. How many <h1> elements should a page normally have?

One. It is the main title of the page.

3. Why should you not use <h4> just to get smaller text?

The heading level shows rank in the outline, not size. Use CSS to change how big text looks.

4. Which two groups of users benefit most from a correct heading outline?

Screen reader users, who navigate by headings, and search engines, which use headings to understand the page.

5. What is the difference between <title> and <h1>?

<title> shows in the browser tab and search results. <h1> shows inside the page as its visible title.

Key Takeaways​

  • HTML has six heading levels, <h1> (most important) to <h6> (least important).
  • Headings build the outline of your page.
  • Use one <h1> and never skip levels.
  • Pick headings for meaning, and use CSS for appearance.
  • Good headings help SEO, accessibility, and readability.

Next, learn how to write body text in Paragraphs.