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.