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.