Text Formatting Tags in HTML
When we create web pages using HTML, we often want to make the text look a certain way. This is called text formatting. Formatting means changing how the text appears — like making it bold, italic, underlined, bigger, smaller, or even changing its importance.
How you take notes on paper?
Sometimes you underline something important. Sometimes you write a heading bigger than the rest. In the same way, HTML gives us special tags that help us format text to make it more clear and attractive.
For example, if we want some text to stand out, we can make it bold. If we want to show something in a softer way, we can make it italic. If we really want to highlight something, we might choose to underline it.
HTML has many tags for this purpose: –
1. <b> — Bold Text
Makes the text bold, without giving any extra importance.
Example:
<b>This is bold text.</b>Output: This is bold text.
2. <strong> — Strong (Important) Text
Makes the text bold and shows that it is very important.
Example:
<strong>This is important text.</strong>Output: This is important text.
3. <i> — Italic Text
Makes the text slanted (italic), without adding extra importance.
Example:
<i>This is italic text.</i>Output: This is italic text.
4. <em> — Emphasized Text
Makes the text italic and shows that it should be spoken with stress or more importance.
Example:
<em>This is emphasized text.</em>Output: This is emphasized text.
5. <u> — Underlined Text
Adds a line under the text.
Example:
<u>This is underlined text.</u>Output: This is underlined text.
6. <mark> — Marked (Highlighted) Text
Highlights the text with a yellow background like a highlighter.
Example:
<mark>This text is highlighted.</mark>Output: This text is highlighted.
7. <small> — Smaller Text
Makes the text smaller than normal text.
Example:
<small>This is small text.</small>Output: This is small text.
8. <del> — Deleted (Cut) Text
Shows that the text is deleted by drawing a line through it.
Example:
<del>This text is deleted.</del>Output: This text is deleted.
9. <ins> — Inserted (Newly Added) Text
Shows that the text is newly inserted by underlining it.
Example:
<ins>This is inserted text.</ins>Output: This is inserted text.
10. <sub> — Subscript Text
Moves the text below the normal line, like writing chemical formulas.
Example:
H<sub>2</sub>OOutput: H₂O
11. <sup> — Superscript Text
Moves the text above the normal line, like writing powers in math.
Example:
2<sup>4</sup>Output: 2⁴
Important Questions
What is the difference between <b> and <strong> tags in HTML?
Both make the text bold, but <strong> also adds importance to the text, which helps screen readers and SEO.<b> is only for visual bold styling without any meaning.
When should we use <em> instead of <i>?
Use <em> when you want to emphasize the text meaningfully (like stressing a word when speaking).
Use <i> only for styling without extra meaning.
Why do we need <mark> tag in HTML?
The <mark> tag is used to highlight important text on a webpage, usually with a yellow background, so that it stands out.
What happens if you use both <del> and <ins> tags together?
You can show what text was deleted and what new text was inserted. This is useful for showing document edits or changes clearly.
Which tags are used for writing chemical formulas or mathematical expressions like H₂O and 5²?
Use <sub> for subscript (below the line) like H₂O, and <sup> for superscript (above the line) like 5².
What is semantic meaning in the context of text formatting tags?
Semantic meaning means giving purpose to the text, not just style.
Example: <strong> gives meaning (important), while <b> only changes appearance.
Can you nest formatting tags inside each other? For example, <strong><em>Text</em></strong>?
Yes, you can nest formatting tags.
The browser will apply both formats: here the text will be bold and italic at the same time.
What is the visual difference between <b> and <strong> on a webpage?
Visually, both <b> and <strong> look the same (bold).
The difference is only in meaning — <strong> adds importance for accessibility and SEO.
Is it correct to use <u> for hyperlinks instead of <a> tag?
No, <u> only underlines the text but does not make it clickable.
For links, you must use the <a> tag.
Why is it better to use semantic tags like <strong>, <em>, <ins>, instead of just visual tags like <b>, <i>, <u>?
Semantic tags improve accessibility (for screen readers), SEO (for search engines), and help browsers understand the purpose of the text, not just the appearance.