ReviseAlgo Logo

HTML Basics

Paragraphs

Master HTML paragraphs (p), line breaks (br), and horizontal rules (hr) to structure body copy, spacing, and content grouping.

Last Updated: July 15, 2026 • 6 min read

1. Learning Objectives

In this lesson, you will master body copy formatting. By the end of this topic, you will be able to:

  • Implement paragraph elements (<p>) to wrap text content.
  • Use line breaks (<br>) and horizontal rules (<hr>) appropriately.
  • Understand the browser's default behavior for collapsing whitespace in HTML.
  • Use preformatted text blocks (<pre>) when spacing must be preserved.

2. Overview

Paragraphs are structured using the <p> element. Browsers automatically wrap paragraphs with a default block-level margin (spacing before and after). Within a paragraph, the browser collapses multiple consecutive spaces or line breaks into a single space. To force inline breaks or thematic section rules, you use the self-closing <br> and <hr> tags.

3. Why This Topic Matters

How you wrap text content impacts visual stability and layout responsiveness:

  • Formatting Issues: Forgetting that HTML collapses whitespace can result in broken layouts when text formatting is expected to follow spacing in the code.
  • Semantic Separation: Using screen-reader-friendly tags ensures screen readers pause slightly between paragraphs, creating a better user experience.

4. Real-World Analogy

Think of formatting a **page layout like printing a newspaper article**:

  • Paragraph blocks (P): Columns of text separated by physical spacing.
  • Line breaks (BR): A forced carriage return on the printing press that starts a new line without starting a new column block.
  • Horizontal Rule (HR): A physical ink line drawn across the page to mark the end of one news article and the start of another.

5. Core Concepts

Tag Closing Tag Requirement Display Mode
<p> Yes (</p>) Block-level (takes full width, adds vertical margin)
<br> No (Self-closing / Void element) Inline break
<hr> No (Self-closing / Void element) Block-level divider line

6. Syntax & API Reference

Paragraph tags surround the text block, while breaks are inserted inline at specific wrapping coordinates:

7. Visual Diagram

This diagram displays block layout formatting and line margins added by paragraphs:

8. Live Example — Full Working Code

A sample showing whitespace collapsing, preformatted text, and dividers:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the preformatted poem text inside the <pre> block to display a simple ASCII art box.
  2. Test what happens if you place block-level heading elements inside a paragraph tag.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Using BR for spacing margins Inserting multiple br tags to create vertical space. <p>Para</p><br><br><p>Next</p> Use CSS margins: p { margin-bottom: 24px; }

11. Best Practices

  • Keep spacing in CSS: Never use <br><br> to create visual spacing between content blocks. Spacing is the domain of CSS margins and padding.
  • Do not wrap images in raw paragraphs: Keep images outside paragraphs or wrap them in semantic <figure> containers.
  • Validate void tag close: Self-closing tags in HTML5 do not require a trailing slash (e.g. <br> is preferred over <br />).

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
Paragraph and breaks support Supported Supported Supported Supported

13. Interview Questions

Q1: How does a browser handle multiple white spaces in an HTML file?

Answer: Browsers apply the white-space collapsing rule. Any consecutive spaces, tabs, or new lines inside standard HTML tags are parsed and rendered as a single space. To override this, use CSS (e.g. white-space: pre) or the <pre> element.

14. Debugging Exercise

Identify and fix the bugs in this layout snippet:

View Solution

Bug: HTML elements like paragraphs (<p>) cannot contain nested block-level elements (like other paragraphs). Nesting paragraphs causes the browser to close the first paragraph automatically, creating an orphaned layout structure.

15. Practice Exercises

Exercise 1: Standard Article Layout

Build a simple document section containing a main title, a horizontal line break, and two separate paragraph sections separated by visual margins.

16. Scenario-Based Challenge

The Code Documentation Formatting Challenge:

You are designing a technical blog site that displays programming code blocks and output results. Users complain that code indentations are completely collapsed into a single line. Explain why using the <pre> tag resolved this spacing bug.

17. Quick Quiz

Q1: Which element is used to insert a visual thematic horizontal break line?

A) <br>

B) <hr>

C) <line>

Answer: B — The <hr> tag inserts a thematic horizontal rule line.

18. Summary & Key Takeaways

  • • Use <p> to wrap textual paragraph copy.
  • • Browsers automatically collapse spaces inside standard HTML text.

19. Cheat Sheet

Element Default Layout Formatting
<pre> Preserves raw white spaces and code styling.