Semantic Text Elements: abbr, cite, time, address, dfn and data

Semantic text elements like <abbr>, <cite>, <time>, <address>, <dfn> and <data> give extra meaning to words in your HTML, which helps readers, search engines and screen readers.

Why use semantic text elements?

You already know <strong> and <em> from the formatting lesson. They tell the browser why a word is special, not just how it should look. The elements in this lesson do the same for other kinds of text: short forms, titles of works, dates, contact details, definitions and values.

Think of them as labels on jars in a kitchen. Two jars may look the same, but the labels tell you which one is salt and which one is sugar. These elements label your words, so that browsers, search engines, translation tools and screen readers know what each piece of text really is.

abbr and dfn: abbreviations and definitions

An abbreviation is a short form of a longer word or phrase, like "HTML" or "NASA". Wrap it in <abbr> and put the full meaning in the title attribute.

A definition is the place where you explain a term for the first time. Wrap the term being defined in <dfn>. Use it only once per term, at the point where you explain it.

<article>
  <h2>How web pages travel</h2>
  <p>
    Every page is sent using <abbr title="HyperText Transfer Protocol Secure">HTTPS</abbr>.
  </p>
  <p>
    A <dfn>web server</dfn> is a computer that stores websites and sends pages to visitors when they ask for them.
  </p>
  <p>
    Your browser talks to the web server many times while a page loads.
  </p>
</article>

In the browser, "HTTPS" may get a dotted underline, and hovering over it shows the full name. "web server" appears in italics in its defining sentence. Later uses of "web server" are normal text, because they are not definitions.

Tip: The title tooltip does not appear on phones or for keyboard users. For important abbreviations, also write the full form in the text the first time: "HyperText Markup Language (<abbr>HTML</abbr>)". The <abbr> tag is still useful for tools and future readers.

cite, time and data: titles, dates and values

<cite> marks the title of a creative work: a book, film, song, article, game or painting. It is not for a person's name.

<time> marks a date or time. The visible text can be friendly ("next Saturday"), while the datetime attribute gives a clear, machine-readable version, like 2026-11-14 or 2026-11-14T19:30. Calendars, search engines and browser tools can read it.

<data> connects any visible text to a machine-readable value, for example a product code or an exact number.

<section>
  <h2>Book club: November meeting</h2>
  <p>
    This month we are reading <cite>The Hobbit</cite> by J.R.R. Tolkien.
  </p>
  <p>
    We meet on <time datetime="2026-11-14T19:30">Saturday 14 November at 7:30 pm</time>.
  </p>
  <p>
    Tickets: <data value="5.00">five pounds</data>, product
    <data value="BC-1114">November ticket</data>.
  </p>
</section>

The page looks like normal text, with the book title in italics. Behind the scenes, a script or search engine can read 2026-11-14T19:30 as an exact date and time, and 5.00 as an exact price. That is how semantic elements help computers understand your page without changing what people read.

address: contact information

<address> is for contact details for the person or organisation behind the page or an article: an email, phone number, social link or postal address. It is not for any random address in your text, like "the party is at 12 Oak Road".

<footer>
  <address>
    Green Leaf Cafe<br>
    12 Market Street, Leeds<br>
    <a href="mailto:hello@greenleaf.example">hello@greenleaf.example</a><br>
    <a href="tel:+441130000000">0113 000 0000</a>
  </address>
</footer>

Browsers show it in italics by default. Screen readers and search engines can recognise it as the contact block for the site.

del, ins and s: showing changes

Sometimes you want to show that text has changed.

• <del> marks text that was removed. Browsers show it with a line through it.
• <ins> marks text that was added. Browsers underline it.
• <s> marks text that is no longer correct or relevant, but was not "deleted" as an edit. A classic use is an old price.

Both <del> and <ins> can have a datetime attribute to say when the change happened.

<ul>
  <li>Workshop starts at <del datetime="2026-10-01">6 pm</del> <ins datetime="2026-10-01">6:30 pm</ins></li>
  <li>Price: <s>£40</s> now £30</li>
</ul>

You see "6 pm" crossed out with "6:30 pm" underlined after it, and the old price crossed out next to the new price.

Note: Many screen readers do not say "deleted" or "inserted" by default. If the change matters, add words too, for example "Price: was <s>£40</s>, now £30".

Practice exercise

Write a short blog post about a film you watched. Use <cite> for the film title, <time> with a datetime for when you watched it, <abbr> for one abbreviation (like "UK" or "TV"), and <dfn> to define one word, such as "sequel". Finish with an <address> block with your email link.

Hint: the datetime value must use the format year-month-day, like 2026-10-01.

Key takeaways

• Use <abbr title="..."> for abbreviations and <dfn> where a term is first defined.
• <cite> is for titles of works, not names of people.
• <time datetime="..."> and <data value="..."> add machine-readable values to friendly text.
• <address> is only for contact details for the page or article author.
• <del> and <ins> show edits; <s> shows text that is no longer correct.