Time address and mark
Mark up dates, contact info, and highlighted text semantically.
Time address and mark is a free HTML Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
The time Element
The <time> element marks up dates and times in a machine-readable format:
<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>
<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>
<p>The event runs from
<time datetime="2025-01-15">Jan 15</time> to
<time datetime="2025-01-20">Jan 20</time>.
</p>datetime Attribute Formats
The datetime attribute must be a valid date/time string:
<time datetime="2025-01-15">January 15</time> <!-- date -->
<time datetime="14:30">2:30 PM</time> <!-- time -->
<time datetime="2025-01-15T14:30">Meeting time</time> <!-- date+time -->
<time datetime="2025-W03">Week 3, 2025</time> <!-- week -->
<time datetime="2025-01">January 2025</time> <!-- year-month -->
<time datetime="P3D">3 days</time> <!-- duration -->Why time Matters
Benefits of using <time>:
- Search engines understand the date of your content
- Browsers and apps can add to calendar
- Screen readers can pronounce dates correctly
- JavaScript can parse the datetime attribute for display formatting
Dynamic Date Formatting
Use JavaScript to format dates from the datetime attribute:
<time id="event-time" datetime="2025-06-15T10:00">June 15, 2025</time>
<script>
const el = document.getElementById('event-time');
const date = new Date(el.getAttribute('datetime'));
el.textContent = date.toLocaleDateString('en-US', {
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
// Output: Sunday, June 15, 2025
</script>The address Element
The <address> element marks up contact information for the nearest <article> or <body>:
<address>
<p>Jane Smith</p>
<p><a href="mailto:jane@example.com">jane@example.com</a></p>
<p><a href="tel:+15555550100">(555) 555-0100</a></p>
<p>123 Main Street, New York, NY 10001</p>
</address>address for Article Contact
Use address within article to mark up the author's contact info:
<article>
<h2>HTML Guide</h2>
<address>
Written by
<a href="mailto:jane@example.com" rel="author">Jane Smith</a>
</address>
<p>Content...</p>
</article>What address Is Not For
The <address> element is only for contact information, not arbitrary addresses:
<!-- BAD: address for a location with no contact info -->
<address>
Empire State Building, New York
</address>
<!-- Better: use p or a structured element -->
<p>Empire State Building, New York</p>
<!-- GOOD: address for contact information -->
<address>
<a href="mailto:support@example.com">Contact Support</a>
</address>The mark Element
The <mark> element highlights text that is relevant in context:
<p>
Search results for "HTML5":
The <mark>HTML5</mark> specification was finalized in 2014.
<mark>HTML5</mark> introduced many new semantic elements.
</p>
<!-- Default styling: yellow background -->
<!-- Semantic use: highlighting search terms, annotations -->
<!-- NOT for general styling — use span for that -->Styling mark
Customize mark's default yellow highlight:
mark {
background-color: #fef08a;
color: inherit; /* keep text color from parent */
padding: 0.1em 0.2em;
border-radius: 3px;
}
/* High contrast mode: */
@media (forced-colors: active) {
mark {
background-color: Highlight;
color: HighlightText;
}
}mark vs strong vs em
Choosing between highlight elements:
<mark>— highlighted for relevance in current context (search results)<strong>— important content that always matters<em>— stress emphasis that changes meaning<span>— purely visual styling with no semantics
Searching and Highlighting
Practical implementation: highlight search terms in results:
function highlightText(text, query) {
if (!query) return text;
const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escaped})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
// document.getElementById('result').innerHTML =
// highlightText(result.title, searchQuery);Quick Check
What is the machine-readable datetime attribute used for?
Recap: time address mark
Semantic inline elements:
<time datetime="">— machine-readable dates and times<address>— contact info for nearest article or page<mark>— contextually relevant highlights (search terms)datetimeuses ISO 8601 format:YYYY-MM-DD,HH:MM- mark default: yellow background; customize with CSS
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “Time address and mark” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “Time address and mark”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “Time address and mark”?
Mark up dates, contact info, and highlighted text semantically. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “Time address and mark” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- header nav main and footer
- The article Element Self-Contained Content
- The section Element vs div
- Time address and mark