OnlineCBT
1. Line Breaks (<br>)
In standard HTML rendering, wrapping text to a new line inside a paragraph or text block requires specific control. When you press Enter inside your code editor, the browser parser treats that line break as a simple single space. To force an explicit carriage return without starting a new paragraph block, HTML provides the <br> element.
The <br> element is a void element (self-closing). It contains no text, requires no closing tag, and injects a single line break directly at its position within the text flow.
When to Use <br> vs. <p>
A common beginner mistake is using multiple consecutive <br> tags (e.g. <br><br><br>) to create large vertical gaps between sections. This is bad practice. The <br> tag should strictly be used when line breaks are an essential part of the content's meaning, such as in postal addresses, poetry, or song lyrics.
<!-- Proper Use Case for Line Breaks -->
<p>
<strong>Corporate Headquarters:</strong><br>
100 Technology Park, Suite 400<br>
Silicon Valley, CA 94025<br>
United States
</p>
Hardcoded Output Result (Rendered View in White Box)
Corporate Headquarters:
100 Technology Park, Suite 400
Silicon Valley, CA 94025
United States
Screen readers read out page content continuously. Inserting extra <br> tags for visual spacing can cause screen readers to announce "blank" repeatedly, annoying visually impaired users. Use CSS margin or padding for structural layout spacing!
2. Horizontal Rules (<hr>)
The <hr> element originally stood for "Horizontal Rule" in legacy HTML, functioning as a simple decorative line across the screen. In modern HTML5, however, the <hr> element has been redefined as a semantic thematic break.
It represents a shift in topic or a transition between scenes within an article, story, or document section. Like <br>, the <hr> tag is a void (self-closing) element.
<!-- Thematic Break Example -->
<section>
<h3>Chapter 1: The Departure</h3>
<p>The ship left the harbor at sunrise, sailing toward unknown waters.</p>
<!-- Semantic Thematic Transition -->
<hr>
<h3>Chapter 2: The Storm</h3>
<p>Three days later, dark clouds covered the sky as waves battered the hull.</p>
</section>
Hardcoded Output Result (Rendered View in White Box)
Chapter 1: The Departure
The ship left the harbor at sunrise, sailing toward unknown waters.
Chapter 2: The Storm
Three days later, dark clouds covered the sky as waves battered the hull.
3. Understanding Whitespace Collapsing
HTML parser engines process whitespace (spaces, tabs, and line returns) using a rule called Whitespace Collapsing. Regardless of how many spaces or line breaks you insert between words inside your HTML code, the browser collapses them into a single space during rendering.
| Whitespace Technique | Browser Parsing Behavior | Best Use Case |
|---|---|---|
| Multiple Spaces in Code | Collapses consecutive spaces into 1 single space. | Allows clean code indentation without affecting output text. |
| Line Returns (Enter Key) | Converted into 1 single space. | Allows wrapping long HTML sentences across lines in code editors. |
(Entity) |
Forces an explicit non-breaking space on screen. | Prevents specific adjacent words from breaking across lines. |
<pre> (Element) |
Preserves all exact spaces, tabs, and line breaks. | Rendering code snippets, ASCII art, or poetry. |
The Non-Breaking Space Entity ( )
If you genuinely need to insert extra spaces or prevent two words from separating across line wraps (such as "100 MB" or "HTML 5"), HTML provides the character entity (Non-Breaking Space).
<!-- Whitespace Collapsing vs Non-Breaking Space --> <!-- Browser collapses 5 spaces into 1 --> <p>Word1 Word2</p> <!-- Forced extra spaces using --> <p>Word1 Word2</p>Hardcoded Output Result (Rendered View in White Box)
Word1 Word2 (Collapsed to 1 space)
Word1 Word2 (5 forced spaces)
4. Preformatted Text (<pre>)
When you need the browser to display text exactly as typed in your code editor—honoring every single space, tab, and line break—you wrap the content in a <pre> (Preformatted Text) block element.
By default, browsers render <pre> blocks using a fixed-width monospace font (like Courier or Consolas) and turn off whitespace collapsing completely.
<!-- Preserving Whitespace with <pre> -->
<pre>
Poem: The Code
Lines of code,
Indented neat,
A quiet build,
A site complete.
</pre>
Hardcoded Output Result (Rendered View in White Box)
Poem: The Code
Lines of code,
Indented neat,
A quiet build,
A site complete.
5. Homework Assignments & Practical Exercises
Create a contact.html page. Use a single <p> tag combined with <br> elements to format a full business address and contact details without using multiple paragraphs. Add an <hr> line separating the address from business hours.
Use the <pre> tag to display a multi-line ASCII art image or a multi-line poem. Verify that all spaces, indents, and line breaks render accurately without needing <br> tags.
Combine learnings from Lessons 01 through 10: Build a complete biographical document containing headings (h1-h3), paragraphs, thematic breaks (hr), and address blocks (br). Validate your page through validator.w3.org and confirm that DevTools displays a clean DOM structure.
6. Frequently Asked Interview Questions
Answer: The <p> element represents a distinct thematic block of narrative text and carries default top/bottom vertical margins. The <br> element is a line break inserted within an existing block of content to force a newline without breaking paragraph context or creating vertical margins.
Answer: Using multiple <br> tags mixes presentational layout with structural HTML markup, violating the separation of concerns principle. It also creates accessibility hazards for screen reader users. Vertical spacing should always be managed using CSS margin or padding properties.
Answer: Through Whitespace Collapsing, the browser parser compresses any sequence of space characters, tabs, or newline carriage returns into a single space during rendering, unless the text is wrapped inside a <pre> tag or formatted with CSS white-space: pre;.
Answer: The (Non-Breaking Space) entity serves two functions: it forces a visible space where whitespace collapsing would otherwise ignore it, and it binds two words together so browser word wrapping will not separate them across lines (e.g. "10 Kms").
