👀 Live Preview
A blog post published on a specific date, marked up semantically:
Published on
HTML <time> Tag
Overview
What You’ll Learn
The <time> tag marks up dates, times, and durations with semantic meaning. This guide covers syntax, the datetime attribute, common use cases, styling, accessibility, and best practices for beginners.
Time Syntax
Write valid <time> elements with human-readable text.
datetime Attribute
Provide machine-readable ISO 8601 values.
Date & Time
Mark event dates, schedules, and timestamps.
Durations
Express intervals like P3W or PT2H.
time vs data
Know when to use specialized date markup.
Best Practices
Accessibility, SEO, and clean semantics.
Fundamentals
What Is the <time> Tag?
The time element (<time>) represents a specific date, time, or duration in HTML. It pairs human-readable text (what visitors see) with a machine-readable value in the datetime attribute (what browsers, scripts, and search engines parse).
Semantic dates for the modern web
Use <time> for blog publish dates, event schedules, opening hours, countdowns, and any content where the exact moment or duration matters.
Without semantic markup, dates are just plain text. With <time datetime>, assistive technology and search engines understand the precise value behind the visible label.
Foundation
📝 Syntax
Wrap a human-readable date or time in <time> and set the standardized value in datetime:
syntax.html
<time datetime="YYYY-MM-DDTHH:mm:ss">Your Time Content Here</time>Syntax Rules
datetimeis optional but strongly recommended for clarity and parsing.- Text content should be a human-readable version of the same date, time, or duration.
<time>is an inline phrasing element—it fits inside paragraphs, lists, and headings.- Use ISO 8601 formats in
datetime(see the formats table below). - Do not use the obsolete
pubdateattribute; place publication<time>inside<article>instead.
Complete Example
complete-example.html
<time datetime="2024-01-30T12:30:00">January 30, 2024 at 12:30 PM</time>Cheat Sheet
⚡ Quick Reference
| Use Case | datetime Value | Visible Text Example |
|---|---|---|
| Date only | 2024-01-30 | January 30, 2024 |
| Date & time | 2024-02-15T18:00:00 | February 15, 2024, at 6:00 PM |
| Time only | 18:00 | 6:00 PM |
| Duration (weeks) | P3W | 3 weeks |
| Duration (hours) | PT2H30M | 2 hours 30 minutes |
| Month & year | 2024-06 | June 2024 |
Reference
📅 Common datetime Formats
HTML expects ISO 8601 strings in the datetime attribute. These are the formats beginners use most often:
| Format | Pattern | Example |
|---|---|---|
| Valid date | YYYY-MM-DD | 2024-01-30 |
| Valid local date-time | YYYY-MM-DDTHH:mm:ss | 2024-01-30T12:30:00 |
| Valid time | HH:mm or HH:mm:ss | 18:00 |
| Valid duration | PnYnMnDTnHnMnS | P3W, PT2H30M |
| Valid month | YYYY-MM | 2024-06 |
| Valid year | YYYY | 2024 |
Comparison
⚖️ <time> vs <data>
| Feature | <time> | <data> |
|---|---|---|
| Purpose | Dates, times, durations | Any machine-readable value |
| Key attribute | datetime | value |
| Example | <time datetime="2024-06-10">Jun 10</time> | <data value="42">forty-two</data> |
| When to choose | Calendar dates, clocks, intervals | Prices, ratings, SKUs, generic values |
Reference
🧰 Attributes
The datetime attribute is the heart of the <time> tag. Global attributes also apply:
datetime RecommendedMachine-readable date, time, or duration in ISO 8601 format. Browsers expose it via the dateTime DOM property.
datetime="2024-01-30T12:30:00"class GlobalCSS hook for styling publication dates, event badges, or timestamps.
class="publish-date"title GlobalTooltip with extra context, such as timezone or full formatted date.
title="UTC+5:30"id GlobalUnique identifier for JavaScript or fragment links.
id="event-start"Note: The pubdate boolean attribute appeared in early HTML5 drafts but is obsolete. Use a <time> inside an <article> for publication dates instead.
Hands-On
Examples Gallery
Publication dates, event schedules, and durations with copy-ready code, live previews, and hands-on practice.
📚 Common Use Cases
Use <time> whenever you display a date, clock time, or duration that has a precise meaning for users, scripts, or search engines.
Publication Date
Mark when an article or blog post was published. Place the <time> inside an <article> so the date is clearly associated with that content:
publication-date.html
<article>
<h2>Getting Started with HTML</h2>
<p>
Published on
<time datetime="2024-01-30T12:30:00">January 30, 2024</time>
</p>
</article>Displaying a Date and Time
The primary purpose of <time> is to display a specific date and time within your content, such as an event or webinar start:
event-datetime.html
<p>
Join us on
<time datetime="2024-02-15T18:00:00">February 15, 2024, at 6:00 PM</time>
for our live webinar.
</p>Representing Durations
Use the <time> tag to represent durations—time intervals such as project length, video runtime, or delivery estimates. Set datetime to an ISO 8601 duration:
representing-durations.html
<p>
The project took
<time datetime="P3W">3 weeks</time>
to complete.
</p>A11y
♿ Accessibility
- Provide human-readable text — Screen readers announce the visible content inside
<time>. Write natural language dates users can understand. - Always add datetime — The attribute gives parsers a precise value without changing what assistive tech reads aloud.
- Use meaningful context — Surround the element with words like “Published on” or “Event starts” so the date is not ambiguous.
- Avoid color-only cues — Do not rely on styling alone to communicate that text is a date.
- Prefer local-friendly formats — Show dates in a format your audience expects; keep ISO 8601 in
datetime.
Design
Styling <time> with CSS
Style publication badges, event highlights, and muted timestamps with classes on the element:
font-size Smaller meta textcolor Accent highlightbackground Badge/chip stylefont-variant-numeric Tabular digits time-styles.css
/* Publication date meta */
time {
font-variant-numeric: tabular-nums;
}
.publish-date {
color: #64748b;
font-size: 0.875rem;
}
.event-time {
color: #2563eb;
font-weight: 600;
background: #eff6ff;
padding: 0.1rem 0.35rem;
border-radius: 4px;
}Live styled time elements
Published
Starts
🧠 How <time> Works
1
Author writes visible text
Human-friendly date or duration text goes inside <time>.
Content
2
datetime stores the precise value
ISO 8601 in datetime gives browsers and scripts an unambiguous parse.
Machine-readable
3
User agents expose dateTime
JavaScript reads element.dateTime while readers see the inner text.
DOM API
=
Semantic dates everyone understands
Readers get natural language; machines get ISO 8601—the best of both worlds in one inline element.
Compatibility
Browser Support
The <time> tag is supported in all modern browsers. Very old browsers treat it as a generic inline element but still show the text content.
Baseline · HTML5
Semantic dates in every modern browser
Chrome, Firefox, Safari, Edge, and Opera fully support the <time> element and the datetime attribute.
100% Modern browser support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer IE 9+ supported
Full supportOpera Fully supported
Full support<time> tag 100% modern support
Bottom line: Use <time datetime> confidently for dates, times, and durations in production today.
Wrap Up
Conclusion
Mastering the <time> tag empowers you to provide accurate, accessible information about dates and times. Whether you mark publication dates on blog posts, schedule event start times, or express project durations, semantic time markup improves both user experience and machine understanding.
Pro Tips
💡 Best Practices
✅ Do
- Include the
datetimeattribute for machine-readable dates - Write a human-readable version inside the element for accessibility
- Use ISO 8601 formats in
datetime - Place publication
<time>inside<article> - Add context words like “Published on” or “Starts at”
❌ Don’t
- Use the obsolete
pubdateattribute - Put non-date text in
datetime - Rely on ambiguous date formats without
datetime - Use
<time>for values that are not dates or durations - Hide the visible text and show only the attribute value
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about <time>
Bookmark these before you mark up your next event, blog post, or schedule.
5
Core concepts 01
Semantic Dates
<time> marks dates, times, and durations with meaning beyond plain text.
02
datetime Attribute
ISO 8601 in datetime is the authoritative machine-readable value.
03
Human + Machine
Visible text for readers; datetime for parsers and scripts.
04
Durations Too
Use values like P3W or PT2H30M for intervals.
05
Modern Support
Safe to use in all browsers your users run today.
Compatibility❓ Frequently Asked Questions
The
<time> element represents a specific date, time, or duration. It shows human-readable text and stores a machine-readable ISO 8601 value in datetime.No, but it is strongly recommended. When present,
datetime is the authoritative value scripts and parsers use.Use ISO 8601:
YYYY-MM-DD for dates, YYYY-MM-DDTHH:mm:ss for date-times, and P3W or PT2H30M for durations.Yes. Set
datetime to an ISO 8601 duration such as P3W (three weeks) and put readable text like “3 weeks” inside the element.pubdate was removed from the HTML spec. Mark publication dates with a <time datetime> inside the relevant <article> instead.<time> is specialized for dates, times, and durations via datetime. <data> is general-purpose and uses a value attribute for any machine-readable string.Mark up dates and times semantically
Practice <time datetime> for events, publications, and durations in the Try It editor.
About the author
5 people found this page helpful