Time & Address (<time>, <address>) — HTML

<time> and <address>

Dates and contact details are everywhere on the web, but they're often marked up as plain text that means nothing to a machine. <time> and <address> give both a real semantic meaning, which pays off for accessibility, search engines, and calendar/contact integrations.

<time> — Machine-Readable Dates and Times

<time> wraps a human-readable date or time, and its datetime attribute gives the same value in a strict, unambiguous machine-readable format. Search engines and browser extensions (calendar add-to, reminders) parse datetime instead of trying to guess the meaning of free-text dates.

time-basic.html

HTML

<p>Published on <time dateTime="2026-03-04">March 4th, 2026</time>.</p>

<p>The event starts at <time dateTime="2026-06-15T19:00">7:00 PM on June 15</time>.</p>

The visible text can be phrased however reads best for humans—"March 4th," "last Tuesday," "3 days ago"—as long as datetime holds the precise value.

datetime format	Example	Represents
YYYY-MM-DD	2026-03-04	A calendar date
YYYY-MM-DDThh:mm	2026-06-15T19:00	A date and local time
YYYY-MM-DDThh:mm:ssZ	2026-06-15T19:00:00Z	A precise moment in UTC
PThh:mm	PT1H30M	A duration (1 hour 30 minutes)

Relative Time Example

relative-time.html

HTML

<article>
  <p>
    Last updated
    <time dateTime="2026-07-10T14:32:00Z">2 days ago</time>
  </p>
</article>

Always include datetime, even when the visible text looks obvious

Text like "yesterday" or "3 days ago" is meaningless to anything that parses the page later (a search index, an RSS reader). The datetime attribute is what makes the value durable and precise regardless of when it's read.

<address> — Contact Information

<address> marks contact information for its nearest <article> ancestor, or for the whole document if there isn't one. It's a semantic label, not a visual style—browsers italicize it by default, but that's incidental.

address-basic.html

HTML

<footer>
  <address>
    Written by <a href="mailto:jane@example.com">Jane Doe</a>.<br />
    Visit us at <a href="https://example.com">example.com</a>.
  </address>
</footer>

address-article.html

HTML

<article>
  <h1>Company Announces New Product</h1>
  <p>Press release body text...</p>

  <address>
    Press contact: Maria Chen, <a href="mailto:press@example.com">press@example.com</a>
  </address>
</article>

Here, <address> refers specifically to the press-release article's contact—not to contact information for the whole site.

Not a general-purpose element for any street address

Despite the name, <address> is meant for contact information about the author/owner of the content (email, phone, physical address, social links)—not for marking up any arbitrary mailing address that appears in your content, such as a customer's shipping address in an e-commerce order summary. Use a plain <p> for those.

Using <time> for Recurring or Duration Values

<time> also supports durations (how long something lasts) using the ISO 8601 duration format, and can represent a year-month or just a time of day when a full date isn't relevant.

time-durations.html

HTML

<p>Total runtime: <time dateTime="PT2H15M">2 hours 15 minutes</time></p>

<p>Store hours: <time dateTime="09:00">9:00 AM</time> to <time dateTime="18:00">6:00 PM</time></p>

<p>We were founded in <time dateTime="2019-06">June 2019</time></p>

Why Machine-Readable Dates Matter

Consumer	What it does with datetime
Search engines	Show accurate "published" or "updated" dates in search results
Browser extensions	Offer "add to calendar" actions for events marked up with <time>
RSS/Atom feed generators	Populate feed entry timestamps reliably from page markup
Structured data crawlers	Cross-reference dates with schema.org markup for rich results

Multiple Contacts on One Page

A page can have several <address> elements, each scoped to its nearest <article> ancestor—useful on a page listing several authors' contact details.

multiple-addresses.html

HTML

<article>
  <h2>Post by Priya Shah</h2>
  <p>Article content...</p>
  <address>Contact: <a href="mailto:priya@example.com">priya@example.com</a></address>
</article>

<article>
  <h2>Post by Sam Lee</h2>
  <p>Article content...</p>
  <address>Contact: <a href="mailto:sam@example.com">sam@example.com</a></address>
</article>

Combine <time> and <address> in an article byline

A typical blog byline pairs both elements naturally: the author's contact info in <address>, and the publish date in <time>, both inside the article's <header> or <footer>.

Common Mistakes

Mistake	Fix
Omitting datetime entirely	Always include it, even if the visible text looks self-explanatory
Using an ambiguous format like "03/04/2026"	Use the unambiguous ISO 8601 format: 2026-03-04
Using <address> for a customer’s shipping address	Reserve <address> for authorship/site contact info; use <p> otherwise

<time dateTime="..."> pairs human-readable text with a precise, machine-parseable value.
datetime supports full dates, date+time, UTC timestamps, and durations.
Always set datetime even when the visible wording (e.g. "yesterday") seems self-explanatory.
<address> marks contact info for the current article, or the whole page if there is no article.
Do not use <address> for arbitrary postal addresses unrelated to page/content authorship.