Bold and italic text 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 <strong>bold</strong> and <em>italic</em> text.</p>

A The words 'bold' appear thick and 'italic' appear slanted.

B The words 'bold' and 'italic' both appear underlined.

C The words 'bold' and 'italic' both appear in uppercase letters.

D The words 'bold' and 'italic' both appear with a strikethrough line.

💡 Hint

Think about what and tags do to text style.

The tag makes text bold (thicker), and the tag makes text italic (slanted). Underline, uppercase, and strikethrough are different styles not applied here.

📝 Syntax

intermediate

Which HTML code correctly makes the word 'Hello' bold and italic?

Choose the correct HTML snippet that makes 'Hello' both bold and italic.

A <strong><i>Hello</i></strong>

B <em><strong>Hello</strong></em>

C <b><i>Hello</i></b>

D <strong><em>Hello</em></strong>

💡 Hint

Tags must be properly nested and closed in order.

Option D correctly nests inside and closes tags in reverse order. Option D is also valid HTML but option D is the standard recommended nesting. Option D uses deprecated tags and . Option D has incorrect closing tag order causing invalid HTML.

❓ selector

advanced

Which CSS selector targets only elements inside elements?

You want to style only italic text that is inside bold text. Which CSS selector should you use?

A strong em

B em strong

C strong > em

D em > strong

💡 Hint

Think about the order and relationship between parent and child in selectors.

The selector 'strong em' selects all elements inside any element, at any depth. 'strong > em' selects only direct children. 'em strong' and 'em > strong' select inside , which is the opposite.

❓ layout

advanced

How does combining and tags affect text layout?

If you write Text, how will the text appear visually and in layout?

A Text appears italic only, ignoring bold styling.

B Text appears bold and italic, and takes up space as normal inline text.

C Text appears only bold, ignoring italic styling.

D Text appears bold and italic, but becomes a block element pushing content below.

💡 Hint

Both and are inline elements affecting style but not layout block.

Both and are inline tags. They style text but do not change the flow or block layout. The text remains inline, bold, and italic.

❓ accessibility

expert

Which is the best semantic way to mark important italicized text for screen readers?

You want to mark text as important and italic for screen readers and visual users. Which HTML is best?

A <em><strong>Text</strong></em>

B <strong>Text</strong>

C <strong><em aria-label="important emphasis">Text</em></strong>

D <em>Text</em>

💡 Hint

Consider both semantic meaning and accessibility labels.

Option C uses for importance and for emphasis, plus an aria-label to clarify meaning for screen readers. Option C reverses nesting but lacks aria-label. Options C and D miss either emphasis or importance.

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