Paragraphs in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this HTML snippet?

Look at this HTML code and choose what you will see in the browser.

HTML

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

A One continuous line of text without breaks.

B Two lines of text with no space between them.

C Text displayed in bold and italic style.

D Two separate blocks of text with space between them.

💡 Hint

Remember, paragraphs create blocks with space above and below.

The <p> tag creates a block of text separated by space from other blocks. So two paragraphs show as two blocks with space between.

🧠 Conceptual

intermediate

Which HTML tag is used to create a paragraph?

Choose the correct HTML tag that defines a paragraph.

A <section>

B <span>

C <p>

D <div>

💡 Hint

Paragraphs are blocks of text, not inline or container elements.

The <p> tag is the standard HTML element for paragraphs. <div> and <section> are container elements, <span> is inline.

📝 Syntax

advanced

What error does this HTML code cause?

Look at this code and select the error it causes in the browser.

HTML

<p>This is a paragraph.
Another paragraph without closing the first.</p>

A The browser merges both paragraphs into one block.

B Both paragraphs display correctly with space.

C The browser ignores the second paragraph completely.

D The browser shows a syntax error message.

💡 Hint

Browsers try to fix missing closing tags automatically.

Without closing the first <p>, the browser treats the text of the second paragraph as part of the first paragraph, merging them into one block.

❓ accessibility

advanced

How to improve accessibility for paragraphs?

Which practice helps screen readers understand paragraphs better?

A Use semantic &lt;p&gt; tags for paragraphs.

B Avoid using paragraphs and write all text inline.

C Use &lt;div&gt; tags with CSS for spacing.

D Use multiple &lt;br&gt; tags instead of &lt;p&gt;.

💡 Hint

Semantic tags give meaning to content for assistive tools.

Using <p> tags helps screen readers identify paragraphs, improving accessibility.

❓ layout

expert

How does CSS affect paragraph spacing?

Given this CSS, what is the vertical space between paragraphs?

HTML

p {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

A 1rem space between paragraphs.

B 2rem space between paragraphs.

C 3rem space between paragraphs.

D No space between paragraphs.

💡 Hint

Vertical margins between adjacent block elements collapse to the maximum value.

Each paragraph has 1rem top and 2rem bottom margin. Between two paragraphs, the bottom margin of the first (2rem) and top margin of the second (1rem) collapse to the maximum of 2rem.

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