Inside paragraphs and headings, a set of inline elements marks what individual words and phrases mean: importance, emphasis, code, dates, abbreviations and more. This lesson is a reference you can come back to whenever you are unsure which one fits.
Importance and emphasis: strong and em
strong marks content of strong importance, seriousness or urgency. em marks stress emphasis, the kind that changes the meaning of a sentence when you say it aloud.
<p><strong>Warning:</strong> the oven is hot.</p>
<p>I did <em>not</em> say the bread was stale.</p>
<p>I did not say the <em>bread</em> was stale.</p>The two em examples mean different things: the first denies saying it at all, the second suggests something else was stale.
Browsers show strong in bold and em in italics by default, but you choose them for meaning. Most screen readers do not change their voice for these elements by default, so do not rely on them alone for critical information. Write the warning in words too, as in the first example.
Bold and italic without extra importance: b and i
b and i are not deprecated. They have their own meanings in the Living Standard:
bdraws attention to text without adding importance: keywords in a summary, product names in a review.imarks text in an alternative voice or mood: technical terms, ship names, thoughts, or phrases from another language.
<p>Add the <b>levain</b> to the flour and water.</p>
<p>The recipe calls this step <i lang="fr">autolyse</i>.</p>Use the test: would you change your tone of voice when reading this aloud? If yes, use em. Is it urgent or critical? Use strong. Is it only a different style of text? Use i or b, or a span with CSS.
Highlighting: mark
mark highlights text because of its relevance in the current context, such as search terms in results or the part of a quote you are discussing.
<p>Results for "rye": Light <mark>rye</mark> loaf, 800g.</p>Do not use mark just to make something yellow for decoration.
Code and computer text
| Element | Use for | Example |
|---|---|---|
code | A fragment of computer code | <code>console.log()</code> |
kbd | Keyboard or other user input | <kbd>Ctrl</kbd>+<kbd>S</kbd> |
samp | Sample output from a program | <samp>File saved.</samp> |
var | A variable in maths or code | <var>x</var> + 2 |
<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save. The editor replies <samp>Saved</samp>.</p>
<p>Call <code>document.querySelector()</code> to find an element.</p>For a block of code, nest code inside pre. Escape any < and & in the code with character references:
<pre><code><p class="intro">Hello</p></code></pre>Abbreviations: abbr
abbr marks an abbreviation or acronym. The optional title attribute gives the expansion:
<p>Write your pages in <abbr title="HyperText Markup Language">HTML</abbr>.</p>The title appears as a tooltip for mouse users, but it is not available to touch or keyboard users, and screen readers handle it inconsistently. The most reliable approach is to spell out the term in the text the first time it appears:
<p>HyperText Markup Language (<abbr>HTML</abbr>) describes page content.</p>Dates and times: time
time represents a date, time or duration. The datetime attribute holds a machine-readable version, while the content can be written however suits your readers:
<p>Classes start on <time datetime="2026-11-07">Saturday 7 November</time>.</p>
<p>Doors open at <time datetime="09:30">half past nine</time>.</p>
<p>The class lasts <time datetime="PT3H">three hours</time>.</p>
<p>Posted <time datetime="2026-10-16T14:00Z">16 October 2026</time>.</p>Search engines, browser extensions and scripts can read the datetime value without guessing your date format. Use ISO 8601 formats: YYYY-MM-DD for dates, HH:MM for times, and PT durations such as PT3H30M.
Quotations and citations
qmarks a short inline quotation. Browsers add quotation marks for you.blockquotemarks a longer quotation as its own block.citemarks the title of a work, such as a book, film or article, not the person being quoted.
<p>As the label says, <q>best eaten within two days</q>.</p>
<blockquote cite="https://example.com/review">
<p>The best croissant in the city.</p>
</blockquote>
<p>From a review in <cite>The Bristol Food Guide</cite>.</p>Edits, small print and other elements
| Element | Meaning |
|---|---|
del and ins | Text removed from and added to a document, for example a price change |
s | Content that is no longer accurate or relevant |
small | Side comments and small print, such as legal notes |
sub and sup | Subscript and superscript, as in H₂O or footnote markers |
dfn | The defining instance of a term |
data | Content with a machine-readable value, such as a product code |
span | No meaning at all; a hook for CSS or JavaScript |
<p>Price: <del>£6.00</del> <ins>£4.50</ins></p>
<p>A <dfn>levain</dfn> is a portion of starter mixed for one bake.</p>
<p>Water is H<sub>2</sub>O.</p>
<p><small>Prices correct at time of publishing.</small></p>Some elements change how screen readers behave in some combinations, and support varies. Never let a meaning depend only on styling such as strikethrough. In the price example, consider adding visible words such as "was" and "now".
When nothing fits: span
If no element describes the meaning, use span. It has no semantics, so it is safe for purely visual styling:
<p>Open <span class="highlight-day">every day</span> except Christmas.</p>Summary
strongis importance,emis spoken emphasis;bandiare styled text without extra importance.markhighlights relevance, not decoration.- Use
code,kbd,sampandvarfor computer text, andprewithcodefor code blocks. - Use
timewith adatetimevalue, and spell out abbreviations on first use. - Choose elements for meaning, style them with CSS, and fall back to
spanwhen nothing fits.