Paragraphs & Text

Difficulty: Beginner

The element is the workhorse of HTML text content. It represents a paragraph - a block of related text separated from surrounding content by vertical space. Paragraphs are block-level elements, meaning each starts on a new line and has default margin above and below it (typically around 16px in most browsers). You should wrap every distinct unit of text content in a tag rather than leaving loose text directly in the body.

The element creates a line break within text content. It is a void element (no closing tag required). Use when you need a line break that is part of the content itself - like in a poem, a mailing address, or song lyrics - not for adding space between paragraphs. A common mistake is using multiple tags to add spacing between sections. This is incorrect; use CSS margin or padding for spacing, and use separate elements for separate paragraphs.

The <hr> element creates a horizontal rule - a thematic break between sections of content. It renders as a horizontal line by default. In HTML5, <hr> is not just decorative; it represents a semantic shift in topic. For example, you might use <hr> between different scenes in a story or between different topics in an article. It is a void element and requires no closing tag. The default styling can be customized with CSS - you can change the color, height, border style, and width.

The element (Word Break Opportunity) suggests a point where the browser may optionally break a long word if it would otherwise overflow its container. This is useful for very long strings like URLs, file paths, or technical identifiers that might not fit on one line. Unlike , which always creates a break, only breaks the line if necessary. For example, in a narrow sidebar, a long URL like https://www.example.com/very/long/path might overflow; inserting after each slash allows the browser to break gracefully.

Whitespace collapsing is essential to understand when working with text in HTML. The browser treats consecutive whitespace characters (spaces, tabs, newlines) as a single space. This means you can format your HTML source code with indentation and line breaks for readability without affecting the rendered output. If you need to preserve exact whitespace formatting, use the <pre> element or the CSS property white-space: pre-wrap.

Code examples

Paragraphs and Spacing

<!-- Each paragraph is a separate block with spacing -->
<p>The first paragraph discusses the introduction to our
   topic. Notice that the line break in the source code
   does not create a line break in the browser.</p>

<p>The second paragraph covers a different point.
   Browsers add vertical spacing between paragraphs
   automatically.</p>

<p>The third paragraph wraps up the discussion.</p>

Each element is a separate block with default margins. Line breaks in the HTML source are collapsed into single spaces in the rendered output. Separate ideas should be in separate paragraphs.

Line Breaks vs Paragraphs

<!-- CORRECT use of <br>: content that needs line breaks -->
<p>
  123 Main Street<br>
  Apartment 4B<br>
  New York, NY 10001
</p>

<p>
  Roses are red,<br>
  Violets are blue,<br>
  HTML is fun,<br>
  And so are you.
</p>

<!-- WRONG: using <br> for spacing between sections -->
<!-- <p>First section</p>
<br><br><br>
<p>Second section</p> -->

<!-- CORRECT: use CSS for spacing -->
<p style="margin-bottom: 40px;">First section</p>
<p>Second section</p>

Use for line breaks that are part of the content (addresses, poems). Use CSS margins for spacing between sections - never multiple tags.

Horizontal Rules and Word Breaks

<!-- <hr> creates a thematic break between sections -->
<h2>Chapter 1: The Beginning</h2>
<p>The story begins on a dark and stormy night...</p>

<hr>

<h2>Chapter 2: The Journey</h2>
<p>Our hero sets out on an adventure...</p>

<!-- <wbr> suggests optional line break points -->
<p>Visit our documentation at:
  https://www.<wbr>example.<wbr>com/<wbr>docs/<wbr>getting-started/<wbr>installation
</p>

<p>File path: C:\<wbr>Users\<wbr>Documents\<wbr>Projects\<wbr>MyApp\<wbr>src\<wbr>index.html</p>

The <hr> element represents a thematic shift between content sections. The element tells the browser where it is acceptable to break a long word or URL if needed to prevent overflow.

Key points

Always wrap text content in tags. Leaving text directly in the <body> without a container element is bad practice.
Use only for line breaks that are part of the content (addresses, poetry). Never use multiple tags for spacing - use CSS instead.
The <hr> element represents a thematic break, not just a visual line. Use it between sections of different topics.
The element only creates a break when necessary. It is especially useful for long URLs and file paths in narrow containers.

Concepts covered

p Element, br Element, hr Element, wbr Element, Whitespace Collapsing, Line Breaks