Headings

HTML gives you six heading levels, <h1> through <h6>. Choosing between them looks like a decision about size. It is not, and treating it as one is the mistake this lesson exists to prevent.

<h1>Karachi Canteen</h1>
<h2>Today's menu</h2>
<h3>Rice dishes</h3>

Headings are an outline, not font sizes

Browsers render <h1> largest and <h6> smallest, so it is natural to pick a level by eye: I want this a bit smaller, so I'll use <h3>.

Stop. The number is not a size — it is a depth in an outline. <h2> means "this is a section of the page". <h3> means "this is part of the section above it". You are describing how the page is organised, not how large the text should be.

If you want a heading to look smaller, that is a CSS change, and CSS can make an <h1> tiny or an <h6> enormous. The level stays a statement of structure. Size is appearance, and appearance is not HTML's job.

Think of the contents page of a book. Chapter titles, then sections within chapters, then subsections. Nobody chooses "chapter" because they like the typeface.

Who is reading the outline

This would be pedantry if the outline were only for you. It is not.

A blind reader using a screen reader can bring up a list of every heading on the page and jump straight to the one they want — the same glance down a page that a sighted reader does in a second. That list is built purely from your heading levels. Choose them by size and the list becomes nonsense: sections nested under things they have nothing to do with, or a flat run of same-level headings with no shape at all.

Search engines read the same outline to work out what your page covers and which parts matter most. Your <h1> carries real weight.

So this is not a style rule someone invented. Two audiences you cannot see are depending on it.

One h1, at the top

Your <h1> is the title of the page's content — what the whole page is about. There should be one, and it should come first.

<body>
  <h1>Cricket practice</h1>

  <h2>When</h2>
  <p>Every Tuesday and Thursday, 5pm.</p>

  <h2>Where</h2>
  <p>The school ground, near the main gate.</p>
</body>

One <h1>, two <h2> sections beneath it. Read only the headings and you already know what the page contains.

A common question: should the <h1> repeat the <title>? They usually say something similar, and that is fine. They do different jobs — <title> is for the browser tab and search results, <h1> is the heading a visitor reads on the page. Near-identical text in both is normal and correct.

Never skip a level

Going from <h2> straight to <h4> breaks the outline. There is now a level missing, and anything reading the structure has to guess what happened.

Wrong:

<h1>Karachi Canteen</h1>
<h2>Today's menu</h2>
<h4>Rice dishes</h4>

Right:

<h1>Karachi Canteen</h1>
<h2>Today's menu</h2>
<h3>Rice dishes</h3>

Almost always, a skipped level happens because <h3> looked too big and <h4> looked right. That is the size trap again. Use the correct level and change the size in CSS.

Going back up is fine — that is just starting a new section:

<h2>Today's menu</h2>
<h3>Rice dishes</h3>
<h3>Bread</h3>
<h2>Opening hours</h2>

Down one at a time; up as far as you like.

Headings are not for emphasis

A heading marks the start of a section. If you want a line of text to stand out without starting a section, a heading is the wrong tool:

<h3>Closed on Friday!</h3>

That tells every screen reader and search engine that a new subsection called "Closed on Friday!" begins here, and it contains whatever follows. It does not.

Use a paragraph and let CSS make it prominent, or mark the important words for what they are:

<p><strong>Closed on Friday.</strong> Normal hours resume on Saturday.</p>

A page with a real outline

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Lahore Canteen — menu and hours</title>
  </head>
  <body>
    <h1>Lahore Canteen</h1>

    <h2>Menu</h2>

    <h3>Rice</h3>
    <p>Biryani, 350 rupees. Pulao, 280 rupees.</p>

    <h3>Bread</h3>
    <p>Roti, 20 rupees. Naan, 40 rupees.</p>

    <h2>Opening hours</h2>
    <p>Eight in the morning until six in the evening.</p>
  </body>
</html>

Read only the headings, in order:

Lahore Canteen
  Menu
    Rice
    Bread
  Opening hours

That is a table of contents you never had to write. It came free, because the levels describe the structure honestly.

Here is the test to apply to any page you write: strip out everything except the headings and read what is left. If it reads like a sensible outline of the page, your levels are right. If it reads like a jumble, they were chosen by eye.

Next, paragraphs and text — including the difference between <strong> and <b>, which is the same meaning-versus-appearance idea in a smaller package. Then attributes.