Use semantic HTML elements that carry meaning beyond styling — del, ins, s, abbr, cite, dfn, address, blockquote, and q.
When <del>/<ins>: tracked changes — price corrections, document revisions, showing a before/after diff. When <s>: content that is outdated but was not formally removed — a sale that ended, a feature that changed. Why not just CSS strikethrough: these elements carry semantic meaning that assistive technologies can communicate.
cite — On <del> and <ins> — URL of a document explaining why the change was made.datetime — On <del> and <ins> — machine-readable date/time of the change, e.g. "2025-06-01T14:00Z". Used by browsers and parsers.<!-- <del> + <ins> — track changes (e.g. price corrections) -->
<p>Price: <del>$59</del> <ins>$39</ins></p>
<!-- <s> — no longer accurate, but not a tracked deletion -->
<p><s>Free shipping on orders over $50.</s> Offer ended.</p>Why: not every user knows what an acronym means. title shows the full expansion as a tooltip on hover and is read by screen readers. When: wrap the first use of an abbreviation on the page — subsequent uses do not need it.
title required — The full expansion of the abbreviation. Shown as a tooltip on hover and read by screen readers.<!-- title shows the full expansion on hover -->
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is the
standard language for web pages.
</p>
<p>
The <abbr title="World Health Organization">WHO</abbr>
published new guidelines.
</p>When <cite>: the title of any creative work — book, film, article, song, website. Not the author's name. When <dfn>: the first time a technical term is introduced and defined in text. Why: both help search engines and screen readers understand what kind of content they are processing.
<!-- <cite> — title of a creative work -->
<p>
I just finished reading <cite>Clean Code</cite> by Robert C. Martin.
</p>
<!-- <dfn> — first / defining use of a term -->
<p>
<dfn>Semantic HTML</dfn> means using tags that describe the
meaning of the content, not just its appearance.
</p>When: contact information for the author or owner — email, social profiles, or a mailing address. Where: inside an <article> it refers to that article's author; inside <body> it refers to the site owner. Why not a plain <p>: <address> is a semantic landmark that assistive technologies can identify and announce.
<!-- Contact info for the nearest <article> or <body> -->
<address>
Written by <a href="mailto:jane@example.com">Jane Smith</a>.<br />
Visit us at:<br />
123 Web Street<br />
London, UK
</address>When <blockquote>: long quotations that stand on their own — pulled from an article, book, or speech. When <q>: short inline quotes within a sentence. Why cite: it links to the source, helping search engines attribute the content correctly.
cite — URL pointing to the source of the quotation. Not displayed visually but useful for search engines and citation tools.<!-- <blockquote> — long, block-level quote -->
<blockquote cite="https://developer.mozilla.org">
<p>
HTML is the standard markup language for creating web pages.
</p>
</blockquote>
<!-- <q> — short inline quote (browser adds quotation marks) -->
<p>
As Tim Berners-Lee said,
<q>The Web is more a social creation than a technical one.</q>
</p>