Strong vs b tag in HTML - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text bold using the semantic tag.

HTML

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

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

A<b>

B<i>

C<em>

D<strong>

Attempts:

3 left

💡 Hint

Common Mistakes

Using which only styles text without semantic meaning.

Using or which italicize text instead of bolding.

The tag makes text bold and also indicates strong importance, which is better for accessibility than .

2fill in blank

medium

Complete the code to make the text bold without adding semantic importance.

HTML

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

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

A<b>

B<strong>

C<em>

D<mark>

Attempts:

3 left

💡 Hint

Common Mistakes

Using which adds semantic importance.

Using which italicizes text.

The tag makes text bold purely for visual effect without implying importance.

3fill in blank

hard

Fix the error in the code to correctly emphasize important text.

HTML

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

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

A<strong>

B<u>

C<i>

D<b>

Attempts:

3 left

💡 Hint

Common Mistakes

Using which does not convey importance.

Using or which change style but not meaning.

The tag is used to emphasize important text semantically, unlike which only styles text.

4fill in blank

hard

Fill the four blanks to make the first text bold with semantic importance and the second bold without semantic meaning.

HTML

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

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

A<strong>

B</strong>

C<b>

D</b>

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing opening and closing tags incorrectly.

Using for important text instead of .

The first pair and adds semantic importance. The second pair and only styles text bold.

5fill in blank

hard

Fill all four blanks to create a sentence where the first word is semantically strong, the second word is visually bold, and the third word is normal.

HTML

<p>[1]Bold[2] [3]and[4] normal text.</p>

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

A<strong>

B</strong>

C<b>

D</b>

Attempts:

3 left

💡 Hint

Common Mistakes

Not closing tags properly.

Using for semantic importance.

The first two blanks wrap 'Bold' with tags for semantic importance. The third and fourth blanks wrap 'and' with tags for visual bold.

Practice

1. What is the main difference between the <strong> and <b> tags in HTML?

easy

A. <strong> indicates important text, <b> only styles text bold.

B. <b> indicates important text, <strong> only styles text bold.

C. Both tags have the same meaning and usage.

D. <strong> makes text italic, <b> makes text bold.

Solution

1. Step 1: Understand semantic meaning of tags

   <strong> is used to mark text as important or urgent, giving it semantic meaning for browsers and assistive technologies.

2. Step 2: Understand visual styling difference

   <b> only makes text bold visually without adding importance or meaning.

3. Final Answer:

   <strong> indicates important text, <b> only styles text bold. -> Option A

4. Quick Check:

   Semantic meaning = <strong> [OK]

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

Common Mistakes:

• Thinking both tags mean the same
• Using <b> for important text
• Confusing <strong> with italic tags

2. Which of the following is the correct syntax to make the word "Warning" bold and indicate it is important?

easy

A. <b>Warning</b>

B. <strong>Warning</strong>

C. <i>Warning</i>

D. <em>Warning</em>

Solution

1. Step 1: Identify tag for importance and bold

   The <strong> tag makes text bold and marks it as important.

2. Step 2: Check syntax correctness

   The syntax <strong>Warning</strong> is correct and matches the requirement.

3. Final Answer:

   <strong>Warning</strong> -> Option B

4. Quick Check:

   Important bold text = <strong> [OK]

Hint: Use <strong> tags for important bold text [OK]

Common Mistakes:

• Using <b> when importance is needed
• Using <i> or <em> which italicize text
• Incorrect tag closing

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

<p>This is <strong>very important</strong> text and this is <b>just bold</b> text.</p>

medium

A. Both 'very important' and 'just bold' appear bold, but only 'very important' is marked important.

B. 'very important' is italic, 'just bold' is bold.

C. 'very important' is normal, 'just bold' is bold and important.

D. Both texts appear normal without bold styling.

Solution

1. Step 1: Understand visual effect of <strong> and <b>

   Both tags make text bold visually.

2. Step 2: Understand semantic difference

   <strong> marks text as important; <b> only styles text bold without importance.

3. Final Answer:

   Both 'very important' and 'just bold' appear bold, but only 'very important' is marked important. -> Option A

4. Quick Check:

   Visual bold = both; semantic importance = <strong> [OK]

Hint: Both bold visually, only <strong> adds importance [OK]

Common Mistakes:

• Thinking <b> adds importance
• Confusing italic with bold
• Assuming no visual difference

4. You wrote this HTML:

<p>This is <b>important</strong> text.</p>

What is the problem and how to fix it?

medium

A. Mismatched tags; change closing tag to </b>.

B. No problem; it will render correctly.

C. Use <strong> instead of <b> for bold text.

D. Remove both tags; bold is not allowed inside <p>.

Solution

1. Step 1: Identify tag mismatch

   The opening tag is <b> but the closing tag is </strong>, which is incorrect.

2. Step 2: Fix the closing tag

   Change the closing tag to </b> to match the opening tag.

3. Final Answer:

   Mismatched tags; change closing tag to </b>. -> Option A

4. Quick Check:

   Matching tags fix syntax [OK]

Hint: Always match opening and closing tags exactly [OK]

Common Mistakes:

• Mixing different tags for open/close
• Ignoring syntax errors
• Assuming browser fixes all errors

5. You want to emphasize a warning message that is both visually bold and important for screen readers. Which HTML snippet is best?

hard

A. <b><strong>Warning!</strong></b>

B. <strong><b>Warning!</b></strong>

C. <b>Warning!</b>

D. <strong>Warning!</strong>

Solution

1. Step 1: Understand semantic and visual needs

   The <strong> tag alone makes text bold and marks it important for screen readers.

2. Step 2: Avoid redundant tags

   Using both <b> and <strong> is unnecessary; <strong> covers both bold style and importance.

3. Final Answer:

   <strong>Warning!</strong> -> Option D

4. Quick Check:

   Use strong alone for bold + importance [OK]

Hint: Use strong alone for bold and importance [OK]

Common Mistakes:

• Nesting b inside strong unnecessarily
• Using only b for important text
• Overcomplicating with multiple tags