HTML Paragraphs Guide

Proper use of paragraphs and text formatting in HTML

The standard paragraph element for blocks of text

Usage: Primary element for textual content

This is a paragraph of text.

Line break within text (use sparingly)

Usage: For intentional line breaks within content

First line Second line

<pre>

Preformatted text preserving whitespace

Usage: Code blocks or text requiring exact formatting

<pre>function hello() {
  console.log("Hello");
}</pre>

<blockquote>

Block quotation from another source

Usage: Extended quotations with citation

<blockquote cite="https://example.com">
  <p>This is a quoted passage.</p>
</blockquote>

<hr>

Thematic break between content sections

Usage: Visual separation between content areas

<p>First section</p>
<hr>
<p>Second section</p>

Important text (typically bold)

Note: Semantic importance, not just visual styling

This is important text.

Emphasized text (typically italic)

Note: For verbal emphasis, not just visual styling

Please read carefully.

Highlighted text for reference

Note: Like using a highlighter on paper

The key point is highlighted.

Side comments and fine print

Note: For legally required disclaimers etc.

Main content Additional notes

<code>

Inline code snippets

Note: For short code references in text

Use <code>console.log()</code> for debugging.

Semantic Structure

Use paragraph elements for text content rather than generic containers

Good Example

<p>This is proper paragraph usage.</p><p>This is proper paragraph usage.</p>

Bad Example

<div>This text should be in a paragraph.</div><div>This text should be in a paragraph.</div>

Line Breaks

Avoid excessive tags for spacing - use CSS margins instead

Good Example

<p class="spaced">Properly spaced paragraph</p><p class="spaced">Properly spaced paragraph</p>

Bad Example

<p>Text<br><br><br>More text</p><p>Text<br><br><br>More text</p>

Text Formatting

Use semantic elements rather than styling elements directly

Good Example

<p><strong>Important</strong> information</p><p><strong>Important</strong> information</p>

Bad Example

<p><span style="font-weight: bold">Important</span> information</p><p><span style="font-weight: bold">Important</span> information</p>

Accessibility

Ensure proper contrast and readable line lengths

Good Example

<p style="max-width: 65ch">Properly sized paragraph for readability</p><p style="max-width: 65ch">Properly sized paragraph for readability</p>

Bad Example

<p style="width: 1000px">Extremely long lines are hard to read</p><p style="width: 1000px">Extremely long lines are hard to read</p>

Article Content

<article>
  <h1>Blog Post Title</h1>
  <p>This is the introductory paragraph that sets up what the article will be about.</p>
  
  <h2>First Section</h2>
  <p>The first main point of the article with supporting details and explanations.</p>
  <p>Additional paragraphs develop the idea further with examples and evidence.</p>
  
  <blockquote>
    <p>An important quotation from a relevant source that supports the article's point.</p>
    <footer>- Source Name</footer>
  </blockquote>
  
  <h2>Conclusion</h2>
  <p>Final thoughts that summarize the article's main points and leave the reader with something to consider.</p>
</article><article>
  <h1>Blog Post Title</h1>
  <p>This is the introductory paragraph that sets up what the article will be about.</p>
  
  <h2>First Section</h2>
  <p>The first main point of the article with supporting details and explanations.</p>
  <p>Additional paragraphs develop the idea further with examples and evidence.</p>
  
  <blockquote>
    <p>An important quotation from a relevant source that supports the article's point.</p>
    <footer>- Source Name</footer>
  </blockquote>
  
  <h2>Conclusion</h2>
  <p>Final thoughts that summarize the article's main points and leave the reader with something to consider.</p>
</article>

Technical Documentation

<section>
  <h1>API Reference</h1>
  <p>The following documentation explains how to use our REST API endpoints.</p>
  
  <h2>Authentication</h2>
  <p>All requests require an API key passed in the header:</p>
  <pre><code>Authorization: Bearer your_api_key</code></pre>
  
  <h2>Endpoints</h2>
  <p><strong>GET /users</strong> - Returns a list of users</p>
  <p><em>Parameters:</em></p>
  <p><code>limit</code> - Number of results to return (default: 10)</p>
  <p><code>offset</code> - Pagination offset (default: 0)</p>
</section><section>
  <h1>API Reference</h1>
  <p>The following documentation explains how to use our REST API endpoints.</p>
  
  <h2>Authentication</h2>
  <p>All requests require an API key passed in the header:</p>
  <pre><code>Authorization: Bearer your_api_key</code></pre>
  
  <h2>Endpoints</h2>
  <p><strong>GET /users</strong> - Returns a list of users</p>
  <p><em>Parameters:</em></p>
  <p><code>limit</code> - Number of results to return (default: 10)</p>
  <p><code>offset</code> - Pagination offset (default: 0)</p>
</section>

Accessible Content

<main>
  <h1>Accessibility Guidelines</h1>
  <p>Creating accessible web content benefits all users, including those with disabilities.</p>
  
  <h2>Text Considerations</h2>
  <p>Ensure proper contrast between text and background. The <mark>minimum recommended ratio</mark> is 4.5:1 for normal text.</p>
  
  <p>Use semantic HTML elements like <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> rather than just bold and italic styling.</p>
  
  <h2>Additional Resources</h2>
  <p><small>Note: These guidelines are based on WCAG 2.1 standards.</small></p>
</main><main>
  <h1>Accessibility Guidelines</h1>
  <p>Creating accessible web content benefits all users, including those with disabilities.</p>
  
  <h2>Text Considerations</h2>
  <p>Ensure proper contrast between text and background. The <mark>minimum recommended ratio</mark> is 4.5:1 for normal text.</p>
  
  <p>Use semantic HTML elements like <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> rather than just bold and italic styling.</p>
  
  <h2>Additional Resources</h2>
  <p><small>Note: These guidelines are based on WCAG 2.1 standards.</small></p>
</main>

Paragraphs Playground

Experiment with paragraph formatting in our live editor

Paragraph Examples Preview

Ready-to-use examples covering proper paragraph usage

Live Preview

Proper Paragraph Structure

This is a properly structured paragraph with appropriate line length and spacing. The content flows naturally and is easy to read.

Subsequent paragraphs are separated by appropriate margins, creating a comfortable reading rhythm without excessive space.

Semantic Formatting

This paragraph contains important text and emphasized content using semantic HTML elements.

Technical terms like console.log() are marked up properly, and key points are highlighted for emphasis.

All examples will be loaded into an interactive editor where you can modify and test them

HTML Paragraphs Guide

Paragraph Elements

<p>

<br>

<pre>

<blockquote>

<hr>

Text Formatting Elements

<strong>

<em>

<mark>

<small>

<code>

Paragraph Best Practices

Semantic Structure

Line Breaks

Text Formatting

Accessibility

Practical Examples

Article Content

Technical Documentation

Accessible Content

Paragraphs Playground

Paragraph Examples Preview

Proper Paragraph Structure

Semantic Formatting

Continue Learning

HTML Headings

HTML Styles