Text Formatting
HTML has a family of inline elements that give words extra meaning: importance, emphasis, highlights, code, keyboard keys, changes to a document, and more. Choosing the element that matches the meaning — not just the look — helps screen readers, search engines and anyone reading your source.
Importance and emphasis
| Element | Meaning | Default look |
|---|---|---|
<strong> | Strong importance, seriousness or urgency | Bold |
<em> | Stress emphasis — changes how a sentence is read aloud | Italic |
<b> | Draw attention without extra importance (keywords, product names) | Bold |
<i> | Alternative voice: technical terms, foreign phrases, thoughts, ship names | Italic |
If you only want text to look bold or italic, use CSS. Use <strong> and <em> when the meaning of the text changes.
Highlights, small print and changes
<mark>— highlighted for relevance, like search matches.<small>— side comments and fine print.<del>/<ins>— text removed from or added to a document (edits, price changes).<s>— content that's no longer accurate or relevant.<u>— an unarticulated annotation, such as a spelling error. Avoid it for normal emphasis, since underlined text looks like a link.
Subscript and superscript
Code and computer text
| Element | For |
|---|---|
<code> | Code: function names, file names, snippets |
<kbd> | Keyboard input |
<samp> | Sample output from a program |
<var> | A variable in maths or programming |
<pre><code> | A multi-line code block with spacing preserved |
Dates, times and data
<time> pairs human-friendly text with a machine-readable datetime value that calendars, search engines and scripts can understand. <data> does the same for other values.
Breaking long words
<wbr> marks a safe place to break a long word or URL if needed. The ­ entity does the same but adds a hyphen when it breaks.
Text direction
<bdi> isolates text whose direction is unknown (like user names), so it doesn't scramble the surrounding sentence. <bdo> forces a direction.