TrueVacancy Academy

HTML, CSS & JavaScript · Chapter 1.1 · Basic level

The Tiffin Box Rule (Tags & Headings)

टिफिन बॉक्स का नियम (टैग्स और हेडिंग्स)

Welcome to your very first coding class! Every website in the world (Google, YouTube, Flipkart) starts with HTML — the skeleton of a webpage. Think of an HTML tag like a school tiffin box: first you open the box (<h1>), put your text inside, and then close the box (</h1>). Notice the forward slash / in the closing tag — that / tells the browser 'the box is closed here!'

आपकी पहली कोडिंग क्लास में स्वागत है! दुनिया की हर वेबसाइट (Google, YouTube, Amazon) सबसे पहले HTML से बनती है — यह वेबसाइट का ढाँचा (हड्डियाँ) है। HTML टैग को स्कूल के टिफिन बॉक्स जैसा समझो: पहले टिफिन खोलते हैं (<h1>), अंदर अपनी बात लिखते हैं, और फिर टिफिन बंद करते हैं (</h1>)। बंद करने वाले टैग में हमेशा तिरछी लाइन (/) लगती है!

Open this chapter in the live classroomHTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

< >
Angle brackets — every HTML command lives inside < and >.
कोणीय ब्रैकेट — HTML का हर टैग < और > के अंदर बंद होता है।
<h1>
Opening Heading-1 tag — starts the biggest main title (h1 biggest → h6 smallest).
सबसे बड़ी हेडिंग शुरू करने का टैग (h1 सबसे बड़ा → h6 सबसे छोटा)।
</h1>
Closing Heading-1 tag — the slash / closes the <h1> tiffin box!
हेडिंग बंद करने का टैग — स्लैश / बताता है कि <h1> डिब्बा यहाँ बंद हो गया!
<h3>
Medium sub-heading (smaller than <h1>, bigger than normal text).
मझोले आकार की उप-हेडिंग (<h1> से छोटी, सामान्य टेक्स्ट से बड़ी)।
<p> ... </p>
Paragraph tag — used for writing normal sentences on a webpage.
पैराग्राफ टैग — वेबपेज पर सामान्य वाक्य लिखने के लिए।

Ready example

<h1>TrueVacancy Coding School</h1>
<h3>Yahan coding seekhna khel hai!</h3>
<p>Main aaj apni pehli website bana raha hun.</p>

What you will see: On the right browser window, you immediately see a real webpage with a large bold heading, a subtitle, and a paragraph!

दाईं तरफ़ ब्राउज़र विंडो में तुरंत एक असली वेबपेज दिखेगा — बड़े बोल्ड अक्षरों में टाइटल और नीचे पैराग्राफ!

Line by line

<h1>TrueVacancy Coding School</h1>
Creates the biggest bold title on the page, then closes with </h1>.
<h1> से सबसे बड़ा मुख्य टाइटल शुरू किया और </h1> से बंद किया।
<h3>Yahan coding seekhna khel hai!</h3>
Adds a medium-sized subtitle underneath.
<h3> से उसके नीचे मध्यम आकार की सब-हेडिंग लिखी।
<p>Main aaj apni pehli website bana raha hun.</p>
Writes a clean normal paragraph line.
<p> के अंदर सामान्य पैराग्राफ लाइन लिखी और </p> से बंद किया।

Common mistake

✗ Wrong

<h1>Mera Naam<h1>

✓ Right

<h1>Mera Naam</h1>

Forgetting the forward slash / in the closing tag leaves the heading box open forever, making the whole page giant!

बंद करने वाले टैग में स्लैश / भूलने (<h1>) से हेडिंग बंद नहीं होती और नीचे का सारा टेक्स्ट बड़ा हो जाता है!

Your task

Write your own name inside <h1>...</h1> and your city name inside <p>...</p>, then click ▶ Run & Preview!

<h1>...</h1> के अंदर अपना नाम लिखो और <p>...</p> के अंदर अपने शहर (City) का नाम लिखकर ▶ Run & Preview दबाओ!

  1. Line 1: Type <h1> followed by your name and close with </h1>.
    लाइन 1: <h1> लिखो, फिर अपना नाम लिखो, और </h1> से बंद करो।
  2. Line 2: Type <p> followed by your city name and close with </p>.
    लाइन 2: <p> लिखो, फिर अपने शहर का नाम लिखो, और </p> से बंद करो।
  3. Click ▶ Run & Preview to see your webpage live!
    ▶ Run & Preview बटन दबाकर अपना वेबपेज लाइव देखो!
Starter code for the task
<!-- TODO 1: Khaali h1 heading ke beech apna naam likho -->
<!-- TODO 2: Uske neeche ek p (paragraph) banao jisme apne shehar ka naam ho -->
<h1></h1>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

Quick quiz

Which symbol tells the browser that an HTML tag is CLOSED?

कौन-सा चिह्न ब्राउज़र को बताता है कि HTML टैग बंद (Close) हो गया है?

  1. \
  2. /
  3. :
  4. ;
Show the answer

Answer: B (/)

Forward slash / inside </h1> or </p> closes the tiffin-box tag!

फॉरवर्ड स्लैश / (जैसे </h1>) बताता है कि टैग यहाँ बंद हो गया है!

Practice problems for this chapter

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.