HTML formatting tags define the appearance and structural meaning of text on a web page. Rather than relying solely on visual styles, semantic formatting tags tell search engines, screen readers, and web browsers how text content should be interpreted.
HTML distinguishes between semantic formatting (which conveys importance or emphasis) and physical formatting (which only changes text appearance).
flowchart TD
A["Text Formatting"] --> B["Semantic Tags"]
A --> C["Physical / Visual Tags"]
B --> B1["strong: Important text (bold)"]
B --> B2["em: Emphasized text (italic)"]
B --> B3["mark: Highlighted text"]
C --> C1["b: Bold for visual offset"]
C --> C2["i: Italic for alternate voice/technical term"]
Here are the standard HTML formatting tags used in web development:
<strong>: Indicates high importance, seriousness, or urgency. Rendered as bold by default.<b>: Offsets text visually without implying extra importance or emphasis (e.g., key words in a product summary).<em>: Adds stress emphasis that changes the vocal accent or meaning of a sentence. Rendered as italic by default.<i>: Offsets text for an alternate voice, technical terms, idiomatic phrases, or taxonomic designations.<mark>: Highlights text relevant to a specific context (like search term results).<small>: Represents side comments, legal disclaimers, or copyright fine print.<del>: Shows deleted text with a strikethrough (useful for price drops or edit history).<ins>: Shows inserted text with an underline (pairs with <del> to indicate updates).<sub>: Formats text as subscript (H2O), lowering it slightly below the baseline.<sup>: Formats text as superscript (E = mc2), raising it above the baseline.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Formatting Example</title>
</head>
<body>
<h2>Product Discount Announcement</h2>
<!-- Price discount using del and ins -->
<p>Special deal: Original price <del>$99.99</del> is now <ins>$49.99</ins>!</p>
<!-- Important warning using strong -->
<p><strong>Warning:</strong> Offer expires at midnight UTC.</p>
<!-- Contextual highlight using mark -->
<p>Search match: Learning <mark>HTML5 formatting</mark> improves content accessibility.</p>
<!-- Scientific notation using sub and sup -->
<p>Chemical formula for water: H<sub>2</sub>O</p>
<p>Mathematical exponent: 2<sup>10</sup> = 1024</p>
<!-- Fine print using small -->
<p><small>© 2026 KoderSolution. All rights reserved. Terms and conditions apply.</small></p>
</body>
</html>
<strong> and <em> over <b> and <i>: Screen readers use audio emphasis for <strong> and <em> elements. Using <b> or <i> only changes visual appearance without aiding assistive technology users.<small> for main body text sizing: Use CSS font-size properties to adjust paragraph size across your application layout instead of nesting paragraphs inside <small> tags.<del> and <ins> with datetime attributes: When documenting changes or audit logs in web applications, add datetime="2026-08-12" to <del> and <ins> tags to provide semantic timestamp metadata.Create an HTML snippet that displays an original retail price struck through (<del>), a discounted price highlighted (<ins> + <mark>), and a footnote disclaimer at the bottom using the <small> tag!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.