HTML - Paragraphs

Paragraphs are defined with the <p> tag. Think of an HTML paragraph as an organized, structural block of text. It is used to keep related sentences together in a dedicated section of a document. The <p> tag is a paired container tag that starts with <p> and ends with </p>. Web browsers automatically start paragraphs on a new line and add default vertical margin spacing before and after the element.

Paragraph Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Paragraphs Example</title>
</head>
<body>
    <p>This is a sample paragraph defined using the standard HTML &lt;p&gt; tag.</p>
    <p>
        Veewom is a comprehensive educational tutorial platform dedicated to empowering BCA students, programmers, and digital creators worldwide.
    </p>
</body>
</html>
							

Rendered Browser Output

---

Understanding HTML Whitespace Collapsing

One of the most important behaviors beginners must understand is whitespace collapsing. In standard HTML, no matter how many consecutive spaces, tabs, or empty carriage return lines you hit in your text editor, the web browser will automatically collapse them down into a single space:

<!-- Code with multiple spaces and line breaks -->
<p>
    This      sentence         has        lots    of     spaces
    and multiple
    lines.
</p>

<!-- Output rendered by the browser: -->
<!-- "This sentence has lots of spaces and multiple lines." -->
							

To insert multiple explicit spaces in an HTML paragraph, use the non-breaking space entity:  .

---

Paragraphs vs Line Breaks (<br>) vs Preformatted Text (<pre>)

Depending on how your content should flow, HTML provides three distinct tags:

Tag	Type	Behavior & When to Use
<p>	Paired (Block)	Creates a distinct paragraph block with built-in top/bottom margins. Used for prose, articles, and descriptions.
<br>	Void (Empty)	Forces a single line break without adding paragraph spacing. Ideal for postal addresses, poetry, and song lyrics.
<pre>	Paired (Block)	Preformatted text displayed in a monospaced font that preserves every space and newline exactly as typed.

Poem / Address Example Using <br>:

<p>
    Department of Computer Applications,<br>
    Veewom Institute of Technology,<br>
    New Delhi, India - 110001
</p>
							

Code / ASCII Art Example Using <pre>:

<pre>
    Line 1: Item A      Price: $10
    Line 2: Item B      Price: $25
    Total:              Price: $35
</pre>
							

---

Best Practices for Bloggers & Content Creators

Mobile devices account for over 60% of all website visits. Long blocks of unbroken text cause visitors to bounce quickly. Follow these professional formatting tips:

• Keep Paragraphs Short: Limit paragraphs to 2 to 4 sentences (approx. 40 to 60 words). This ensures easy readability on small mobile screens.
• Use Thematic Breaks (<hr>): Use the horizontal rule tag <hr> between major subtopics to give readers visual breathing room.
• Set Ideal Line Heights: Ensure your CSS defines a comfortable line-height of 1.6 to 1.8 for body text.

---

Hands-on Practice Session for Students

Problem Statement: Write an HTML document representing an official college application letter. Include sender information using <br>, the date, a salutation, two distinct body paragraphs using <p>, an <hr> separator, and a preformatted signature block using <pre>.

Solution Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formal Letter - Paragraphs Practice</title>
</head>
<body>
    <p>
        Rahul Verma<br>
        Roll No: BCA-2026-042<br>
        Veewom College of Computer Science
    </p>

    <p><time datetime="2026-09-30">September 30, 2026</time></p>

    <p>To The Head of Department,</p>

    <p>I am writing to formally request approval for our annual web development workshop. Our batch has completed the HTML5 curriculum and wishes to present live semester projects.</p>

    <p>We have already drafted the project proposals and look forward to your affirmative response.</p>

    <hr>

    <pre>
Sincerely,
Rahul Verma
Student Representative, BCA
    </pre>
</body>
</html>
							

---

Viva & University Exam Questions (BCA Exam Preparation)

---

Frequently Asked Questions (FAQ)