Difficulty: Beginner
HTML provides a rich set of inline elements for formatting text. These elements are not just visual - they carry semantic meaning that helps browsers, search engines, and assistive technologies understand the importance and purpose of the text. Understanding the difference between semantic and purely visual formatting is key to writing good HTML.
The <strong> element indicates text of strong importance. Browsers render it as bold by default. It is different from the older <b> tag: <strong> means 'this text is important,' while <b> means 'this text should be visually bold without extra importance.' For example, a warning message should use <strong> because the content is genuinely important, while a product name in a review might use <b> because it is just visually distinguished. Similarly, <em> indicates emphasis (rendered as italic), while <i> is purely visual italics without emphasis.
The <mark> element highlights text as if it were marked with a yellow highlighter. It is commonly used to indicate search result matches or to draw attention to relevant text within a quoted passage. The <small> element represents side comments and small print, like legal disclaimers, copyright notices, or caveats. Despite its name, <small> is semantic - it means 'this is supplementary or legal text,' not just 'make this smaller.'
Subscript (<sub>) and superscript (<sup>) elements are used for text that should appear below or above the normal text baseline, respectively. Subscript is commonly used in chemical formulas (H<sub>2</sub>O) and mathematical variables. Superscript is used for footnote references, mathematical exponents (x<sup>2</sup>), and ordinal indicators (1<sup>st</sup>, 2<sup>nd</sup>). These elements are essential for correctly displaying scientific and mathematical notation.
The <del> and <ins> elements represent deleted and inserted text, respectively. <del> renders with a strikethrough line, indicating content that has been removed. <ins> renders with an underline, indicating content that has been added. These are particularly useful for showing document revisions, track changes, or price changes on e-commerce sites. Both elements accept datetime and cite attributes to indicate when and why the change was made.
<!-- <strong> = important text (bold) -->
<p><strong>Warning:</strong> Do not delete the system files.</p>
<!-- <em> = emphasized text (italic) -->
<p>You <em>must</em> complete the form before submitting.</p>
<!-- Nested for extra emphasis -->
<p><strong><em>Critical:</em> Back up your data immediately.</strong></p>
<!-- <b> vs <strong> -->
<p>Product: <b>SuperWidget Pro</b></p> <!-- Visual bold, no importance -->
<p><strong>Danger: High voltage</strong></p> <!-- Important text -->Use <strong> when text is genuinely important and <em> for emphasis that changes the meaning of a sentence. <b> and <i> are visual-only variants without semantic weight.
<!-- <mark> highlights text like a marker pen -->
<p>Search results for "HTML":</p>
<p>Learn <mark>HTML</mark> basics in this comprehensive guide to <mark>HTML</mark> elements.</p>
<!-- <small> for side comments and fine print -->
<p>Premium Plan: $29/month</p>
<p><small>Prices may vary by region. Cancel anytime.</small></p>
<!-- Combining elements -->
<p>
<strong>Sale:</strong> All items <mark>50% off</mark>
<small>(while supplies last)</small>
</p>The <mark> element highlights text with a yellow background by default. <small> is used for supplementary information like disclaimers and fine print.
<!-- Chemical formulas -->
<p>Water: H<sub>2</sub>O</p>
<p>Carbon dioxide: CO<sub>2</sub></p>
<p>Caffeine: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></p>
<!-- Mathematical expressions -->
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>2<sup>10</sup> = 1024</p>
<!-- Footnotes -->
<p>This claim has been verified.<sup><a href="#fn1">[1]</a></sup></p>
<!-- Ordinals -->
<p>1<sup>st</sup> place, 2<sup>nd</sup> place, 3<sup>rd</sup> place</p>Subscript (<sub>) places text below the baseline for chemical formulas and variables. Superscript (<sup>) places text above for exponents, footnotes, and ordinals.
<!-- Price change -->
<p>
Price: <del>$49.99</del> <ins>$29.99</ins>
<small>(Limited time offer)</small>
</p>
<!-- Document revision -->
<p>
The meeting is on
<del datetime="2026-03-10">Tuesday</del>
<ins datetime="2026-03-11">Wednesday</ins>
at 3pm.
</p>
<!-- Todo list with completed items -->
<ul>
<li><del>Set up project repository</del></li>
<li><del>Design database schema</del></li>
<li>Build API endpoints</li>
<li>Write unit tests</li>
</ul>The <del> element shows removed content with a strikethrough. <ins> shows added content with an underline. The datetime attribute records when the change was made.
strong, em, mark, small, sub, sup, del, ins, Semantic Meaning