🌱BeginnerText Content
Text Formatting Tags
Add meaning to inline text with strong, em, mark, del, ins, sup, sub, and more.
Overview
HTML provides a set of inline elements for giving text additional meaning or emphasis without creating a new block. These are called inline text semantics.
The most important distinction is between semantic tags (which carry meaning) and purely presentational tags (which only affect appearance). HTML5 prefers semantic tags because they help screen readers, search engines, and other tools understand your content.
Key semantic text tags:
- <strong>: important text (renders bold by default)
- <em>: stressed emphasis (renders italic by default)
- <mark>: highlighted/relevant text
- <del>: deleted/removed text
- <ins>: inserted/added text
- <sub> / <sup>: subscript and superscript
- <code>: inline code
- <abbr>: abbreviations
Key Points
- •<strong> marks text as strongly important screen readers may change tone; renders bold
- •<em> marks text as stressed emphasis changes meaning; renders italic
- •<b> and <i> are presentational bold/italic visually but carry no semantic meaning
- •<mark> highlights text as relevant to context (like a yellow highlighter)
- •<del> marks text as removed; <ins> marks text as added used in diffs
- •<code> wraps inline code snippets; <pre><code> is used for code blocks
Examples
Semantic emphasis tags
<p>This is <strong>critically important</strong> information.</p>
<p>Please <em>do not</em> touch the red button.</p><strong> and <em> have meaning; use them when the emphasis matters, not just for styling.
Mark, del, and ins
<p>The meeting is on <mark>Friday</mark>.</p>
<p>Price: <del>$99</del> <ins>$49</ins> Sale!</p><del> and <ins> are common in changelogs, legal documents, and pricing displays.
Subscript, superscript, and code
<p>Water is H<sub>2</sub>O.</p>
<p>Area = πr<sup>2</sup></p>
<p>Use the <code>console.log()</code> function to debug.</p>Abbreviations with <abbr>
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> sets HTML standards.</p>Hovering over the abbreviation shows the full title as a tooltip.
Common Mistakes
- Using <b> and <i> for importance/emphasis prefer <strong> and <em> for semantic meaning
- Overusing <strong> if everything is important, nothing is
- Using <sub> or <sup> for layout tricks (like tiny footnote text) instead of for math/chemistry
Note
If you're using a tag purely to make text look different, that's a CSS job. Choose HTML tags based on what the text means, not how you want it to look.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4