🧱 Days 1–5 – HTML की नींव · दिन 02
दिन 2: Headings, Paragraphs और Text Formatting
⏱ 60 min📶 Beginner🎯 100% self-study
दिन 2 / 15
✅ आज आप सीखेंगे
- Headings h1–h6 और क्रम क्यों ज़रूरी
- Paragraphs, line breaks और horizontal rules
- strong vs b, em vs i – अर्थ vs दिखावट
- mark, small, sub, sup, del, ins, abbr
- Quotes, code और HTML entities
🏢 असली दुनिया में
Sharma Sweets को “About us” section चाहिए: दुकान की कहानी, उभरकर दिखने वाला festive offer, कटी हुई पुरानी कीमत और एक customer quote। आज आप इसे सही से लिखने के लिए हर text tag सीखेंगे – ताकि लोग और Google दोनों समझें।
Headings h1 से 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 outline हैं, font sizes नहीं
हर page पर एक <h1>, फिर sections के लिए h2 और उनके अंदर h3 – छोटे text के लिए levels न छोड़ें। Screen readers और Google headings को विषय-सूची की तरह इस्तेमाल करते हैं। Size CSS का काम है।
Paragraphs, breaks और 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>
अर्थ vs दिखावट
Semantic (अर्थ)
- <strong> – ज़रूरी
- <em> – ज़ोर देकर
- <mark> – highlight / प्रासंगिक
- Screen readers आवाज़ बदलते हैं
Presentational (सिर्फ़ दिखावट)
- <b> – bold, कोई extra अर्थ नहीं
- <i> – italic, जैसे Hindi शब्द
- <u> – underline (link जैसा दिखता है!)
- सिर्फ़ styling के लिए CSS लें
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 और 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
| चाहिए | लिखें | क्यों |
|---|---|---|
| < और > | < > | वरना browser इसे tag समझेगा |
| & | & | हर entity इससे शुरू |
| non-breaking space | | “₹ 500” एक line में रखें |
| © ® ™ | © ® ™ | Footer और brands |
| ₹ | ₹ या ₹ | UTF-8 के साथ सीधे लिख सकते हैं |
HTML
<p>5 < 10 and 10 > 5</p> <p>Sharma & Sons</p> <p>© 2026 Sharma Sweets. Price ₹ 500 ₹</p>
असली example: 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
✔ सही heading outline से content का ढाँचा✔ Semantic text tags चुनना✔ Quotes, code और preformatted text लिखना✔ HTML entities इस्तेमाल करना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: “Masala Chai” का recipe page लिखें: h1, दो h2 sections (Ingredients, Method), एक highlight tip और कटा हुआ पुराना cooking time।
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: Page पर बिल्कुल यही दिखाएँ:
<h1>Hello</h1> (text की तरह, heading की तरह नहीं)।Solution देखें
HTML
<p>To make a heading write <code><h1>Hello</h1></code></p>
Task 3: <pre> से और फिर <br> वाले <p> से चार lines की कविता लिखें। कविताओं के लिए कौन बेहतर?
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. Page पर आमतौर पर कितनी h1 headings हों?
Page का मुख्य title।
2. ज़रूरी text कौन सा tag दर्शाता है?
strong अर्थ रखता है।
3. कटी हुई पुरानी कीमत दिखाने के लिए…
del = हटाया गया text।
4. < क्या दिखाता है?
Less-than चिह्न।
5. कौन spaces और line breaks जैसे के तैसे रखता है?
Preformatted text।
Interview corner
💼 Interview Corner
<strong> और <b> में फ़र्क?
<strong> text को ज़रूरी बताता है (semantic – screen readers ज़ोर देकर पढ़ते हैं); <b> बिना extra महत्व के सिर्फ़ दिखने में ध्यान खींचता है। Default में दोनों bold दिखते हैं।
Heading levels क्यों नहीं छोड़ने चाहिए?
Headings document outline बनाती हैं जिससे screen-reader users navigate करते हैं और search engines ढाँचा समझते हैं। Levels छोड़ने से outline टूटती है।
सारांश
- एक h1, फिर outline की तरह h2/h3।
- Paragraphs के लिए p, line break के लिए br, विषय बदलने के लिए hr।
- अर्थ के लिए strong/em/mark; ख़ास text के लिए del/ins, sub/sup, small, abbr।
- blockquote, q, code, kbd, pre और <, © जैसी entities।
➡️ आगे
Day 3: links और navigation – pages जोड़ें, call और WhatsApp buttons, और menu bar।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
h1 बहुत बड़ा है, तो h2 लूँ?
नहीं – heading अर्थ से चुनें और size CSS से बदलें।
क्या सीधे Hindi text लिख सकते हैं?
हाँ। <meta charset="UTF-8"> और उस element पर lang="hi" के साथ Hindi सही दिखती और पढ़ी जाती है।
