

- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete




- 1Accessibility in HTML
- 2Alt Text for Images
- 3ARIA Roles in HTML
- 4Semantic HTML for Accessibility
- 5Keyboard Navigation in HTML
- 6Screen Reader Accessibility in HTML
- 7HTML Best Practices for SEO
- 8HTML Meta Tags
- 9HTML Headings Best Practices
- 10Title and Meta Description Tags in HTML
- 11HTML Linking Structure
- 12HTML Clean Code Standards

time Element in HTML
Machine-Readable Dates and Timestamps
HTML <time>
Element: Human-Friendly, Machine-Readable Dates
Dates tell a story. Whether you're marking a blog post's publish date, highlighting an event, or counting down to something exciting — time matters. And the <time>
element gives your dates and timestamps structure, meaning, and clarity — for both readers and machines.
What Is the <time>
Element?
The <time>
element is used to represent a specific time, date, or duration in HTML. It makes the content semantically recognizable for search engines, screen readers, and scripts — thanks to the optional datetime
attribute that provides a standardized format.
Basic Syntax
<p>Published on <time datetime="2025-05-24">May 24, 2025</time>.</p>
Published on May 24, 2025.
The visible text is friendly for humans. The datetime
attribute makes it clear for machines.
Why Use <time>
?
- SEO boost: Search engines use structured time for indexing and ranking
- Accessibility: Assistive technologies can relay dates/times meaningfully
- Machine processing: JavaScript, calendars, feeds, and crawlers rely on structured dates
Example: Event Timestamp
<h2>Cherry Festival Begins</h2>
<p>Join us on <time datetime="2025-06-01T10:00">June 1st at 10 AM</time> for the opening ceremony.</p>
Join us on June 1st at 10 AM for the opening ceremony.
This timestamp uses both date and time: 2025-06-01T10:00
.
Acceptable datetime
Formats
YYYY-MM-DD
→2025-05-24
YYYY-MM-DDThh:mm
→2025-05-24T14:30
hh:mm
→14:30
(for durations or times of day)PTnHnM
→PT2H30M
(ISO 8601 duration format: 2 hours 30 minutes)
Example: Duration Format
<p>This apple picking tour lasts <time datetime="PT1H30M">1 hour and 30 minutes</time>.</p>
This apple picking tour lasts 1 hour and 30 minutes.
Blog Post Metadata Example
<article>
<h2>Health Benefits of Bananas</h2>
<p>Posted on <time datetime="2025-05-20">May 20, 2025</time> by FruitDaily.</p>
</article>
Accessibility Tips
- Always use
datetime
for structured support - Display friendly text inside the tag for visual users
- Ensure
<time>
wraps only the relevant text — not entire paragraphs
Use Case: Future Event Countdown
<p>Next cherry shipment arrives on <time datetime="2025-07-15">July 15th, 2025</time>.</p>
Next cherry shipment arrives on July 15th, 2025.
Summary
The <time>
element is your semantic shortcut to clarity and machine-readability. You’ve now learned how to:
- Use
<time>
for events, durations, and publish dates - Write proper
datetime
values - Improve accessibility and SEO with structured timestamps
What’s Next?
Coming up next: the <mark>
element — highlight important text and guide the reader’s eye to what matters most.