Back

HTML Notes · Lesson 1.2

Headings, Paragraphs & Text Formatting

CODE SCOPE HTML SERIESLESSON 1.2 OF 1.1–1.9

Learn h1 to h6 headings, the one-h1 rule, the p paragraph tag, and text formatting tags like strong, em, mark and code — with examples.

Watch the video Download PDF

Free PDF of this lesson — save it, print it, revise offline. The video is the same lesson on the Code Scope YouTube channel.

Introduction

Open any news page, blog or college notice page: your eyes first catch a big headline, then smaller headlines, then paragraphs of text. That order is not decoration — it is structure, and HTML headings create it. In this lesson you learn the six heading levels, the famous one-h1 rule, the paragraph tag, and the small formatting tags (bold, italic, highlight and friends) that you will use in almost every page you ever write. (Roman Urdu: Heading aur paragraph har page ki buniyaad hain — pehle barri sarakh, phir chhoti sarakhian, phir mutan.)

Key points

  • There are 6 heading levels: <h1> is the biggest, <h6> is the smallest. There is no <h7>.
  • Headings are structure, not just big text. Think of a newspaper: one big headline, smaller headlines under it, then small notes. Google and screen readers read the headings to understand the page's outline.(Roman Urdu: Heading sirf bara text nahi — ye page ka khaaka hai.) Read your headings alone, one after another: they should tell the whole story of the page, like the table of contents of a book.
  • The one-h1 rule: a page has only one <h1> — its main title. Use <h2> for section headings and <h3> for smaller parts inside a section. Like a pyramid: one at the top, more below.
  • Go in order. Do not jump from <h1> straight to <h4> just because you like the size. Size is the browser's job — order is your job.
  • <p> makes a paragraph. The browser automatically leaves some space after each paragraph, so you never need to add empty lines yourself.
  • Text formatting tags come in meaning pairs: The pairs look the same on screen, but they do not mean the same: a screen reader stresses <strong> and <em> text when reading aloud, while <b> and <i> tell it nothing.
    • <strong> = important text (bold with meaning) — use this one.
    • <b> = bold look only, no meaning.
    • <em> = emphasis (italic with meaning) — use this one.
    • <i> = italic look only, no meaning.
  • <br> breaks the line inside a paragraph (no closing tag). <hr> draws a horizontal line to separate sections (no closing tag).
  • Bonus tags from the lesson: <mark> highlights text like a marker pen, <small> makes small text (like a copyright line), <del> shows crossed-out text (old price on a sale), <u> underlines (careful — it looks like a link), <code> shows code in a monospace font.

Code examples

Example 1 — A small article page with a heading pyramid

<h1>My City: Lahore</h1>
<p>Lahore is a famous city of Pakistan.</p>

<h2>Famous Places</h2>
<p>Badshahi Mosque and Lahore Fort are very old.</p>

<h3>Badshahi Mosque</h3>
<p>It was built in 1673.</p>

What it does: One main title (h1), one section (h2), and one sub-section (h3). The page has a clean pyramid structure that Google and screen readers can follow.

What you will see: "My City: Lahore" in the biggest bold text, then a paragraph. "Famous Places" clearly smaller, then a paragraph. "Badshahi Mosque" smaller again, then its line. Your eye understands the order before you read a single word — that is the pyramid working.

Example 2 — Formatting inside a paragraph

<p>Price: <del>Rs 2,000</del> <strong>Rs 1,500</strong> only.
This offer is <em>very</em> important.
<mark>Sale ends on Friday.</mark></p>

What it does: The old price is crossed out, the new price is bold and marked important, one word gets emphasis, and the last line is highlighted like a marker pen.

What you will see: "Rs 2,000" with a line through it, "Rs 1,500" in strong bold, the word "very" leaning in italic, and "Sale ends on Friday." covered with a yellow highlight — exactly like a shop's sale notice.

Example 3 — Line breaks, a section line, and small text

<p>Ali Raza<br>Street 4, Multan Road<br>Lahore</p>
<hr>
<p><small>© 2026 Ali Raza. All rights reserved.</small></p>

What it does: <br> keeps the address lines together inside one paragraph — a new line, but not a new paragraph. <hr> separates the address block from the footer line, and <small> makes the copyright line small.

What you will see: three address lines stacked tightly, one under the other, with no big gaps. Then a thin line across the full width of the page. Under it, the copyright line in noticeably smaller text.

Quick recap

  • Six heading levels: <h1> biggest, <h6> smallest — and only one <h1> per page.
  • Choose headings by order and structure, never by the size you like — sizes are CSS's job later.
  • <p> is a paragraph; the browser adds the space after it itself.
  • <strong> and <em> carry meaning; <b> and <i> only change the look.
  • <br> breaks a line inside a paragraph; <hr> draws a line between sections.
  • Bonus kit: <mark> highlight, <small> small text, <del> crossed-out, <code> code font.

Common mistakes

  1. Many <h1> tags on one page — if everything is the main title, nothing is. Keep one h1, use h2/h3 for the rest.
  2. Choosing a heading by size — picking <h4> only because <h2> "looks too big". Choose by order and structure; change sizes later with CSS.
  3. Making space with empty paragraphs or many <br> tags — spacing is CSS's job. Use <p> for real paragraphs only.

Practice

  1. Take any plain text (a news paragraph or your own 6–8 lines) and turn it into an article page: one h1, two h2 sections, one h3, and a p under each heading.
  2. In that page, make one important line <strong>, one word <em>, one line <mark>, and separate the two sections with an <hr>.