Em vs i tag in HTML - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference between and tags

Which statement best describes the difference between the and tags in HTML?

A <em> is deprecated and should not be used, while <i> is the modern tag for emphasis.

B <i> is used for emphasis and affects screen readers, while <em> is for text styling without emphasis.

C <em> is used for emphasis and affects screen readers, while <i> is for text styling without emphasis.

D <em> and <i> tags are completely interchangeable with no difference.

💡 Hint

Think about how screen readers treat these tags differently.

marks text that should be emphasized and is read with emphasis by screen readers. is for text that is stylistically different but not emphasized, like foreign words or technical terms.

❓ rendering

intermediate

Visual output of vs

What will the browser visually display for this HTML snippet?

<p>This is <em>important</em> and this is <i>italic</i>.</p>

A The words 'important' and 'italic' are both shown in italic style.

B The word 'important' is bold and 'italic' is italicized.

C Only 'important' is italicized; 'italic' is normal text.

D Both words are bold and underlined.

💡 Hint

Both tags usually render text in italics by default.

By default, browsers render both and text in italics, so both words appear italicized.

❓ accessibility

advanced

Screen reader behavior with and

When a screen reader reads this HTML:

<p>This is <em>very important</em> and <i>just styled</i> text.</p>

How does it treat the and parts?

A It reads both 'very important' and 'just styled' with vocal emphasis.

B It adds vocal emphasis to 'very important' but reads 'just styled' normally.

C It ignores both tags and reads all text the same.

D It skips the <em> text and only reads the <i> text.

💡 Hint

Consider which tag conveys meaning beyond style.

Screen readers add emphasis to text to convey importance, but treat text as normal since it is only stylistic.

📝 Syntax

advanced

Correct nesting of and tags

Which HTML snippet is correctly nested and valid?

A <p>This is <em>very <em>important</i></em> text.</p>

B <p>This is <i>very <em>important</i></em> text.</p>

C <p>This is <i>very <i>important</em></i> text.</p>

D <p>This is <em>very <i>important</i></em> text.</p>

💡 Hint

Tags must open and close in the correct order.

Option D correctly nests inside and closes tags in reverse order. Others have mismatched or overlapping tags causing invalid HTML.

❓ selector

expert

CSS selector targeting inside

Given this HTML:

<p><i>This is <span><em>special</em></span> text</i>.</p>

Which CSS selector will style only the tag inside the tag?

A i em { color: red; }

B i > em { color: red; }

C em i { color: red; }

D p em { color: red; }

💡 Hint

Think about descendant vs direct child selectors.

Selector 'i em' targets any inside at any depth. 'i > em' targets only direct children, which is not. 'em i' and 'p em' target wrong elements.

Practice

1. What is the main purpose of the <em> tag in HTML?

easy

A. To make text bold

B. To italicize text without changing meaning

C. To emphasize text and indicate importance or stress

D. To underline text

Solution

1. Step 1: Understand the semantic meaning of <em>

   The <em> tag is used to emphasize text, which changes the meaning or stress of the content.

2. Step 2: Compare with other tags

   The <i> tag only styles text as italic without adding meaning, unlike <em> which adds emphasis.

3. Final Answer:

   To emphasize text and indicate importance or stress -> Option C

4. Quick Check:

   <em> = emphasis meaning [OK]

Hint: Em means emphasis, i means italic style only [OK]

Common Mistakes:

• Confusing <em> with <i> as just italic style
• Thinking <em> makes text bold
• Using <i> for emphasis instead of style

2. Which of the following is the correct syntax to emphasize the word "important" in a sentence?

easy

A. important

B. important

C. important

D. important

Solution

1. Step 1: Identify the tag for emphasis

   The <em> tag is used to emphasize text, which fits the requirement.

2. Step 2: Check other tags

   <i> italicizes without emphasis, <strong> and <b> make text bold but differ in meaning.

3. Final Answer:

   <em>important</em> -> Option B

4. Quick Check:

   Emphasize with <em> tag [OK]

Hint: Use <em> for emphasis, not just italics [OK]

Common Mistakes:

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

3. What will the browser visually show for this HTML snippet?

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

medium

A. The word 'very' is italicized and screen readers emphasize it

B. The word 'very' is bolded

C. The word 'very' is underlined

D. The word 'very' is normal text with no style

Solution

1. Step 1: Understand <em> rendering

   The <em> tag typically italicizes text and signals emphasis to screen readers.

2. Step 2: Check visual and accessibility effects

   Browsers show italic style, and assistive tech adds emphasis in speech.

3. Final Answer:

   The word 'very' is italicized and screen readers emphasize it -> Option A

4. Quick Check:

   <em> = italic + emphasis [OK]

Hint: Em tag italicizes and adds meaning, not just style [OK]

Common Mistakes:

• Thinking <em> makes text bold
• Ignoring screen reader emphasis
• Confusing <em> with <b>

4. Find the error in this HTML snippet if the goal is to emphasize the word "note":

<p>Please <i>note</em> this carefully.</p>

medium

A. No error, code is correct

B. Using <i> instead of <em> for emphasis

C. Missing <strong> tag for emphasis

D. Mismatched closing tag: </em> instead of </i>

Solution

1. Step 1: Check tag pairs

   The opening tag is <i> but the closing tag is </em>, which is incorrect HTML syntax.

2. Step 2: Understand correct closing tag

   Tags must match exactly, so <i> must close with </i>.

3. Final Answer:

   Mismatched closing tag: </em> instead of </i> -> Option D

4. Quick Check:

   Matching tags must open and close the same [OK]

Hint: Opening and closing tags must match exactly [OK]

Common Mistakes:

• Mixing <i> and <em> tags
• Ignoring tag mismatch errors
• Assuming <i> and <em> are interchangeable

5. You want to write a sentence where the word "important" is italicized for style only, and the word "really" is emphasized for meaning. Which HTML is correct?

hard

A. <p>This is <i>important</i> and <em>really</em> urgent.</p>

B. <p>This is <em>important</em> and <i>really</i> urgent.</p>

C. <p>This is <b>important</b> and <strong>really</strong> urgent.</p>

D. <p>This is <em>important</em> and <em>really</em> urgent.</p>

Solution

1. Step 1: Identify style-only italic

   The <i> tag is used for italic style without emphasis, so it fits for "important".

2. Step 2: Identify emphasis tag

   The <em> tag adds meaning and emphasis, suitable for "really".

3. Step 3: Verify the sentence structure

   <p>This is <i>important</i> and <em>really</em> urgent.</p> correctly uses <i> for style and <em> for emphasis in the right places.

4. Final Answer:

   <p>This is <i>important</i> and <em>really</em> urgent.</p> -> Option A

5. Quick Check:

   Italic style = <i>, emphasis = <em> [OK]

Hint: Use <i> for style, <em> for meaning emphasis [OK]

Common Mistakes:

• Using <em> for style-only italic
• Using <i> for emphasis meaning
• Mixing bold tags instead of italic/emphasis