Styling Web Content for Impact and Clarity
If you have ever looked at a UPSC notification, a JEE admit card, or a national newspaper like The Times of India, you will notice that certain words are bold, some are italicized, and some are highlighted. This is not just for decoration—it is to guide the reader’s eye to the most important information.
In HTML, Text Formatting tags allow us to communicate the “weight” of our words to both users and search engines. For students across India preparing for technical interviews or competitive exams like UGC NET or SSC, understanding the difference between “Visual” and “Semantic” formatting is a core requirement.
Look some analogies –
Think of a government circular or a high-school textbook used in any CBSE or ICSE school.
- Bold Headings: Used for the main Title of the Act or Chapter (The
<strong>tag). - Italicized Terms: Used for scientific names or Latin terms like Pro Bono (The
<em>tag). - Highlighted Text: Like using a neon marker on a Railway (RRB) timetable to show the arrival time (The
<mark>tag). - Strikethrough: Often seen on e-commerce sites like Amazon India or Flipkart to show a discount (The
<del>tag).
1. Physical vs. Semantic Tags (Expert Insight)
At LarasAcademy, we teach you to code for the “Modern Web.” Google’s ranking bots don’t just see “Bold” text; they look for Importance.
| Category | Visual Tag (The “Look”) | Semantic Tag (The “Meaning”) | National Standard |
| Bold | <b> | <strong> | Use <strong> for crucial keywords in your articles. |
| Italic | <i> | <em> | Use <em> to emphasize a specific point in a sentence. |
2. Essential Formatting Tags for Your Project
2.1 Highlighting with <mark>
The <mark> tag is used to draw immediate attention.
- National Context: “The deadline for the UGC NET 2026 application is <mark>January 15th</mark>.”
2.2 Superscript (<sup>) and Subscript (<sub>)
These are vital for scientific and mathematical content, which is a big part of the Indian education system.
- Algebra:
(x+y)<sup>2</sup>renders as (x+y)². - Science:
CO<sub>2</sub>(Carbon Dioxide) renders as CO₂.
2.3 Deleted (<del>) and Inserted (<ins>)
This is the “Discount Duo” used by every major Indian e-commerce to show price changes.
- Example:
Course Fee: <del>₹1000</del> <ins>₹499</ins>
3. Quoting Authorities with <blockquote>
When you are building an educational site, you will often quote great Indian leaders or scientists. Instead of using a regular paragraph, use the <blockquote> element. It tells Google that you are referencing an authoritative source.
HTML
<blockquote>
"Arise, awake, and stop not till the goal is reached." — Swami Vivekananda
</blockquote>HTML Text Formatting Tags and Usage – Summary
| HTML Tag | Name | Category | Visual or Semantic | Usage Example | Real-world Analogy |
|---|---|---|---|---|---|
<strong> | Strong | Formatting | Semantic | <strong>Main Title</strong> | Main Title of the Act or Chapter in a government circular |
<em> | Emphasis | Formatting | Semantic | <em>Pro Bono</em> | Scientific names or Latin terms in high-school textbooks |
<mark> | Mark | Formatting | Visual/Semantic | <mark>January 15th</mark> | Neon marker on a Railway (RRB) timetable or UGC NET deadline |
<del> | Delete | Formatting | Visual/Semantic | <del>₹1000</del> | Discounted prices on e-commerce sites like Amazon India or Flipkart |
<ins> | Insert | Formatting | Visual/Semantic | <ins>₹499</ins> | Updated course fees on educational platforms |
<b> | Bold | Formatting | Visual | <b>Text</b> | Crucial keywords in articles |
<i> | Italic | Formatting | Visual | <i>Text</i> | Emphasis of a specific point |
<sup> | Superscript | Scientific/Mathematical | Visual | (x+y)<sup>2</sup> | Algebra equations in the Indian education system |
<sub> | Subscript | Scientific/Mathematical | Visual | CO<sub>2</sub> | Chemical formulas like Carbon Dioxide in science textbooks |
<blockquote> | Blockquote | Citation | Semantic | <blockquote>"Arise, awake..."</blockquote> | Quoting great Indian leaders or scientists like Swami Vivekananda |
