Purpose and content model
These elements distinguish different kinds of meaning inside prose. Em applies stress emphasis; strong indicates importance, urgency, or seriousness. B draws attention without adding that importance, such as a keyword. I marks a voice or term set apart from ordinary prose, such as a technical term or taxonomic name. Choose meaning before default bold or italic styling.
Small represents side comments or fine print. Mark highlights relevance in the current context, such as a search match. S marks information that is no longer accurate or relevant. U marks a nontextual annotation, such as an explicitly identified spelling annotation. None is simply a shortcut to a CSS property.
Syntax and working example
<p><strong>Keep the exit clear.</strong> You can leave bags <em>beside</em> the desk.</p>
<p>Search result: The <mark>community garden</mark> opens at nine.</p>Supported attributes and behavior
These phrasing elements use global attributes. Class can distinguish a particular kind of annotation, while lang can identify a foreign phrase where pronunciation changes. Nested em can increase emphasis, but excessive emphasis makes the document harder to interpret. Use del for an actual recorded removal and ins for an addition; s is suitable when the old information remains visible as outdated information.
Another practical pattern
<p><s>Workshop fee: £20</s> Now free for members.</p>
<p><small>Registration closes two days before the event.</small></p>
<p>The word <i lang="fr">atelier</i> means workshop.</p>Accessibility and browser notes
Screen readers do not consistently announce every visual or semantic distinction. Important warnings need clear words as well as strong markup. Underlined text can be mistaken for a hyperlink; design u annotations to avoid that confusion. Do not make small text unreadably tiny just because the element is named small.
Common mistakes
B and strong are not interchangeable in meaning, even if both look bold. Mark does not necessarily mean importance, and small does not mean arbitrary secondary content. A yellow background alone does not explain why content is highlighted.
Verify your implementation
Read the sentence aloud and decide whether emphasis changes its meaning. Review warnings without color or typography and ensure their wording still communicates urgency. Test outdated prices with screen-reader output and ensure the current price is unmistakable.
Standard status and sources
Standard; browser availability must be checked independently of specification status.