Bold and italic text in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text bold.

HTML

<p>This is [1]bold[1] text.</p>

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

A<strong>

B<i>

C<em>

D<b>

Attempts:

3 left

💡 Hint

Common Mistakes

Using or which make text italic, not bold.

Using which is also bold but not the simplest tag here.

The tag makes text bold in HTML.

2fill in blank

medium

Complete the code to make the text italic.

HTML

<p>This is [1]italic[1] text.</p>

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

A<strong>

B<em>

C<i>

D<b>

Attempts:

3 left

💡 Hint

Common Mistakes

Using or which make text bold, not italic.

Using which is semantic italic but not the simplest tag here.

The tag makes text italic in HTML.

3fill in blank

hard

Fix the error in the code to correctly show bold and italic text.

HTML

<p>This is [1]bold and italic[1] text.</p>

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

A<i><b>

B<b><i>

C<strong><em>

D<em><strong>

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one tag instead of both.

Incorrect nesting order causing display issues.

To combine bold and italic, nest and tags properly.

4fill in blank

hard

Fill both blanks to make the text bold and italic.

HTML

<p>[1]bold and italic[2] text.</p>

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

A<strong><em>

B</em></strong>

Attempts:

3 left

💡 Hint

Common Mistakes

Not closing tags properly.

Using mismatched tags.

Use opening tags and closing tags to style text bold and italic.

5fill in blank

hard

Fill all three blanks to make the text bold and italic using semantic tags.

HTML

<p>[1][2]bold and italic[3] text.</p>

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

A<strong>

B</strong>

C</em>

D<em>

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-semantic tags like and instead.

Closing tags in wrong order.

Use and tags with proper closing to make text bold and italic semantically.

Practice

1. Which HTML tag is used to make text bold to show importance?

easy

A. <em>

B. <strong>

C. <b>

D. <i>

Solution

1. Step 1: Understand the purpose of <strong> tag

   The <strong> tag is used to indicate that the text is important and should be displayed in bold.

2. Step 2: Compare with other tags

   The <em> tag is for emphasis (italic), <b> and <i> are purely visual without semantic meaning.

3. Final Answer:

   <strong> -> Option B

4. Quick Check:

   Bold importance = <strong> [OK]

Hint: Use <strong> for bold importance, not just style [OK]

Common Mistakes:

• Using <b> instead of <strong>
• Confusing <em> with bold
• Using <i> for bold text

2. Which of the following is the correct HTML syntax to make text italic for emphasis?

easy

A. <i>This is bold</i>

B. <strong>This is italic</strong>

C. <b>This is italic</b>

D. <em>This is italic</em>

Solution

1. Step 1: Identify the tag for italic emphasis

   The <em> tag is used to emphasize text, which browsers usually show as italic.

2. Step 2: Check the syntax correctness

   The syntax <em>This is italic</em> correctly wraps the text with opening and closing tags.

3. Final Answer:

   <em>This is italic</em> -> Option D

4. Quick Check:

   Italic emphasis = <em> [OK]

Hint: Use <em> tags for italic emphasis, not <b> or <strong> [OK]

Common Mistakes:

• Using <strong> for italic
• Using <b> instead of <em>
• Mixing <i> and <em> meaning

3. What will be the visual output of this HTML snippet?

<p>This is <strong>very</strong> important and <em>emphasized</em> text.</p>

medium

A. This is very important and emphasized text. (with 'very' bold and 'emphasized' italic)

B. This is very important and emphasized text. (all normal text)

C. This is very important and emphasized text. (all bold text)

D. This is very important and emphasized text. (all italic text)

Solution

1. Step 1: Identify the effect of <strong> tag

   The word 'very' inside <strong> will appear bold to show importance.

2. Step 2: Identify the effect of <em> tag

   The word 'emphasized' inside <em> will appear italic to show emphasis.

3. Final Answer:

   This is very important and emphasized text. (with 'very' bold and 'emphasized' italic) -> Option A

4. Quick Check:

   <strong> = bold, <em> = italic [OK]

Hint: Remember <strong> bolds, <em> italicizes text [OK]

Common Mistakes:

• Thinking <strong> italicizes
• Assuming all text is styled
• Confusing <em> with bold

4. Find the error in this HTML snippet that tries to make text bold and italic:

<p>This is <strong>very <em>important</strong> text</em>.</p>

medium

A. Tags are properly nested and correct

B. <strong> tag should be replaced with <b>

C. <em> tag is closed after </strong>, breaking nesting

D. Missing closing <em> tag

Solution

1. Step 1: Check tag nesting order

   The <strong> tag opens before <em>, but closes before </em> which breaks proper nesting.

2. Step 2: Understand correct nesting

   Tags must close in reverse order of opening: <strong><em>...</em></strong>.

3. Final Answer:

   <em> tag is closed after </strong>, breaking nesting -> Option C

4. Quick Check:

   Proper nesting = tags close in reverse order [OK]

Hint: Close inner tags before outer tags to fix nesting [OK]

Common Mistakes:

• Closing tags in wrong order
• Replacing semantic tags with visual ones
• Forgetting to close tags

5. You want to emphasize a word that is both important and emphasized. Which is the best way to write it in HTML?

hard

A. <strong><em>Word</em></strong>

B. <em><strong>Word</strong></em>

C. <b><i>Word</i></b>

D. <em>Word</em><strong>Word</strong>

Solution

1. Step 1: Understand semantic meaning of tags

   <strong> means important (bold), <em> means emphasis (italic).

2. Step 2: Nest tags correctly for combined effect

   Nesting <em> inside <strong> is correct and keeps semantic meaning clear.

3. Step 3: Avoid using <b> and <i> for meaning

   <b> and <i> are only visual, not semantic, so less accessible.

4. Final Answer:

   <strong><em>Word</em></strong> -> Option A

5. Quick Check:

   Semantic nesting <strong><em> = bold + italic [OK]

Hint: Nest <em> inside <strong> for combined bold and italic [OK]

Common Mistakes:

• Using <b> and <i> instead of semantic tags
• Incorrect tag nesting order
• Separating tags instead of nesting