TrueVacancy Academy

HTML, CSS & JavaScript · Chapter 1.2 · Basic level

Text Styling & Line Break (<b>, <i>, <u>, <br>, <hr>)

टेक्स्ट सजाना और नई लाइन (<b>, <i>, <u>, <br>, <hr>)

Notice one surprise in HTML: pressing Enter in your code does NOT start a new line on the webpage! To jump to a new line, we use <br> (Break). And to highlight special words, we wrap them in <b> (Bold), <i> (Italic), or <u> (Underline). Note: <br> and <hr> are empty/self-closing tags — nothing goes inside them, so they never need </br>!

HTML की एक मज़ेदार बात सुनो: कोड में सिर्फ़ Enter दबाने से वेबपेज पर नई लाइन नहीं बनती! अगली लाइन में जाने के लिए <br> (Break) लगाते हैं। और खास शब्दों को सजाने के लिए <b> (मोटा/Bold), <i> (तिरछा/Italic), और <u> (अंडरलाइन) इस्तेमाल करते हैं। याद रखो: <br> और <hr> आज़ाद टैग हैं — इनमें </br> नहीं लगता!

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

<b> ... </b>
Bold — makes important words thick and dark.
Bold (मोटा) — खास शब्दों को मोटा और गहरा दिखाने के लिए।
<i> ... </i>
Italic — slants text slightly for style or titles.
Italic (तिरछा) — शब्दों को थोड़ा तिरछा और सुंदर दिखाने के लिए।
<u> ... </u>
Underline — draws a line right under the text.
Underline — शब्द के नीचे रेखा खींचने के लिए।
<br>
Line Break — jumps to the next line (no closing tag </br> needed!).
Line Break — अगली लाइन में जाने के लिए (इसमें </br> नहीं लगता)।
<hr>
Horizontal Rule — draws a clean divider line across the whole page.
Horizontal Rule — पूरे पेज के बीच एक सीधी विभाजक लकीर खींचता है।

Ready example

<p>Virat Kohli ek <b>Superstar</b> cricketer hain.<br>Unhe <i>Chase Master</i> aur <u>King Kohli</u> bhi kehte hain.</p>
<hr>
<p>Favourite Subject: <b>Computer Science</b><br>School: <i>Kendriya Vidyalaya</i></p>

What you will see: Bold, italic, and underlined words stand out clearly, <br> starts a new line, and <hr> draws a neat divider!

प्रिव्यू में शब्द बोल्ड, इटैलिक और अंडरलाइन होकर चमकेंगे, <br> से नई लाइन बनेगी और <hr> से सीधी लकीर!

Line by line

<b>Superstar</b>
Makes the word 'Superstar' bold inside the sentence.
'Superstar' शब्द को मोटा (Bold) बनाता है।
<br>
Breaks the line so the next sentence starts on a fresh line.
यहाँ से अगली लाइन शुरू करता है।
<i>Chase Master</i> ... <u>King Kohli</u>
Makes 'Chase Master' italic and underlines 'King Kohli'.
'Chase Master' को तिरछा और 'King Kohli' को अंडरलाइन करता है।
<hr>
Draws a horizontal divider line across the page.
पेज पर एक आड़ी सुंदर लाइन खींचता है।

Common mistake

✗ Wrong

Line 1
Line 2 (sirf Enter dabaya)

✓ Right

Line 1 <br>
Line 2

HTML ignores plain Enter line-breaks in code — always put <br> where you want a new line on screen.

HTML कोड में सिर्फ़ Enter दबाने को अनदेखा कर देता है — स्क्रीन पर नई लाइन के लिए <br> लगाना ज़रूरी है।

Your task

Write your favourite subject inside <b>...</b>, put <br>, and on the next line write your school name inside <i>...</i>.

<b>...</b> में अपना पसंदीदा विषय लिखो, फिर <br> लगाओ, और अगली लाइन में <i>...</i> के अंदर अपने स्कूल का नाम लिखो।

  1. Wrap your favourite subject inside <b> and </b>.
    अपने पसंदीदा सब्जेक्ट को <b> और </b> के बीच लिखो।
  2. Add <br> to jump to the next line.
    अगली लाइन में जाने के लिए <br> लिखो।
  3. Wrap your school name inside <i> and </i>, then click ▶ Run & Preview!
    स्कूल के नाम को <i> और </i> के बीच लिखकर ▶ Run & Preview दबाओ!
Starter code for the task
<!-- TODO 1: Favourite subject (Science) ko b tag mein band karo (bold) -->
<!-- TODO 2: Subject wali line ke baad br tag lagao (nayi line) -->
<!-- TODO 3: School ka naam i tag mein band karo (italic) -->
<p>
  Mera Favourite Subject: Science
  Mera School: Delhi Public School
</p>
<hr>

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

Recap

Quick quiz

Which tag moves text to the NEXT line without needing a closing tag?

बिना क्लोजिंग टैग के अगली लाइन में जाने के लिए कौन-सा टैग लगता है?

  1. <hr>
  2. <next>
  3. <br>
  4. <b>
Show the answer

Answer: C (<br>)

<br> stands for Line Break and is a self-closing empty tag.

<br> (Line Break) अगली लाइन शुरू करता है और इसमें </br> नहीं लगता।

Practice problems for this chapter

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