The <small>, <mark> & <s> elements
These three inline tags each change how text should be read. <small> marks side comments and fine print such as copyright or legal notes. <mark> highlights text that is relevant right now, like search matches, with a yellow background. <s> strikes through text that is no longer accurate, such as an old price.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, palpable content |
| Content model | Phrasing content |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLElement (all three) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| — | All three accept only the global attributes. |
Common examples
Fine print under a price
<small> is for side comments such as terms, disclaimers and copyright.
Highlighting search matches
<mark> highlights text that is relevant right now, such as matches for the visitor’s search.
An old price
<s> shows information that is no longer accurate, like a previous price.
Styling the highlight
Change mark’s default yellow background to match your design.
<mark> vs <strong>
<strong> marks text that is important in itself — a warning, a deadline. <mark> marks text that is relevant in the current context, such as words that match a search or a line a teacher wants students to notice.
The same sentence could be marked in one situation and plain in another, while strong text is always important. Think of mark as a highlighter pen and strong as writing in capitals.
| <mark> | <strong> | |
|---|---|---|
| Meaning | Relevant right now | Important |
| Default style | Yellow highlight | Bold |
| Example | Search matches | Warnings |
Common mistakes to avoid
- Using small to shrink headings or body text. Use CSS
font-size; small means “fine print”. - Hiding important terms in small print. Key conditions such as fees should be easy to read.
- Using mark for decoration. If nothing is being highlighted for a reason, use CSS.
- Using s for edits to a document. Tracked changes belong in <del> and <ins>.
Accessibility & SEO tips
- Most screen readers don’t announce mark or s, so add words like “was $49, now $29” when the meaning matters.
- Keep fine print at a readable size — tiny text fails accessibility checks and frustrates mobile users.
- Check that mark’s highlight color keeps enough contrast with the text, especially in dark designs.
- Use mark sparingly — if a page is full of highlights, none of them stand out and the text becomes harder to read.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. was added in HTML5 and works in all modern browsers.
Tutorials: How to change text color, How to make a footer