Lesson 45 of 55 · HTML
Inline Text Tags
Duration: 8 min
Inline Formatting
Use these tags to emphasize or style small fragments of text without breaking flow.
| Tag | Semantic meaning | Visual default |
|---|---|---|
<strong> | Strong importance | Bold |
<em> | Emphasis | Italic |
<b> | Visual bold only (no semantic weight) | Bold |
<i> | Visual italic only (no semantic weight) | Italic |
<u> | Underline (non‑semantic) | Underlined |
<small> | Side comment or fine print | Smaller font |
<mark> | Highlighted text | Yellow background |
<sub> / <sup> | Subscript / Superscript | Smaller, lowered / raised |
<abbr> | Abbreviation (requires title) | Underlined in some browsers |
<cite> | Title of a work | Italic |
<code> | Inline code snippet | Monospace |
<kbd> | Keyboard input | Monospace with border |
Accessibility note
Screen readers give extra weight to <strong> and <em> because they convey meaning, while <b> and <i> are used only for visual effect. Use semantic tags whenever possible.
Tip: Use
<abbr title='...'>to provide the full expansion of abbreviations; this helps both users and search engines understand the content.
Quick cheat‑sheet
- Meaningful emphasis:
<strong>/<em> - Pure visual styling:
<b>/<i> - Annotations:
<abbr>,<cite>,<code>,<kbd> - Highlighting:
<mark> - Fine‑print:
<small>
Apply these tags sparingly to keep the markup readable and the visual hierarchy clear.