🟢 Foundation · Lesson 07

Text Formatting Tags

All Formatting Tags at Once

<b>Bold</b>  <strong>Strong</strong>  <i>Italic</i>  <em>Emphasized</em>
<u>Underline</u>  <mark>Highlighted</mark>  <small>Small text</small>
<del>Deleted</del>  <ins>Inserted</ins>
H<sub>2</sub>O          x<sup>2</sup>

Bold Strong Italic Emphasized Underline [Highlighted in yellow] small text D̶e̶l̶e̶t̶e̶d̶ Inserted H₂O x²

Notice: b/strong LOOK identical, i/em LOOK identical. So why do both pairs exist? That is the exam-favorite question — answered next.

b vs strong, i vs em — same look, different MEANING

Tag	Type	Says to browser/Google/screen reader
`<b>`	Visual only	"Make it bold" — no importance implied
`<strong>`	Semantic	"This is IMPORTANT" — screen readers stress it, search engines note it
`<i>`	Visual only	"Make it slanted" — book titles, foreign words
`<em>`	Semantic	"EMPHASIZE this" — changes the sentence's stress

<p><strong>Warning:</strong> Last date is 15 August.</p>   ← importance
<p>The book <i>Godan</i> was written by Premchand.</p>      ← just styling

Interview line: "b and i are presentational; strong and em are semantic — same appearance, but strong/em carry meaning for screen readers and SEO. HTML5 recommends the semantic pair when the text truly matters."

sub and sup — chemistry and maths

Water: H<sub>2</sub>O
Formula: (a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>
Date: 15<sup>th</sup> August

Water: H₂O Formula: (a+b)² = a² + 2ab + b² Date: 15ᵗʰ August

sub = subscript (below the line), sup = superscript (above the line). Every school science/maths page needs these two.

del, ins, mark — showing changes

<p>Fees: <del>₹1500</del> <ins>₹1200</ins> <mark>Diwali Offer!</mark></p>

Fees: ₹̶1̶5̶0̶0̶ ₹1200 [Diwali Offer! ← highlighted yellow]

The classic price-cut pattern every e-commerce site uses: del strikes out the old price, ins underlines the new one, mark highlights like a yellow marker pen. All three are semantic — they say WHAT changed, not just how it looks.

Exam Corner

Q: Difference between b and strong? Same look; b is visual-only, strong marks real importance (semantic) — screen readers stress it.

Q: Which tag for H2O's 2? . For x²'s 2? .

Q: Which tag highlights text like a marker?  — yellow background by default, HTML5 tag.

Q: Show old and new price properly? <del>old</del> <ins>new</ins>.

सारे Formatting Tags एक साथ

<b>Bold</b>  <strong>Strong</strong>  <i>Italic</i>  <em>Emphasized</em>
<u>Underline</u>  <mark>Highlighted</mark>  <small>Small text</small>
<del>Deleted</del>  <ins>Inserted</ins>
H<sub>2</sub>O          x<sup>2</sup>

Bold Strong Italic Emphasized Underline [पीले में Highlighted] small text D̶e̶l̶e̶t̶e̶d̶ Inserted H₂O x²

ध्यान दीजिए: b/strong एक जैसे DIKHTE हैं, i/em एक जैसे DIKHTE हैं. तो दोनों pairs क्यों हैं? यही exam-favorite सवाल है — जवाब अगले section में.

b vs strong, i vs em — रूप same, MATLAB अलग

Tag	Type	Browser/Google/screen reader से क्या कहता है
`<b>`	सिर्फ visual	"Bold कर दो" — कोई अहमियत नहीं जताता
`<strong>`	Semantic	"यह ZAROORI है" — screen readers ज़ोर देते हैं, search engines note करते हैं
`<i>`	सिर्फ visual	"तिरछा कर दो" — किताबों के नाम, विदेशी शब्द
`<em>`	Semantic	"इस पर ZOR दो" — वाक्य का stress बदलता है

<p><strong>Warning:</strong> Last date is 15 August.</p>   ← अहमियत
<p>The book <i>Godan</i> was written by Premchand.</p>      ← सिर्फ styling

Interview line: "b और i presentational हैं; strong और em semantic — दिखते same हैं, पर strong/em screen readers और SEO के लिए meaning रखते हैं. Text सच में ज़रूरी हो तो HTML5 semantic pair recommend करता है."

sub और sup — chemistry और maths

Water: H<sub>2</sub>O
Formula: (a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>
Date: 15<sup>th</sup> August

Water: H₂O Formula: (a+b)² = a² + 2ab + b² Date: 15ᵗʰ August

sub = subscript (line के नीचे), sup = superscript (line के ऊपर). School के हर science/maths page को ये दोनों चाहिए.

del, ins, mark — बदलाव दिखाना

<p>Fees: <del>₹1500</del> <ins>₹1200</ins> <mark>Diwali Offer!</mark></p>

Fees: ₹̶1̶5̶0̶0̶ ₹1200 [Diwali Offer! ← पीला highlight]

वही classic price-cut pattern जो हर e-commerce site use करती है: del पुरानी कीमत काटता है, ins नई को underline करता है, mark पीले marker जैसा highlight. तीनों semantic हैं — बताते हैं KYA बदला, सिर्फ दिखावट नहीं.

Exam Corner

Q: b और strong में अंतर? दिखते same; b सिर्फ visual है, strong असली अहमियत mark करता है (semantic) — screen readers ज़ोर देते हैं.

Q: H2O के 2 के लिए कौन-सा tag? . x² के 2 के लिए? .

Q: Marker जैसा highlight कौन-सा tag करता है?  — default पीला background, HTML5 tag.

Q: पुरानी और नई कीमत सही तरीके से? <del>old</del> <ins>new</ins>.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.