Abbr, cite and time

Add fine-grained meaning with <abbr>, <cite> and <time>.

abbr: abbreviation

The <abbr> tag marks an abbreviation. Its title attribute carries the full form; hovering the cursor reveals it and screen readers read the abbreviation correctly.

Example: <abbr title="World Wide Web Consortium">W3C</abbr>. A reader who sees 'W3C' now learns its full name at once. As href belongs to <a>, title belongs to <abbr>.

cite: a work's title

The <cite> tag marks the title of a work: a book, article, poem, song, film or painting. Browsers usually show the title in italics; what matters, though, is meaning, not looks.

Example: <p>Leo Tolstoy's <cite>War and Peace</cite> is a classic.</p>. Only the work's title goes inside cite, not the author's name.

time and datetime

The <time> tag marks a specific moment or date. Its datetime attribute carries a machine-readable form (e.g. 2026-03-15); the visible text goes inside the tag.

Example: <time datetime="2026-03-15">15 March 2026</time>. Search engines and calendar apps now read the date safely. When you write a date, use time; it is not plain text, but a meaningful date.

Exercise Write an abbreviation, a book title and a date

Add two <p> tags to body. The first paragraph holds an <abbr> with title set to World Wide Web Consortium and content W3C, and a <cite> with content Web Design Handbook. The second paragraph holds a <time> with datetime set to 2026-03-15 and content 15 March 2026.

Show example solution

<body>
  <p>Today I read <abbr title="World Wide Web Consortium">W3C</abbr> standards and finished <cite>Web Design Handbook</cite>.</p>
  <p>Finish date: <time datetime="2026-03-15">15 March 2026</time>.</p>
</body>

Test yourself

Which tag marks up an abbreviation?
- <acronym>
- <abbr>
- <short>
- <abbrev>
Show answer

<abbr> — Correct. abbr marks abbreviations; the title attribute holds the full form.

Complete the cite tag

<p>Leo Tolstoy's famous novel <____>War and Peace</cite> is a classic.</p>

Show answer

<p>Leo Tolstoy's famous novel <cite>War and Peace</cite> is a classic.</p>

Next lesson: Code, kbd and samp

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies