abbr, q, time & span
Four inline elements that cover abbreviations, inline quotations, machine-readable dates, and the generic style hook for everything else.
What they are
<abbr> marks an abbreviation or acronym. Its title attribute holds the expanded form. Browsers traditionally render a dotted underline and display the expansion in a tooltip on hover. <q> marks an inline quotation. The browser supplies opening and closing quotation marks automatically, in the correct style for the page's language. Never add manual quote characters inside <q>.
<time> marks a date, time, or duration. The human-readable text inside the element can be anything, but the datetime attribute holds an ISO 8601 value that machines can parse reliably. <span> is the generic inline container with no semantic meaning of its own, useful only when you attach a class, id, or data attribute to hook into CSS or JavaScript.
Why it matters
<abbr> makes abbreviations legible without cluttering the prose. A reader hovering over CSS sees "Cascading Style Sheets" rather than having to look it up. That said, the tooltip is not reliably exposed by screen readers, so the convention is to write the expansion out the first time it appears in a document and then use the abbreviation freely after that.
<time> solves a long-standing problem: human date formats are wildly inconsistent across cultures. "06/07/26" means three different dates depending on locale. The datetime attribute pins the unambiguous machine value alongside whatever natural-language form you choose for the reader. Search engines use <time> to index event dates, and calendar apps can parse it directly.
How it works
Add title to <abbr> with the full expansion. The text content should be the abbreviation itself: <abbr title="Cascading Style Sheets">CSS</abbr>. You can also style the dotted underline or remove it with CSS text-decoration.
<q> wraps the quoted text only, with no extra punctuation. The browser inserts the right quote characters for the current lang attribute. A cite attribute can hold the URL of the original source, though it is invisible to readers; if you want a visible citation, place a <cite> element outside the <q> block.
In <time>, the datetime value follows ISO 8601: 2026-06-26 for a date, 14:30 for a time, PT2H30M for a duration of two hours and thirty minutes. The visible text is completely free: <time datetime="2026-06-26">last Thursday</time> is valid and useful. Use <span> only after confirming none of the semantic elements fit. It exists for cases where you genuinely need a hook with no attached meaning.
Try it
See <abbr> with its dotted underline and expansion, <q> adding quote marks automatically, and <time> pairing a human date with its machine datetime value.
<abbr> abbreviation
Learn CSS next.
title: "Cascading Style Sheets"
<q> inline quotation
She said hello
.
browser adds the quote marks
<time> machine date
Published .
datetime:2026-06-26<span> style hook
The key word here.
no semantic meaning added
Four inline elements: expansion, quotation, machine date, style hook.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
<abbr title="...">provides an expansion on hover; write the full term out the first time for accessibility.<q>adds locale-aware quotation marks automatically; never add manual quotes inside it.<time datetime="ISO-8601">gives machines an unambiguous date while the text can be any human form.<span>has no semantic meaning; use it only when you need an inline hook and no semantic element fits.
Done with this concept?
Mark it complete to track your progress. No login needed.