The <p> Element
As defined in the HTML Living Standard, the <p> element represents a paragraph. A paragraph is typically a block of text that consists of one or more related sentences.
This is the first paragraph. It introduces a concept and provides the initial context for the user to understand.
This is the second paragraph. It expands on the idea, moving the narrative or information forward in a logical sequence.
<p>This is a standard paragraph of text.</p>\n<p>Each paragraph should focus on a single theme.</p>
View HTML Living Standard: The p element
Nesting Constraints
The <p> element can only contain phrasing content (text, images, links, etc.).
- No Block-Level Elements: You cannot place a
<div>,<h1>, or<ul>inside a paragraph. - Auto-Closing: If you open a block-level element while inside a
<p>tag, the browser will automatically close the paragraph.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Using the <p> tag instead of <br><br> ensures that assistive technology understands where one idea ends and another begins.
Styling vs. Markup
Control the appearance of paragraphs through CSS rather than HTML hacks.
- Spacing: Use the CSS
marginproperty to create space between paragraphs. - Readable Widths: Limit the width of paragraphs to approximately 50–75 characters per line (e.g.,
max-width: 65ch) to aid users with cognitive or visual impairments.
A11y Tip: Empty Paragraphs
Avoid using empty <p></p> elements to create visual space. Screen readers may announce "paragraph" for each empty tag, creating a confusing experience.