MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
<p>, <br>, <hr>)Welcome to Topic 2.2! 📄
In the previous lesson, you learned how to create bold titles using heading tags (<h1> to <h6>). Now, what about the main body text of your website? How do you write sentences, paragraphs, postal addresses, or poems?
In this lesson, we will explore:
<p>) — for standard body text.<br>) — for jumping to the next line.<hr>) — for drawing neat divider lines.<pre>) — for preserving spaces and poem stanzas.<p>)The <p> tag is used to write paragraphs of text on a webpage.
Whenever you wrap text inside <p>...</p>, the web browser does two automatic things:
In your browser, these two sentences will appear as two distinct paragraphs with a neat gap separating them.
<br>)What if you want to move to the next line without starting a whole new paragraph or adding a large blank gap?
In HTML, pressing Enter on your keyboard does NOT create a new line in your browser. To force the text to jump to the very next line, we use the <br> (Break) tag!
When you write a school or home address, you want each part on a new line, but without big paragraph gaps:
Poems need each rhyming line to appear directly below the previous one:
<br> is an empty (void) element. It does not hold any text inside it, so it never has a closing tag! Just write <br>.<hr>)<hr> stands for Horizontal Rule. It draws a light, straight horizontal line across the width of the webpage.
It is used as a visual divider when you are changing topics or moving from one section to another:
Like <br>, <hr> is also an empty (void) tag and does not require a closing tag.
Many beginner students make this mistake when they start writing HTML:
They type this in their code:
And they expect the browser to show all those spaces and newlines!
Lekin jab woh browser mein dekhte hain, the browser displays:
This behavior is called Whitespace Collapsing.
Web browsers automatically compress multiple consecutive spaces, tabs, and keyboard Enters into just ONE single space.
Whether you press the spacebar 2 times or 50 times, HTML will only display one single space on the screen!
Because it allows developers to indent and format their code neatly with spaces and tabs without accidentally stretching out words on the live webpage.
<pre> Tag (Preformatted Text)What if you really want the browser to preserve your exact spaces, tabs, and line breaks?
That is where the <pre> (Preformatted Text) tag comes to the rescue!
Whatever you write inside <pre>...</pre> will be displayed exactly as you typed it in a clean monospace font (like a typewriter):
<p>, <br>, <hr>, <pre>| Tag | Tag Type | Closing Tag Needed? | Main Purpose |
|---|---|---|---|
<p> | Container | Yes (</p>) | Creates standard body paragraphs with top & bottom margins |
<br> | Empty (Void) | No | Moves text to the next line without extra spacing |
<hr> | Empty (Void) | No | Draws a neat horizontal dividing line across the page |
<pre> | Container | Yes (</pre>) | Preserves exact spaces, tabs, and line breaks as typed |
<br>:<br> when you want a line break.<br> or <hr>:<br></br> or <hr></hr><br> and <hr>.<p> Inside Another <p>:<p>Outer paragraph <p>Inner paragraph</p></p><p>. Always write paragraphs one after another.<p> for regular paragraphs of body text.<p> tags.<br> to break a line (perfect for poems and addresses).<hr> to draw a horizontal dividing line between topics.<br> and <hr> are empty tags and do not need closing tags.<pre> if you need to preserve exact spaces, tabs, and indentation.Test your understanding with these multiple-choice questions:
<p> tag?<hr> tag do when added to a webpage?<p></p> tags just to create vertical spacing between items?index.html in VS Code.<body>, create:<h1> heading: My School & Favorite Poem.<p> paragraph with your school name and postal address separated cleanly using <br>.<hr> divider line.<p> with <br> tags, or using <pre>.Ctrl + S) and view it live in your browser to verify the spacing! 🚀In the next lesson, we will continue your web development journey with Text Formatting Elements (Text Formatting).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| HTML Headings | Text Formatting Elements |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.