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, but it can also be used for other groupings of related phrasing content.
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>
<p>Each paragraph should focus on a single theme.</p>
View HTML Living Standard: The p element
Nesting Constraints
The <p> element has strict rules regarding what it can contain. It can only contain phrasing content (text, images, links, etc.).
- No Block-Level Elements: You cannot place a
<div>,<h1>-<h6>,<ul>, or<article>inside a paragraph. - Auto-Closing: If you open a block-level element while inside a
<p>tag, the browser will automatically close the paragraph before rendering the block element. This can cause unexpected layout issues.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Paragraphs are fundamental structural units. Screen reader users can navigate through a document paragraph by paragraph (often using the 'P' key). By using the <p> tag instead of <br><br> to separate text, you ensure that assistive technology understands where one idea ends and another begins.
Styling vs. Markup
Following SMACSS Base Rules, you should control the appearance of paragraphs through CSS rather than HTML hacks.
- Spacing: Use the CSS
marginproperty to create space between paragraphs. Never use multiple<br>tags for spacing. - Indentation: If the design requires first-line indentation, use the
text-indentproperty. - Readable Widths: For optimal accessibility, limit the width of paragraphs to approximately 50–75 characters per line (using
max-width: 65ch). This reduces eye fatigue and aids 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 and stuttered experience for the user. Always use CSS for purely presentational spacing.