HTML - Formatting

HTML text formatting elements allow you to modify the visual presentation and semantic meaning of text—including bold weight, italic slant, highlights, strikethroughs, chemical subscripts, and mathematical superscripts.

Tag	Classification	Description & Browser Rendering
`<strong>`	Semantic (Logical)	Marks text of high importance or urgency; rendered in bold and emphasized by screen readers.
`<b>`	Presentational (Physical)	Draws visual attention to text without conveying extra semantic importance; rendered in bold.
`<em>`	Semantic (Logical)	Marks emphasized stress on text that alters spoken pronunciation; rendered in italics.
`<i>`	Presentational (Physical)	Displays text in an alternate voice or mood (e.g., technical terms, foreign phrases); rendered in italics.
`<mark>`	Semantic (HTML5)	Highlights text with a yellow background, indicating reference relevance (e.g., search results).
`<small>`	Semantic (HTML5)	Renders smaller text used for side-comments, legal copyrights, and disclaimers.
`<del>`	Semantic (Revision)	Marks deleted or outdated text; rendered with a strikethrough line across the characters.
`<ins>`	Semantic (Revision)	Marks newly inserted text; rendered with an underline.
`<sub>`	Typographic	Renders subscript text (lowered half a character below baseline), ideal for chemical formulas (H₂O).
`<sup>`	Typographic	Renders superscript text (raised half a character above baseline), ideal for math exponents (x²).
`<font>`	Legacy (Deprecated)	Historical tag used to set font color, size, and face. Obsolete in HTML5—use CSS instead.

Physical vs Semantic Formatting: What Beginners Must Know

In modern HTML5, there is a crucial distinction between Physical Tags (which only affect visual appearance) and Semantic Tags (which convey meaningful structural context to search engine bots and accessibility screen readers):

 vs : Use  for stylistic keywords (like product names in an overview) without conveying urgency. Use  for warnings, serious cautions, and core focal points that Google should weigh heavily for SEO.
 vs : Use  for scientific binomial nomenclature (Homo sapiens), terms in other languages, or ship names. Use  when stress emphasis changes the verbal meaning of a sentence.

Detailed Code Examples

1. Bold and Strong Text


<p>This is <b>bold text</b> for visual styling.</p>
<p><strong>Warning:</strong> Do not share your password with anyone.</p>

2. Italic and Emphasized Text


<p>The term <i>de facto</i> is commonly used in legal discussions.</p>
<p>You <em>must</em> submit your BCA lab assignment on time!</p>

3. Highlighted Text with


<p>Search Result: Learn <mark>HTML5</mark> at Veewom for top college grades.</p>

4. Price Revisions with <del> and <ins>


<p>Regular Price: <del>₹999</del> | Special Offer: <ins>₹499</ins></p>

5. Chemical & Mathematical Formulas ( and )


<p>Water Chemical Formula: H<sub>2</sub>O</p>
<p>Einstein's Equation: E = mc<sup>2</sup></p>

Live Browser Rendering:
Water Chemical Formula: H₂O
Einstein's Equation: E = mc²
Special Offer: ~~₹999~~ ₹499

Why the Tag is Obsolete in HTML5

Historically in HTML 3.2 and 4.01, webmasters used Text. In modern HTML5, the  tag is completely deprecated and obsolete because it violates the principle of separating content (HTML) from presentation (CSS). Modern websites achieve font styling cleanly via CSS:


<!-- Modern CSS Replacement for <font> -->
<p style="color: #27ae60; font-size: 20px; font-family: 'Segoe UI', Tahoma, sans-serif;">
    Veewom Modern Font Styling via CSS
</p>

Hands-on Practice Session for Students

Lab Assignment 8: Build an E-Commerce Product Deal Card.

Problem Statement: Create an HTML card for an electronics store showcasing a laptop. Use  for the model name, <del> and <ins> for price discounts,  for a festival deal badge,  and  for processor specs (e.g., 10^th Gen), and  for the warranty disclaimer.

Solution Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E-Commerce Product Card - Formatting Practice</title>
</head>
<body>
    <div class="deal-card">
        <h2><strong>UltraBook Pro 15</strong> <mark>HOT DEAL</mark></h2>
        <p>Equipped with the 12<sup>th</sup> Gen Intel Core i7 processor and 16GB RAM.</p>
        <p>
            Original Price: <del>₹75,000</del><br>
            Festive Price: <ins><strong>₹59,990</strong></ins>
        </p>
        <p><small>*Terms and conditions apply. 1-year manufacturer warranty included.</small></p>
    </div>
</body>
</html>

Viva & University Exam Questions (BCA Exam Preparation)

Q1: What is the difference between physical tags and logical tags in HTML?

Physical tags (like  and ) dictate the visual rendering of text without providing information about the importance of the text. Logical tags (like  and ) define the semantic importance and role of the text, assisting search engine crawlers and screen readers.

Q2: How do and tags differ in their baseline alignment?

The  (subscript) element positions text lowered below the normal baseline with a reduced font size, whereas  (superscript) positions text raised above the normal baseline with a reduced font size.

Q3: Why was the tag removed in HTML5?

The  tag was deprecated because it mixed visual styling directly with markup structure, leading to repetitive code and poor website maintainability. CSS now provides centralized, maintainable styling control.

Frequently Asked Questions (FAQ)

Can formatting tags be combined (nested) on the same word?

Yes! You can nest tags (e.g., Bold and Italic). Just ensure you close the tags in reverse order of opening (LIFO - Last In, First Out).

Does using tags help my blog rank higher on Google?

Yes. Search engine algorithms analyze  and  tags to identify critical focal concepts within an article. Highlighting key terms naturally signals topical relevance to Googlebot.