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.