ReferenceStandard

Text structure: p, div, span, br, hr, and wbr

A paragraph groups a run of related phrasing content.

Intermediate3 min readLearn · Practice · Review

Published by HTML Code Runner · AI-assisted material · Independent editorial review pending · Editorial policy

On this page

Purpose and content model

A paragraph groups a run of related phrasing content. Div groups flow content when no more specific semantic element describes the wrapper. Span is its phrasing-content counterpart, useful for styling or annotating part of a sentence. Neither div nor span supplies a meaningful role by itself.

Br creates a meaningful line break, such as within poetry or an address. Hr marks a thematic break between sections of prose. Wbr offers an optional line-break opportunity in a long string. These three are void elements. A line break is not a new paragraph, and a visual separator does not automatically require a thematic break.

Syntax and working example

<p>Visit on Tuesday or Thursday.</p>
<p>Reading room<br>14 Garden Lane<br>North district</p>
<hr>
<p>Next, prepare your membership documents.</p>

Supported attributes and behavior

These elements primarily use global attributes. A span can carry lang for a phrase in another language, class for a style hook, or data-* for application data. Legacy br clear and hr size, color, width, and align attributes should be replaced with CSS. The content model of p permits phrasing content; inserting a div, table, or another paragraph causes parser behavior that differs from simply nesting an ordinary inline child.

Another practical pattern

<p>The file is named <span class="filename">annual<wbr>-accessibility<wbr>-report.html</span>.</p>
<div class="card"><h2>Opening hours</h2><p>10:00–18:00</p></div>

Accessibility and browser notes

Multiple br elements used for spacing can create confusing pauses and inconsistent layout. Paragraphs and headings give better navigation and structure. An optional break in a long identifier should not add a visible hyphen or change its underlying meaning. Check copy-paste behavior if users need the exact identifier.

Common mistakes

Do not nest div inside p and assume the DOM will mirror the source. Do not use a series of empty paragraphs to push content down the page. Use CSS margin, padding, borders, and overflow handling for visual spacing and decoration.

Verify your implementation

Inspect the parsed tree for unexpectedly closed paragraphs. Resize the page to check long strings and compare a forced br with an optional wbr. Read the text without CSS to confirm that paragraph boundaries and thematic transitions still make sense.

Standard status and sources

Standard; browser availability must be checked independently of specification status.

HTML specification · MDN reference and compatibility data