Bold and italic text in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What HTML tag is used to make text bold?

The <strong> tag is used to make text bold and also indicates strong importance.

beginner

Which HTML tag is used to make text italic?

The <em> tag is used to make text italic and also indicates emphasis.

intermediate

What is the difference between <b> and <strong> tags?

<b> makes text bold without extra meaning, while <strong> makes text bold and signals strong importance to screen readers.

beginner

How do you combine bold and italic styles in HTML?

You can nest tags like <strong><em>Text</em></strong> to make text both bold and italic.

intermediate

Why should you prefer <em> and <strong> over <i> and <b>?

Because <em> and <strong> add meaning (emphasis and importance) which helps screen readers and improves accessibility.

Which tag should you use to make text bold and indicate strong importance?

A <em>

B <strong>

C <b>

D <i>

The tag makes text bold and signals strong importance, helping screen readers.

Which tag is best for italicizing text to show emphasis?

A <b>

B <strong>

C <em>

D <i>

The tag italicizes text and indicates emphasis, improving accessibility.

What happens if you use <b> instead of <strong>?

A Text becomes bold without semantic meaning

B Text becomes italic

C Text becomes underlined

D Text becomes bold and emphasized

makes text bold but does not add semantic meaning for screen readers.

How can you make text both bold and italic in HTML?

A All of the above

B Use <strong><em>Text</em></strong>

C Use <em><strong>Text</strong></em>

D Use <b><i>Text</i></b>

Nesting and or and tags all make text bold and italic.

Why is semantic HTML important for bold and italic text?

A It changes the font size

B It makes text blink

C It changes the background color

D It helps screen readers understand meaning

Semantic tags like and help screen readers by adding meaning to the text.

Explain how to make text bold and italic in HTML and why semantic tags matter.

Think about tags that add meaning, not just style.

Describe the difference between and tags and when to use each.

One is just style, the other adds meaning.

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