Lesson 1 of 14 · about 12 minutes · Tags, the building blocks of every web page.
⚡ 0 XP
Step 1 of 2
What is a tag?
A web page is written in HTML. HTML wraps text in tags that tell the browser what each piece is.
<h1> … </h1> is the biggest heading
<p> … </p> is a paragraph
Most tags come in pairs: an opening tag <p> and a closing tag </p> with a slash. The opening tag, the content and the closing tag together are called an element.
Example
<h1>Sharma Chai Stall</h1>
<p>Fresh adrak chai since 1998.</p>
The browser shows the heading big and bold, and the paragraph as normal text.
🎯 Challenge: Name your stall +10 XP
Write an <h1> heading with the name of a chai stall, and below it a <p> paragraph that describes it.
Try twice to unlock the solution (0/2)
index.htmlCtrl ⏎
Preview
Console
Output from console.log appears here.
Checklist
Press Run to check your code.
○
There is an <h1> heading with some text
○
There is a <p> paragraph with some text
○
The heading comes before the paragraph
Lesson notes (text version)
1. What is a tag?
A web page is written in HTML. HTML wraps text in tags that tell the browser what each piece is.
<h1> … </h1> is the biggest heading
<p> … </p> is a paragraph
Most tags come in pairs: an opening tag <p> and a closing tag </p> with a slash. The opening tag, the content and the closing tag together are called an element.
<h1>Sharma Chai Stall</h1>
<p>Fresh adrak chai since 1998.</p>
Challenge: Name your stall
Write an <h1> heading with the name of a chai stall, and below it a <p> paragraph that describes it.
2. Heading levels and bold text
HTML has six heading levels, from <h1> (most important) to <h6> (least important). Think of a newspaper: one big headline (<h1>), then section titles (<h2>), then smaller titles (<h3>).
Use one<h1> per page — the page’s main title
Use <h2> for each section below it
<strong> makes words important (shown bold)
<em> adds emphasis (shown in italics)
Pick headings by meaning, not by size. Screen readers and Google use them to understand your page.
<h1>Sunrise Public School</h1>
<h2>Sports Day</h2>
<p>Sports Day is on <strong>Friday, 14 November</strong>.</p>
<h2>Library</h2>
<p>Please return books <em>before</em> the holidays.</p>
Challenge: School notice board
Make a notice board page. Keep the single <h1>. Add at least two<h2> sections (for example "Exams" and "Annual Function"), each followed by a <p>. Make one important word or date bold using <strong>.