Paragraphs in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a paragraph with the text "Hello, world!".

HTML

<[1]>Hello, world!</[1]>

Drag options to blanks, or click blank then click option'

Ap

Bdiv

Cspan

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

will work but is not semantic for paragraphs.

Using is for inline text, not paragraphs.

tags are used to create paragraphs in HTML. Using

will display the text as a paragraph.

2fill in blank

medium

Complete the code to add a paragraph with the text "Welcome to my website." inside the main section.

HTML

<main>
  <[1]>Welcome to my website.</[1]>
</main>

Drag options to blanks, or click blank then click option'

Ap

Bsection

Carticle

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of

for paragraph text.

Using

is for page footers, not paragraphs.

The

tag is used to define paragraphs inside sections like

.

3fill in blank

hard

Fix the error in the paragraph tag to correctly display the text "This is a paragraph.".

HTML

<p>This is a paragraph.[1]</p>

Drag options to blanks, or click blank then click option'

A</p>

B<p>

C<br>

D</div>

Attempts:

3 left

💡 Hint

Common Mistakes

Adding an extra closing

tag causes an error.

Adding another

tag inside a paragraph is invalid.

The paragraph is already closed properly. Adding
inserts a line break inside the paragraph if needed.

4fill in blank

hard

Fill both blanks to create two paragraphs inside a section.

HTML

<section>
  <[1]>First paragraph.</[1]>
  <[2]>Second paragraph.</[2]>
</section>

Drag options to blanks, or click blank then click option'

Ap

Bdiv

Carticle

Dspan

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of

for paragraphs.

Using is inline and not suitable for paragraphs.

Use

tags for both paragraphs to semantically mark them as paragraphs.

5fill in blank

hard

Fill all three blanks to create a paragraph with emphasized and strong text inside.

HTML

<p>This is a [1] paragraph with [2] and [3] text.</p>

Drag options to blanks, or click blank then click option'

Asimple

B<em>

C<strong>

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' instead of tag.

Putting tags as plain text instead of HTML tags.

The word 'simple' describes the paragraph. is for emphasized text and is for strong importance.

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