HTML Headings

HTML headings are titles and subtitles you place above sections of content. There are six levels, from <h1> for the main title down to <h6> for the smallest subheading.

The Six Heading Levels

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Headings</title></head>
<body>
  <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>
</body>
</html>

Building a Heading Hierarchy

Think of headings as a table of contents. Use one <h1> for the page topic, <h2> for main sections, and <h3> for subsections inside them. Do not skip levels just to get a smaller font; change the size with CSS instead.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Recipe</title></head>
<body>
  <h1>Chicken Biryani</h1>
  <h2>Ingredients</h2>
  <h3>For the rice</h3>
  <p>Basmati rice, salt, whole spices.</p>
  <h3>For the chicken</h3>
  <p>Chicken, yogurt, onions, biryani masala.</p>
  <h2>Method</h2>
  <p>Cook the chicken, par-boil the rice, then layer and steam.</p>
</body>
</html>

Why Headings Matter for SEO

Search engines use headings to understand what each part of a page is about, and screen reader users jump between headings to navigate. A clear hierarchy with descriptive words improves both. Avoid stuffing headings with keywords; write them for people.

Changing Heading Size with CSS

Browsers give each level a default size, but you can change it freely with the style attribute or a stylesheet without breaking the semantic order.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Heading Size</title>
<style>h1 { font-size: 24px; color: #0f766e; } h2 { font-size: 40px; }</style></head>
<body>
  <h1>Smaller h1</h1>
  <h2>Bigger h2 (still a level-2 heading)</h2>
</body>
</html>

Frequently asked questions

How many h1 tags should a page have?

HTML allows more than one, but the common best practice is a single <h1> that describes the main topic of the page. It is clearer for users and search engines.

Can I skip heading levels, like h2 to h4?

It is valid HTML but harms accessibility because screen reader users expect a logical outline. Keep levels in order and use CSS for sizing.

Should I use headings to make text bold?

No. Headings carry meaning. For visually bold text use <strong> if it is important, or CSS font-weight for pure styling.