Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<strong>Strong importance
<em>Emphasis / stress
<mark>Highlighted text
<code>Computer code
<kbd>Keyboard input
<del> / <ins>Deleted / Inserted
✓ Better for accessibility
✓ Improved SEO
✓ Machine-readable
<b>Bold (no importance)
<i>Italic (no emphasis)
<u>Underlined
<s>Strikethrough
<small>Smaller text
<sub> / <sup>Subscript / Superscript
⚠ Visual styling only
⚠ No semantic meaning
⚠ Prefer CSS when possible
Convey meaning to browsers, screen readers & search engines
Only change visual appearance without adding meaning
Choose semantic first, presentational only when necessary
Common text formatting elements with semantic meaning
<h2>Semantic Text Formatting</h2>
<p><strong>Important:</strong> This is critically important information!</p>
<p><em>Emphasis:</em> This changes the tone and inflection.</p>
<p>Search result: The <mark>highlighted</mark> term matches your query.</p>
<p>Code snippet: Use <code>npm install</code> to get started.</p>
<p>Keyboard input: Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<blockquote>
<p>"Design is not just what it looks like. Design is how it works."</p>
<cite>— Steve Jobs</cite>
</blockquote>
<p>Chemical formula: H<sub>2</sub>O</p>
<p>Math expression: E = mc<sup>2</sup></p>
<p>Price: <del>$99.99</del>
<ins>$79.99</ins></p>
<p>Published: <time datetime="2025-11-22">November 22, 2025</time></p>Loading preview...
Semantic elements (<strong>, <em>, <code>) communicate intent & structure to browsers, assistive tech & search engines. Presentational (<b>, <i>) only change look.
Interactive examples showing when to use each text formatting element
<strong>Strong importance – signals critical, urgent, or serious content; conveys emphasis to assistive tech.
<em>Stress emphasis – changes meaning/inflection of the surrounding sentence.
<mark>Highlights text relevant to a current task or context (e.g. search result highlight).
<blockquote>Denotes extended quotation block; can include cite attribute for source.
<q>Inline short quotation; browsers add quotation marks automatically.
<abbr>Abbreviation or acronym; use title attribute to provide the full expansion.
<cite>Title of a creative work (book, paper, film, etc.).
<dfn>Term being defined; first occurrence of a definition.
<time>Machine‑readable date/time; use datetime attribute (ISO 8601).
<del>Deleted / removed text (can have cite & datetime attributes).
<ins>Inserted / added text (can have cite & datetime attributes).
<code>Fragment of code or command.
<samp>Sample output from a program or system.
<kbd>User keyboard / input entry (shortcut keys).
<var>Variable or placeholder name (conveys a semantic role in math/code).
<b>Stylistic bold without semantic importance (prefer <strong> if importance matters).
<i>Stylistic italics for technical terms, taxonomic names, etc. (prefer <em> for emphasis).
<u>Non-text annotation rendered with underline (avoid confusion with links).
<s>Strikethrough for text that is no longer relevant (not a deletion edit; use <del> for editorial removal).
<small>Side comments / disclaimers / fine print.
<sub>Subscript (chemical formulas, mathematical indices).
<sup>Superscript (exponents, footnote markers).
<abbr>Attributes: title
Full expansion for accessibility & tooltips.
<blockquote>Attributes: cite
Source URL or reference for quotation.
<q>Attributes: cite
Source reference (rarely used, but valid).
<time>Attributes: datetime
Machine readable time aiding SEO & structured data.
<del>/<ins>Attributes: cite, datetime
Explain origin and timestamp of changes.
<code> – inline code snippet
<kbd> – keyboard / input sequence
<samp> – sample output
<var> – placeholder variable
Accessibility hints:
<pre> + <code> for blocks<kbd> for menu labels<var> in math<code>Learn code, keyboard input, sample output, and variable notation elements
Deletion
<del datetime="2025-11-22">Old</del>Insertion
<ins datetime="2025-11-22">New</ins>Highlight
<mark>Match</mark>Explore del, ins, mark, and strikethrough elements for tracking changes
<time datetime="2025-11-22">Nov 22, 2025</time>
<time datetime="2025-12-01T09:30:00Z">Dec 1 09:30 UTC</time>
<sub>,<sup> for formulas
Benefits:
Master time elements, subscript, and superscript for dates and formulas
Accessibility Tips
<strong>/<em> over <b>/<i>title to <abbr>datetime on <time><code> blocksSEO Enhancers
| Tag | Meaning / Use | Typical Rendering | Key Attributes | Accessibility Note |
|---|---|---|---|---|
| <strong> | Strong importance | Bold | — | Emphasis announced |
| <em> | Stress emphasis | Italic | — | Changes tone |
| <mark> | Relevant highlight | Highlighted background | — | Avoid overuse |
| <b> | Stylistic bold | Bold | — | No semantic weight |
| <i> | Stylistic italics | Italic | — | No tone change |
| <u> | Annotation underline | Underline | — | May confuse with links |
| <s> | No longer accurate | Strikethrough | — | Not an edit removal |
| <small> | Side note / fine print | Smaller font | — | Ensure readable contrast |
| <sub> | Subscript | Lowered baseline | — | Screen readers read inline |
| <sup> | Superscript | Raised baseline | — | Use for footnotes correctly |
| <code> | Code fragment | Monospace | — | Pair with description |
| <kbd> | User input | Monospace styled key | — | Clear sequence order |
| <samp> | Sample output | Monospace variant | — | Clarify origin |
| <var> | Variable placeholder | Italic monospace | — | Explain in context |
| <abbr> | Abbreviation | Dotted underline (user agent dependent) | title | Title must supply expansion |
| <blockquote> | Long quotation | Indented block | cite | Source context improves clarity |
| <q> | Short quotation | Quotation marks | cite | Ensure clarity of speaker |
| <cite> | Work title | Italic (UA dependent) | — | Not for person names |
| <dfn> | Definition term | Italic (often) | — | First occurrence only |
| <del> | Removed text | Strikethrough | cite, datetime | Change tracking |
| <ins> | Inserted text | Underlined | cite, datetime | Change tracking |
| <time> | Date/time | Inline text | datetime | Machine readable value |
Semantic vs Presentational
<strong>Critical</strong> vs <b>Bold</b><em>Tone shift</em> vs <i>Latin term</i>Technical Set
<code>alert()</code><kbd>Ctrl</kbd>+<kbd>C</kbd>All HTML text formatting elements in one interactive, animated showcase