HTML Paragraphs

The p tag creates distinct text blocks that browsers recognize as separate content units with automatic spacing.

Paragraph elements segment written content into digestible chunks, improving readability and user comprehension. Mastering paragraphs, line controls, and spacing techniques enables creation of professionally formatted text layouts.

Fundamental Paragraph Usage

The <p> tag designates paragraph boundaries. Browsers inject default spacing around these elements automatically:

Standard Paragraph Syntax
<p>Here sits your opening text block.</p>
<p>Now comes a secondary paragraph.</p>
<p>Finally, your third content section.</p>

Result:

Here sits your opening text block.

Now comes a secondary paragraph.

Finally, your third content section.

Rendering Behavior: Web browsers insert whitespace margins surrounding paragraphs automatically, establishing visual content separation.

Browser Rendering Dynamics

Text flow adapts responsively to viewport dimensions. Screen sizes and window adjustments produce varied text wrapping patterns:

Extended Content Paragraph
<p>
Discover web development mastery at HTML Free Codes! Our platform delivers structured learning paths covering markup languages, stylesheets, and modern development practices without cost. Educational materials cater to newcomers while progressing through fundamental syntax to sophisticated techniques. Countless aspiring developers have launched careers through our systematic, beginner-friendly curriculum.
</p>

Result:

Discover web development mastery at HTML Free Codes! Our platform delivers structured learning paths covering markup languages, stylesheets, and modern development practices without cost. Educational materials cater to newcomers while progressing through fundamental syntax to sophisticated techniques. Countless aspiring developers have launched careers through our systematic, beginner-friendly curriculum.

Important: The browser will automatically remove extra spaces and line breaks when displaying the page.

HTML and Whitespace

HTML ignores extra spaces and line breaks. Multiple spaces and line breaks are reduced to a single space:

Whitespace Example
<p>
This paragraph
contains a lot of spaces
in the source         code,
but the        browser
ignores          it.
</p>

Result:

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

Tip: Use CSS for controlling spacing and layout instead of relying on extra spaces in HTML.

HTML Line Breaks

The HTML <br> element defines a line break. Use it when you want a line break without starting a new paragraph:

Line Break Examples
<p>This is<br>a paragraph<br>with line breaks.</p>

<p>HTML Free Codes<br>
Learn Web Development<br>
Free Tutorials<br>
www.htmlfreecodes.com</p>

Result:

This is
a paragraph
with line breaks.

HTML Free Codes
Learn Web Development
Free Tutorials
www.htmlfreecodes.com

Note: The <br> tag is an empty tag, which means it has no closing tag.

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page and is displayed as a horizontal rule:

Horizontal Rule Examples
<h2>Chapter 1: Introduction to HTML</h2>
<p>HTML is the foundation of web development. It provides the structure for web pages.</p>

<hr>

<h2>Chapter 2: HTML Elements</h2>
<p>HTML elements are the building blocks of HTML pages.</p>

<hr>

<h2>Chapter 3: HTML Attributes</h2>
<p>Attributes provide additional information about HTML elements.</p>

Result:

Chapter 1: Introduction to HTML

HTML is the foundation of web development. It provides the structure for web pages.

Chapter 2: HTML Elements

HTML elements are the building blocks of HTML pages.

Chapter 3: HTML Attributes

Attributes provide additional information about HTML elements.

Usage: Use <hr> to separate content sections or to indicate a thematic change in your content.

HTML Preformatted Text

The HTML <pre> element defines preformatted text. Text inside <pre> preserves both spaces and line breaks:

Preformatted Text Example
<pre>
HTML Free Codes Tutorial

Chapter 1: Getting Started
  - Set up your development environment
  - Create your first HTML file
  - Understanding HTML structure

Chapter 2: Basic HTML Elements
  - Headings and paragraphs
  - Links and images
  - Lists and tables
</pre>

Result:
HTML Free Codes Tutorial

Chapter 1: Getting Started
  - Set up your development environment
  - Create your first HTML file
  - Understanding HTML structure

Chapter 2: Basic HTML Elements
  - Headings and paragraphs
  - Links and images
  - Lists and tables

Try it Yourself

Experiment with paragraphs, line breaks, and preformatted text!

Try Paragraph Examples

Styling Paragraphs with CSS

You can style paragraphs using CSS to control appearance, spacing, and alignment:

Styled Paragraph Examples
<p style="color: blue; font-size: 18px;">
This paragraph is blue and larger.
</p>

<p style="text-align: center; background-color: lightgray; padding: 10px;">
This paragraph is centered with a gray background.
</p>

<p style="font-family: Arial, sans-serif; line-height: 1.6; text-indent: 30px;">
This paragraph has custom font, line height, and text indentation for better readability.
</p>

Result:

This paragraph is blue and larger.

This paragraph is centered with a gray background.

This paragraph has custom font, line height, and text indentation for better readability.

The HTML Poem Problem

Here's a common problem when trying to display poetry or formatted text in HTML:

Problem: Poem Without Formatting
<p>
  HTML Free Codes, we teach with care
  Web development knowledge we share
  From basics to advanced skills
  Learning that truly fulfills
  Join us at htmlfreecodes.com
</p>

Result (Problem):

HTML Free Codes, we teach with care Web development knowledge we share From basics to advanced skills Learning that truly fulfills Join us at htmlfreecodes.com

Solution 1: Using <br> Tags
<p>
  HTML Free Codes, we teach with care<br>
  Web development knowledge we share<br>
  From basics to advanced skills<br>
  Learning that truly fulfills<br>
  Join us at htmlfreecodes.com
</p>

Solution 2: Using <pre> Tag
<pre>
  HTML Free Codes, we teach with care
  Web development knowledge we share
  From basics to advanced skills
  Learning that truly fulfills
  Join us at htmlfreecodes.com
</pre>

Result (Solutions):

HTML Free Codes, we teach with care
Web development knowledge we share
From basics to advanced skills
Learning that truly fulfills
Join us at htmlfreecodes.com

  HTML Free Codes, we teach with care
  Web development knowledge we share
  From basics to advanced skills
  Learning that truly fulfills
  Join us at htmlfreecodes.com

Complete Paragraphs Example

Here's a complete example demonstrating various paragraph techniques:

Complete Paragraph Document
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Paragraph Tutorial</title>
</head>
<body>

    <h1>Welcome to HTML Free Codes</h1>

    <p>
        HTML Free Codes is your go-to resource for learning web development.
        Our comprehensive tutorials cover HTML, CSS, JavaScript, and more.
    </p>

    <hr>

    <h2>Why Choose HTML Free Codes?</h2>

    <p>
        Our tutorials are designed with beginners in mind.<br>
        We provide step-by-step instructions.<br>
        All content is completely free.
    </p>

    <p style="text-align: center; font-weight: bold; color: #2c3e50;">
        Start your web development journey today!
    </p>

    <pre>
Contact Information:
Email: info@htmlfreecodes.com
Website: www.htmlfreecodes.com
Follow us for updates!
    </pre>

</body>
</html>

Try it Yourself

Create your own webpage using different paragraph techniques!

Try Complete Example

Fundamental Paragraph Usage

Standard Paragraph Syntax

Result:

Browser Rendering Dynamics

Extended Content Paragraph

Result:

HTML and Whitespace

Whitespace Example

Result:

HTML Line Breaks

Line Break Examples

Result:

HTML Horizontal Rules

Horizontal Rule Examples

Result:

Chapter 1: Introduction to HTML

Chapter 2: HTML Elements

Chapter 3: HTML Attributes

HTML Preformatted Text

Preformatted Text Example

Result:

Try it Yourself

Styling Paragraphs with CSS

Styled Paragraph Examples

Result:

The HTML Poem Problem

Problem: Poem Without Formatting

Result (Problem):

Solution 1: Using <br> Tags

Solution 2: Using <pre> Tag

Result (Solutions):

Complete Paragraphs Example

Complete Paragraph Document

Try it Yourself

Test Your Knowledge