Learning Goals
3 minBy the end of this lesson you will be able to:
- Use the heading hierarchy
<h1>–<h6>to organise a page. - Add meaning with
<strong>(important) and<em>(stressed). - Use the void elements
<br />and<hr />for breaks and dividers. - Write an HTML comment the browser ignores, and read any site with View Source.
Warm-Up · Predict the Page
5 minLast lesson you used <h1>, <h2> and <p>. Read this snippet and predict how it looks before you reveal the answer:
<p>Roti canai is <strong>RM 1.50</strong> today.</p>
<p>Please come <em>early</em> — we sell out fast.</p>Talk together (or think quietly)
- Which words will look bold, and which will look slanted?
- Both
<strong>and<em>wrap only part of a sentence. How is that different from<p>?
Hint
<strong> makes RM 1.50 bold; <em> makes early slanted. Unlike <p>, they sit inside a line and only affect the words they wrap — we call these inline elements.
New Concept · Headings, Emphasis & Breaks
12 minThink of a page like the contents page of a school textbook. One big title at the top, then chapter titles, then smaller sub-headings underneath. HTML gives you six heading sizes for exactly this.
The heading hierarchy
<h1> is the biggest and most important; <h6> is the smallest. Use one <h1>per page (the page's main title), then nest the rest in order — don't skip from <h1> straight to <h4>.
<h1>Pasar Malam Guide</h1>
<h2>Food Stalls</h2>
<h3>Drinks</h3>
<h3>Snacks</h3>
<h2>Opening Times</h2>Emphasis: strong vs em
<strong>
Marks text as important. The browser shows it bold. Use it for a price, a warning, or a key word.
<em>
Marks text you would stress if reading aloud. The browser shows it italic. Use it for a word you want to emphasise.
Both are inline — they wrap a few words inside a line, unlike <p> or headings which start a fresh block on their own line.
Void elements: br and hr
Some tags have no content, so they have no closing tag. We call them void elements and write them self-closed with a slash:
<br />— a single line break, like pressing Enter once.<hr />— a horizontal rule: a divider line between sections.
Use <br />sparingly — for an address or a poem, not to fake gaps between paragraphs. That's what separate <p> elements are for.
Comments: notes the browser ignores
A commentis a note for you, the author. The browser skips it completely — visitors never see it. It's perfect for labelling sections of your file:
<!-- Menu starts here -->Why it matters:good structure isn't decoration. Screen readers for blind users, Google's search, and your future self all rely on headings being in order and emphasis meaning something. Tidy text today saves real trouble later.
Worked Example · A Deepavali Open House Invite
12 minPriya is hosting a Deepavali open house in Ipoh and wants a simple invite page. Open VS Code, create priya-deepavali.html, type the skeleton from last lesson, then fill the body like this:
Step 1 — Structure with headings
One <h1> for the title, then <h2> sub-headings for each part:
<body>
<!-- Invitation page for Priya's open house -->
<h1>Deepavali Open House</h1>
<p>You are <strong>warmly invited</strong> to celebrate with us!</p>
<h2>When & Where</h2>
<p>
Saturday, 7.00pm onwards<br />
12 Jalan Pasar, Ipoh
</p>
<hr />
<h2>On the Menu</h2>
<p>Banana-leaf rice, <em>fresh</em> muruku, and teh tarik — all free!</p>
</body>Step 2 — Open it in the browser
Double-click the file. It renders like this:
<br /> keeps the address on two lines inside one paragraph, and <hr /> draws the divider. The comment on line two never appears.Step 3 — The View Source tour
Now peek at a real site. Visit kfc.com.my, right-click an empty area, and choose View page source. A new tab shows the raw HTML the server sent. Use Ctrl+F to search for <h1 or <title— you'll find the very same tags you just wrote, hidden inside a page millions of people use.
What changed? You moved from a flat list of paragraphs to a page with real shape — headings, emphasis and dividers — exactly how professional pages are built.
Try It Yourself
13 minKeep priya-deepavali.html open. Save (Ctrl+S) and refresh (Ctrl+R) after each task.
Task 1 — Add a sub-section
Under On the Menu, add an
<h3>reading Drinks and a paragraph listing two drinks. Check the<h3>looks smaller than the<h2>above it.Task 2 — Emphasise the right words
Make the word free appear as
<strong>(it's important!), and make one food name<em>. Decide which is “important” and which is “stressed” — they are not the same.Task 3 — Leave yourself a note
Add an HTML comment above the address reminding yourself to double-check the time, e.g.
<!-- confirm start time with Amma -->. Save, refresh, and confirm it does not appear on the page.
Mini-Challenge · Bug Hunt
8 minFaiz wrote a notice for his class but it renders wrongly: the bold runs on forever and a note is showing that shouldn't. There are two bugs. Find them before revealing the fix.
Success criterion: only the words 2.30pm are bold, and the reminder note is invisible to readers.
<!-- faiz-notice.html — buggy -->
<body>
<h1>Class Outing</h1>
<p>Meet at the school gate at <strong>2.30pm.</p>
<p>Bring RM 10 for the bus.</p>
<!-- remind everyone to bring water -->
<p>Don't forget water bottles!</p>
< !-- teacher note: check the weather -->
</body>Reveal the answer
Bug 1: the <strong> is never closed, so everything after 2.30pm turns bold. Add </strong> right after 2.30pm. Bug 2: the last comment has a space after < (< !--), so it isn't a real comment and its text leaks onto the page. Remove the space. Fixed version:
<body>
<h1>Class Outing</h1>
<p>Meet at the school gate at <strong>2.30pm</strong>.</p>
<p>Bring RM 10 for the bus.</p>
<!-- remind everyone to bring water -->
<p>Don't forget water bottles!</p>
<!-- teacher note: check the weather -->
</body>Two lessons: close every inline tag, and a comment must start with exactly <!-- — no space.
Recap
3 min- Headings run
<h1>(biggest) to<h6>(smallest). One<h1>per page; don't skip levels. <strong>marks important text (bold);<em>marks stressed text (italic).- Those are inline — they wrap words inside a line; headings and
<p>are block elements on their own line. - Void elements have no content or closing tag:
<br />(line break),<hr />(divider). - A comment
<!-- … -->is a note the browser ignores — start it with exactly<!--. - View page source shows the raw HTML of any site — great for learning.
New words
- Inline element — wraps text inside a line (e.g.
<strong>,<em>). - Block element — starts on its own line (e.g.
<p>,<h2>). - Void element — has no content and no closing tag (e.g.
<br />). - Comment — author-only note the browser skips.
Homework
4 min to brief · ~20 min to doRequired
- Make a file
my-event.htmlinviting friends to a real or made-up event (a birthday, a football match, a Hari Raya open house). Use one<h1>, at least two<h2>sections, one<strong>, one<em>, one<hr />, and at least one<br />in an address. - Add one HTML comment labelling a section. Open the page, take a screenshot, and bring the file and screenshot to next lesson.
Optional stretch
- Open View page source on a Malaysian site you like (
astro.com.my,mrdiy.com.my). Use Ctrl+F to find one<h1>and one<strong>. Write down the text inside each. - Try every heading from
<h1>to<h6>on one line each. Note which is the first that looks smaller than normal paragraph text.