Chapter 1.3☕ 10 min read

Headings & Paragraphs

Menu board jaisa — bada naam, chhota details.

01Why Headings Matter

Walk into Paradise Biryani. What do you see first? The big board — "PARADISE BIRYANI" in huge letters. Under that, smaller text: "Since 1953". Then even smaller: "Mutton, Chicken, Veg".

HTML headings work exactly like that board. <h1> is the restaurant name — biggest and most important. <h2> is the section name. <h3> is the sub-item. Down to <h6> — like the fine print on the back of the menu.

📋

Menu Board Rule: Never skip levels. Don't jump from h1 to h4. It's like putting "Extra Raita" in bigger letters than "BIRYANI" — confuses everyone.

02The 6 Heading Levels

There are 6 heading levels in HTML:

<h1> — Restaurant name. Use ONLY ONCE per page. This is your main title.
<h2> — Section headers. "Starters", "Main Course", "Desserts" on the menu.
<h3> — Sub-sections. Under "Main Course" → "Mutton Biryani", "Chicken Biryani".
<h4> — Details. Under "Mutton Biryani" → "Full Plate", "Half Plate".
<h5> — Extra info. "Served with raita and salan."
<h6> — Fine print. "Prices inclusive of GST." Rarely used.

h1 — Paradise Biryani

h2 — Main Course

h3 — Mutton Biryani

h4 — Full Plate ₹450

h5 — Served with raita

h6 — Prices inclusive of GST

03The Paragraph Tag — Normal Text

<p> is for normal body text. The description under each menu item — "Tender mutton cooked with basmati rice in dum style" — that's a paragraph. Not a heading, not a list. Just plain text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Paradise Biryani — Menu</title>
  </head>
  <body>
    <h1>Paradise Biryani — Menu</h1>

    <h2>Main Course</h2>
    <h3>Mutton Biryani</h3>
    <h4>Full Plate — ₹450</h4>
    <p>Tender mutton pieces layered with basmati rice, cooked in dum style with aromatic spices.</p>

    <h3>Chicken Biryani</h3>
    <h4>Full Plate — ₹350</h4>
    <p>Succulent chicken pieces with long-grain basmati rice, sealed and slow-cooked.</p>

    <h2>Desserts</h2>
    <h3>Double Ka Meetha</h3>
    <p>Hyderabadi bread pudding with reduced milk, dry fruits and saffron.</p>
  </body>
</html>

<h1>...</h1>Biggest heading — page title, use once

<h2>...</h2>Section headers — menu categories

<h3>...</h3>Sub-sections — individual items

<h4>...</h4>Details — price, size options

<p>...</p>Normal text — descriptions

04Heading Hierarchy — Visual Flow

Follow the heading hierarchy like a restaurant menu board:

h1 — One TimePage title — like the restaurant signboard

→

h2 — SectionsMain categories — like menu sections

→

h3 to h6 — DetailsSub-items getting smaller — like menu descriptions

Google uses headings to understand your page. If your h1 says "Biryani" but your page is about chai — Google gets confused. Headings must match content. Simple.

05Exercise — Paradise Menu Page

Build a menu page for Paradise Biryani using proper heading hierarchy and paragraphs.

Open VS Code. Create a new file — name it paradise-menu.html

Use the starter code below and build the full menu:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Paradise Biryani — Menu</title>
  </head>
  <body>
    <!-- h1: Restaurant name -->
    <!-- h2: 3 sections -->
    <!-- h3: items under each section -->
    <!-- h4: prices -->
    <!-- p: descriptions -->

  </body>
</html>

Complete these:

One <h1> — "Paradise Biryani — Menu" Three <h2> — "Starters", "Main Course", "Desserts" Under "Main Course", two <h3> — "Mutton Biryani", "Chicken Biryani" Under each biryani, one <p> describing it One <h4> under Mutton Biryani — "Full Plate — ₹450"

💡

Common mistake: Don't use headings just to make text big. If you want big text, use CSS. Headings are for STRUCTURE. This is the #1 mistake beginners make.

Done — Key Points:

✅ <h1> to <h6> — 6 levels of headings
✅ <h1> = most important, use only ONCE per page
✅ Never skip levels — h1 → h2 → h3, not h1 → h4
✅ <p> = paragraph for normal body text
✅ Headings are for structure, NOT for making text bigger
✅ Use CSS to change sizes — headings are for meaning

Previous1.2 — First HTML Page 📋 All Chapters Next Chapter1.4 — Links →