🧱 Days 1–5 – HTML Foundations · Day 02
Day 2: Headings, Paragraphs & Text Formatting
⏱ 60 min📶 Beginner🎯 100% self-study
Day 2 / 15
✅ Today you will learn
- Headings h1–h6 and why order matters
- Paragraphs, line breaks and horizontal rules
- strong vs b, em vs i – meaning vs looks
- mark, small, sub, sup, del, ins, abbr
- Quotes, code and HTML entities
🏢 In the real world
Sharma Sweets needs an “About us” section: the shop’s story, a festive offer that must stand out, the old price crossed out and a customer quote. Today you learn every text tag needed to write it properly – so both people and Google understand it.
Headings h1 to h6
HTML
<h1>Sharma Sweets (h1 – one per page)</h1> <h2>Our Sweets (h2 – main sections)</h2> <h3>Milk Sweets (h3 – sub-section)</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6 – smallest</h6>
⚠️ Headings are an outline, not font sizes
Use one <h1> per page, then h2 for sections and h3 inside them – do not skip levels just to get smaller text. Screen readers and Google use headings like a table of contents. Size is CSS’s job (Day 2 of the CSS course).
Paragraphs, breaks and lines
HTML
<p>Sharma Sweets started in 1985 as a small shop in Johari Bazaar.</p> <p>Today we make over 60 sweets every day.<br>Open 8 AM – 10 PM.</p> <hr> <p>Free delivery above ₹999 within Jaipur.</p>
Meaning vs looks
Semantic (meaning)
- <strong> – important
- <em> – stressed emphasis
- <mark> – highlighted / relevant
- Screen readers change voice
Presentational (looks only)
- <b> – bold, no extra meaning
- <i> – italic, e.g. a Hindi word
- <u> – underline (looks like a link!)
- Prefer CSS for pure styling
HTML
<p><strong>Warning:</strong> contains nuts.</p> <p>Our kaju katli is <em>really</em> fresh.</p> <p>Try our <i lang="hi">ghewar</i> – a Jaipur special.</p> <p>Diwali offer: <mark>20% off all gift boxes</mark></p> <p>Price: <del>₹1,200</del> <ins>₹960</ins> per box</p> <p><small>*Offer valid till 31 October.</small></p> <p>Water is H<sub>2</sub>O and 10<sup>3</sup> = 1000.</p> <p><abbr title="Goods and Services Tax">GST</abbr> included.</p>
Quotes, code and preformatted text
HTML
<blockquote cite="https://example.com/reviews"> <p>“Best rasmalai in Jaipur – we order every Diwali!”</p> <footer>— Meena Gupta, Google review</footer> </blockquote> <p>Our motto is <q>fresh every morning</q>.</p> <p>Type <kbd>Ctrl</kbd> + <kbd>S</kbd> to save. The tag is <code><p></code>.</p> <pre> Opening hours Mon–Sat : 8 AM – 10 PM Sunday : 9 AM – 9 PM </pre>
HTML entities
| You want | Write | Why |
|---|---|---|
| < and > | < > | Otherwise the browser thinks it is a tag |
| & | & | Starts every entity |
| non-breaking space | | Keep “₹ 500” on one line |
| © ® ™ | © ® ™ | Footer and brands |
| ₹ | ₹ or ₹ | With UTF-8 you can type it directly |
HTML
<p>5 < 10 and 10 > 5</p> <p>Sharma & Sons</p> <p>© 2026 Sharma Sweets. Price ₹ 500 ₹</p>
Real example: the About us section
HTML
<h1>Sharma Sweets</h1> <h2>About us</h2> <p>Started by <strong>Ramesh Sharma</strong> in 1985, we have served Jaipur for almost <em>40 years</em>. Every sweet is made fresh each morning with pure desi ghee.</p> <h3>Festive offer</h3> <p><mark>Diwali gift box</mark> – <del>₹1,200</del> <strong>₹960</strong> <small>(till 31 Oct)</small></p> <blockquote><p>“The kaju katli tastes exactly like my childhood.”</p><footer>— Arjun, Delhi</footer></blockquote> <p><small>© 2026 Sharma Sweets · <abbr title="Food Safety and Standards Authority of India">FSSAI</abbr> licence 1221900</small></p>
🏅 Job skills unlocked today
✔ Structure content with a correct heading outline✔ Choose semantic text tags✔ Write quotes, code and preformatted text✔ Use HTML entities
Practice tasks
🏋️ Practice – do it yourself
Task 1: Write a recipe page for “Masala Chai” with h1, two h2 sections (Ingredients, Method), a highlighted tip and a crossed-out old cooking time.
Show solution
HTML
<h1>Masala Chai</h1> <h2>Ingredients</h2> <p>Water, milk, tea leaves, ginger, cardamom and sugar.</p> <h2>Method</h2> <p>Boil water with crushed ginger and cardamom, add tea and milk, simmer for <del>10</del> <ins>5</ins> minutes.</p> <p><mark>Tip:</mark> crush the cardamom just before adding it.</p>
Task 2: Display this exactly on a page:
<h1>Hello</h1> (as text, not as a heading).Show solution
HTML
<p>To make a heading write <code><h1>Hello</h1></code></p>
Task 3: Add a poem with four lines using <pre> and then using <p> with <br>. Which is better for poems?
Quick quiz
🧠 Quick Quiz – test yourself
1. How many h1 headings should a page usually have?
The main title of the page.
2. Which tag marks important text?
strong carries meaning.
3. To show a crossed-out old price use…
del = deleted text.
4. < displays…
Less-than sign.
5. Which keeps spaces and line breaks exactly?
Preformatted text.
Interview corner
💼 Interview Corner
Difference between <strong> and <b>?
<strong> marks text as important (semantic – read with emphasis by screen readers); <b> only draws attention visually without extra importance. Both look bold by default.
Why should heading levels not be skipped?
Headings form the document outline used by screen-reader users to navigate and by search engines to understand structure. Skipping levels breaks that outline.
Summary
- One h1, then h2/h3 as an outline.
- p for paragraphs, br for line breaks, hr for a topic change.
- strong/em/mark for meaning; del/ins, sub/sup, small, abbr for special text.
- blockquote, q, code, kbd, pre and entities like < and ©.
➡️ Next
Day 3: links and navigation – connect pages, call and WhatsApp buttons, and a menu bar.
Frequently Asked Questions
Can I use h2 because h1 is too big?
No – choose the heading by meaning and change its size with CSS.
Can I write Hindi text directly?
Yes. With <meta charset="UTF-8"> and lang="hi" on that element, Hindi displays and is read correctly.
