HTML Paragraphs

Learn how to create paragraphs, organize text content, and understand how browsers handle whitespace inside HTML paragraphs.

What is an HTML Paragraph?

The HTML  element is used to define a paragraph of text.

Paragraphs are one of the most commonly used elements in HTML because they help organize readable text content into separate sections.

Basic Syntax:

<p>Your paragraph text goes here.</p>

Basic Paragraph Example

<p>
    HTML is the foundation of web development.
</p>

Output

HTML is the foundation of web development.

Multiple Paragraphs

You can use multiple  elements to create multiple paragraphs on the same page.

<p>
    HTML is used to structure web pages.
</p>

<p>
    CSS is used to style web pages.
</p>

<p>
    JavaScript adds behavior and interaction.
</p>

HTML is used to structure web pages.

CSS is used to style web pages.

JavaScript adds behavior and interaction.

Paragraphs Create Separate Blocks

Browsers normally display each paragraph as a separate block of text with spacing around it.

<p>First paragraph</p>

<p>Second paragraph</p>

First paragraph

Second paragraph

Writing a Paragraph Across Multiple Lines

HTML source code can be formatted across multiple lines to improve readability.

<p>
    HTML is used to create
    the structure of web pages.
</p>

The browser normally renders the text as a continuous paragraph unless an element such as   is used to create a line break.

HTML is used to create the structure of web pages.

Whitespace in HTML

Browsers generally collapse consecutive spaces, tabs, and line breaks in normal HTML text into a single space.

<p>
    HTML     CSS       JavaScript
</p>

The browser will normally display the text with regular spacing rather than preserving every space exactly as written in the source code.

HTML CSS JavaScript

Paragraph vs Line Break

The  element and   element have different purposes.

Element	Purpose	Example
`<p>`	Defines a paragraph.	`<p>Hello</p>`
`<br>`	Inserts a line break.	`Hello<br>World`

Paragraph with Line Breaks

<p>
    Welcome to CIIT Institute.<br>
    Learn HTML step-by-step.<br>
    Start your web development journey.
</p>

Output

Welcome to CIIT Institute.
Learn HTML step-by-step.
Start your web development journey.

Paragraphs with Text Formatting

Paragraphs can contain other inline HTML elements for formatting and emphasis.

<p>
    Learn <strong>HTML</strong> and
    <em>web development</em>.
</p>

Learn HTML and web development.

Paragraph with a Link

<p>
    Visit our
    <a href="#">HTML Course</a>
    to continue learning.
</p>

Visit our HTML Course to continue learning.

Attributes with Paragraphs

The  element can also use common HTML attributes such as id, class, and style.

<p id="intro"
   class="description"
   style="color: blue;">

    WELCOME TO CIIT TRAINING INSTITUTE 👀🤓 .

</p>

WELCOME TO CIIT TRAINING INSTITUTE 👀🤓 .

Why Use Paragraphs?

Readability

Paragraphs break long text into manageable sections for readers.

Content Structure

Paragraphs help organize related information into separate content blocks.

Accessibility

Proper document structure makes content easier for users and assistive technologies to understand.

Maintainability

Clearly separated paragraphs make HTML easier to read and maintain.

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>Paragraph Example</title>

</head>

<body>

    <h1>CIIT Institute</h1>

    <p>
        CIIT Institute provides training in
        modern software development technologies.
    </p>

    <p>
        Students can learn HTML, CSS, JavaScript,
        C#, Java, Python, and other technologies.
    </p>

    <p>
        Start learning today and build your
        web development skills.
    </p>

</body>

</html>

Common Mistakes

Using paragraph tags only for visual spacing.
Creating unnecessary nested paragraphs.
Expecting multiple spaces in source code to appear exactly the same in the browser.
Using   repeatedly when a separate paragraph would be more appropriate.

Practice Exercise

Create three paragraphs about yourself.
Add a heading above the paragraphs.
Use   inside one paragraph.
Make one word bold using .
Add a link inside a paragraph.
Apply a CSS class to one paragraph.

Summary

The  element is used to create paragraphs in HTML. Paragraphs help organize readable text content into separate sections. HTML normally collapses consecutive whitespace, while the   element can be used when a line break is required inside text.

← Previous: Headings Next: Comments →