Bold and italic text in HTML - Browser Rendering Trace

Render Flow - Bold and italic text

Read <p>

→Create P node

↓

Read <em>

→Create EM node as child

The browser reads the paragraph element, then creates child nodes for strong and em tags, applying bold and italic styles respectively during painting.

Render Steps - 3 Steps

Code Added:<p> element with plain text

Before

[ ]

(Empty page)

→

After

[p]
|  Bold Text and Italic Text

The paragraph element appears with normal text on the page.

🔧 Browser Action:Creates DOM node for <p> and paints normal text

Code Sample

This code shows a paragraph with some text in bold and some text in italic.

HTML

<p><strong>Bold Text</strong> and <em>Italic Text</em></p>

Render Quiz - 3 Questions

After step 2, how does the text inside <strong> appear?

A Underlined

B Slanted (italic)

C Thicker and darker (bold)

D Normal weight

Common Confusions - 2 Topics

Why does <b> look the same as <strong> but mean something different?

<b> just makes text bold visually without meaning, while <strong> means the text is important or urgent. Browsers style both bold by default, but screen readers treat them differently.

💡 Use <strong> for important text, <b> for just styling.

Why doesn't <em> always make text italic in some browsers?

Most browsers style <em> as italic by default, but if CSS overrides font-style, it might not show italic. The semantic meaning remains emphasis regardless.

💡 Check CSS if <em> text is not italic.

Property Reference

Element	Default Style	Visual Effect	Semantic Meaning
<strong>	font-weight: bold	Text appears thicker and darker	Indicates strong importance
<b>	font-weight: bold	Text appears thicker and darker	Stylistic bold without extra importance
<em>	font-style: italic	Text appears slanted	Indicates emphasis
<i>	font-style: italic	Text appears slanted	Stylistic italic without emphasis

Concept Snapshot

<strong> and <b> make text bold; <strong> means important text. <em> and <i> make text italic; <em> means emphasis. Browsers style <strong> and <b> as bold, <em> and <i> as italic by default. Use semantic tags (<strong>, <em>) for meaning, stylistic tags (<b>, <i>) for appearance only.

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