HTML Course 4.1 Paragraphs (p) and line breaks (br)

HTML Course 4.1: Paragraphs (<p>) and Line Breaks (<br>)

The <p> element defines a block of text (a paragraph). Browsers typically add vertical margins before and after each paragraph. In contrast, the <br> element forces a line break without creating a new block.

1. The <p> Element

• Block-level element: Occupies full width, starts on a new line.
• Content model: Text, inline elements (links, <em>, <strong>, etc.).
• Default styling: Browsers apply top and bottom margins; exact values depend on browser user agent stylesheet.
• Semantic meaning: Groups sentences that form a single unit of thought.
• Closing tag: Required in HTML5 (optional in older HTML, but best practice to include).

Example: Basic Paragraphs

This is the first paragraph. It introduces the topic.

This is the second paragraph. It continues the discussion with more detail.

Whitespace and Line Breaks in <p>

• Consecutive spaces, tabs, and line breaks collapse into a single space.
• To preserve intentional line breaks inside a paragraph, use <br> or wrap text in <pre> (for preformatted text).

2. The <br> Element

• Inline, void element: Inserts a line break immediately.
• No closing tag: Self-closing by definition.
• Use case: Poems, addresses, postal forms, or any content that requires single line breaks without starting a new paragraph.
• Avoid overuse: For vertical spacing, prefer margins or CSS rather than multiple <br>s.

Example: Using <br> for Line Breaks

  This is a postal address:

  123 Main Street

  Springfield, XY 12345



  Here is a poem stanza:

  Twinkle, twinkle, little star,

  How I wonder what you are!

  Up above the world so high,

  Like a diamond in the sky.

3. Comparing <p> vs. <br>

4. Best Practices

• Use <p> to separate blocks of text semantically, rather than multiple <br>s.
• Reserve <br> for line breaks within an existing block where the break is meaningful (addresses, poems, lyrics).
• Manage spacing with CSS margins or padding, not with empty paragraphs or chains of <br>s.
• Always close your <p> tags to maintain clear, valid HTML.

5. Advanced Details

• Empty paragraphs (<p></p>) may collapse or be ignored by browsers; to force an empty line, insert a non-breaking space:  .
• Within a <figure> or <article>, multiple <p> elements structure text into discrete units.
• Screen readers announce a paragraph break, improving accessibility; line breaks via <br> are also announced but without paragraph context.

Example: Forcing an Empty Line

First paragraph with content.

 
 

Second paragraph after a blank line.