HTML Formatting


🔹 What is HTML Formatting?

HTML formatting tags are used to style text to appear bold, italic, underlined, and more. These tags help emphasize or structure text content in a meaningful way.


🔹 Common Formatting Tags

Tag Description Example Use
<b> Bold text (no semantic meaning) <b>Important</b>
<strong> Strong importance (bold, semantic) <strong>Warning!</strong>
<i> Italic text (no semantic meaning) <i>Italic word</i>
<em> Emphasized text (italic, semantic) <em>Note this</em>
<mark> Highlighted text <mark>Highlighted</mark>
<u> Underlined text <u>Underline</u>
<small> Smaller text <small>Fine print</small>
<del> Deleted text (strike-through) <del>Old Price</del>
<ins> Inserted (underlined) text <ins>New Content</ins>
<sub> Subscript text H<sub>2</sub>O
<sup> Superscript text X<sup>2</sup>

🔹 Examples of Usage
<p>This is a <b>bold</b> word.</p>
<p>This is a <strong>strong</strong> warning.</p>
<p>This is an <i>italic</i> word.</p>
<p>This is an <em>emphasized</em> phrase.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <del>deleted</del> and <ins>inserted</ins> text.</p>
<p>Water formula: H<sub>2</sub>O</p>
<p>Square: X<sup>2</sup></p>

🔹 Semantic vs Non-Semantic Tags

Semantic Non-Semantic
<strong> <b>
<em> <i>

Semantic tags provide meaning to browsers and search engines.


Practice Questions

Q1. Make a word bold using the <b> tag.

Q2. Create a paragraph with a <strong> warning.

Q3. Italicize a sentence using the <i> tag.

Q4. Emphasize the word “important” using <em>.

Q5. Highlight a phrase using the <mark> tag.

Q6. Use <u> to underline a sentence.

Q7. Display a note in smaller font using <small>.

Q8. Strike through the text “Old Price” with <del>.

Q9. Write a subscript formula for H₂O using <sub>.

Q10. Write "E = mc²" using <sup> for the 2.


HTML Formatting Quiz

Q1: Which tag is used for bold text without semantic meaning?

A. <strong>
B. <em>
C. <b>
D. <bold>

Q2: What does <em> tag do?

A. Makes text small
B. Underlines text
C. Italicizes and adds emphasis
D. Adds a comment

Q3: Which tag highlights text?

A. <highlight>
B. <hl>
C. <mark>
D. <color>

Q4: What is the difference between <i> and <em>?

A. No difference
B. <em> has semantic meaning
C. <i> is for emphasis
D. <em> makes text bold

Q5: What tag would you use for subscript?

A. <sub>
B. <subscript>
C. <lower>
D. <small>

Q6: Which tag would create superscript text?

A. <super>
B. <up>
C. <sup>
D. <top>

Q7: How do you show deleted text?

A. <del>
B. <remove>
C. <strike>
D. <cut>

Q8: Which tag adds underlined text?

A. <u>
B. <underline>
C. <line>
D. <em>

Q9: What tag adds newly inserted text with underline?

A. <new>
B. <u>
C. <ins>
D. <em>

Q10: Which is correct for smaller text?

A. <sml>
B. <small>
C. <min>
D. <short>

Go Back Top