Paragraphs in HTML

Introduction

Paragraphs help organize text into separate blocks. They make reading easier by breaking content into small parts.

When writing a story or article on a webpage.

To separate different ideas or topics in text.

When adding descriptions or explanations in a web page.

To improve readability of long text content.

When you want to add space between blocks of text.

Syntax

HTML

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

The <p> tag defines a paragraph.

Browsers add space above and below paragraphs automatically.

Examples

A basic paragraph with some text inside.

HTML

<p>This is a simple paragraph.</p>

Two separate paragraphs will appear with space between them.

HTML

<p>Paragraph one.</p>
<p>Paragraph two.</p>

Line breaks in code do not create new lines in the browser. Use <br> for line breaks.

HTML

<p>This paragraph
has a line break
inside the text.</p>

You can add formatting inside paragraphs using tags like <strong> and <em>.

HTML

<p>This paragraph contains <strong>bold</strong> and <em>italic</em> text.</p>

Sample Program

This webpage shows three paragraphs inside a section. Each paragraph is separated by space automatically.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paragraph Example</title>
</head>
<body>
  <main>
    <section>
      <h1>My First Webpage</h1>
      <p>Welcome to my webpage. This is the first paragraph.</p>
      <p>Here is another paragraph with more information.</p>
      <p>Paragraphs help keep text clear and easy to read.</p>
    </section>
  </main>
</body>
</html>

Important Notes

Paragraphs automatically add vertical space before and after them.

Do not use multiple <br> tags to create paragraph spacing; use separate <p> tags instead.

Paragraphs improve accessibility by helping screen readers understand text structure.

Summary

Use <p> tags to create paragraphs in HTML.

Paragraphs separate text into readable blocks with space around them.

Always use paragraphs to organize text content on webpages.

Practice

1. What is the correct HTML tag to create a paragraph?

easy

A. <p>

B. <div>

C. <span>

D. <section>

Solution

1. Step 1: Understand paragraph tags

   The <p> tag is specifically designed to create paragraphs in HTML.

2. Step 2: Compare with other tags

   <div> and <section> are for grouping content, <span> is inline, not for paragraphs.

3. Final Answer:

   <p> -> Option A

4. Quick Check:

   Paragraph tag = <p> [OK]

Hint: Paragraphs always use <p> tags [OK]

Common Mistakes:

• Using <div> instead of <p>
• Using <span> for paragraphs
• Confusing <section> with paragraph

2. Which of the following is the correct syntax for a paragraph containing the text "Hello World"?

easy

A. Hello World

B. <p>Hello World>

C. Hello World

D. <p>Hello World

Solution

1. Step 1: Check opening and closing tags

   The paragraph tag must open with <p> and close with </p>.

2. Step 2: Validate the options

   <p>Hello World</p> correctly opens and closes the paragraph tag. Options A and B have missing closing brackets, and C uses an invalid tag.

3. Final Answer:

   <p>Hello World</p> -> Option A

4. Quick Check:

   Proper tag syntax = <p>text</p> [OK]

Hint: Always close

tags properly with

[OK]

Common Mistakes:

• Missing closing > in tags
• Using invalid tag names
• Forgetting closing tag

3. What will the browser display for this HTML snippet?

<p>First paragraph.</p>
<p>Second paragraph.</p>

medium

A. First paragraph.Second paragraph.

B. First paragraph.

Second paragraph.

C. First paragraph. Second paragraph.

D. First paragraph Second paragraph

Solution

1. Step 1: Understand paragraph rendering

   Each <p> tag creates a block with space above and below, so paragraphs appear separated by blank lines.

2. Step 2: Analyze the output

   The browser shows "First paragraph." then a blank line, then "Second paragraph." on the next line.

3. Final Answer:

   First paragraph.\n\nSecond paragraph. -> Option B

4. Quick Check:

   Paragraphs add vertical space = separate lines [OK]

Hint: Paragraphs create space above and below text [OK]

Common Mistakes:

• Thinking paragraphs run together without space
• Ignoring line breaks
• Confusing inline and block elements

4. Identify the error in this HTML code:

<p>This is a paragraph.
<p>This is another paragraph.</p>

medium

A. Paragraph tags cannot be nested

B. Using <p> instead of <div>

C. Missing closing tag for the first paragraph

D. Paragraph tags must be self-closing

Solution

1. Step 1: Check paragraph tag pairs

   The first <p> tag is not closed before the second <p> starts.

2. Step 2: Understand paragraph rules

   Paragraph tags must be properly closed; missing closing tags cause rendering issues.

3. Final Answer:

   Missing closing tag for the first paragraph -> Option C

4. Quick Check:

   Each

   needs a closing

   [OK]

Hint: Always close each <p> before starting another [OK]

Common Mistakes:

• Forgetting
  tags
• Thinking <p> can self-close
• Confusing <p> with <div>

5. You want to create a webpage with three paragraphs. The second paragraph should be emphasized with italic text inside it. Which HTML snippet correctly achieves this?

hard

A. First paragraph.Second paragraph.Third paragraph.

B. First paragraph.Second paragraph.Third paragraph.

C. First paragraph.Second paragraph.Third paragraph.

D. First paragraph.Second paragraph.Third paragraph.

Solution

1. Step 1: Structure paragraphs correctly

   Each paragraph must be enclosed in its own <p> tags.

2. Step 2: Use inline tags inside paragraphs

   The <em> tag is used inside the second paragraph to italicize text properly without breaking HTML rules.

3. Step 3: Check invalid nesting

   Options C and D incorrectly nest block and inline tags, and B puts all text in one paragraph.

4. Final Answer:

   <p>First paragraph.</p><p><em>Second paragraph.</em></p><p>Third paragraph.</p> -> Option D

5. Quick Check:

   Use <p> for paragraphs and <em> inside for emphasis [OK]

Hint: Wrap emphasized text inside <em> within <p> tags [OK]

Common Mistakes:

• Nesting <p> inside <em>
• Not closing tags properly
• Putting all text in one paragraph