The <time> element represents dates and times in a machine-readable format, while <mark> highlights text for reference or notation purposes. Both add semantic meaning to your content.
The Time Element
Use <time> to mark up dates, times, or durations. This helps search engines, calendars, and other tools understand temporal information.
Basic Time Usage
basic-time.html
<!-- Date only -->
<p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
<!-- Date and time -->
<p>Event starts at <time datetime="2024-03-20T19:00">7:00 PM on March 20</time></p>
<!-- Time only -->
<p>Store opens at <time datetime="09:00">9:00 AM</time></p>The datetime Attribute
The datetime attribute provides the machine-readable format. The content between tags is what users see:
datetime-formats.html
<!-- Different display, same machine format -->
<time datetime="2024-01-15">Jan 15, 2024</time>
<time datetime="2024-01-15">January 15th</time>
<time datetime="2024-01-15">1/15/2024</time>
<!-- With time zone -->
<time datetime="2024-01-15T14:30:00-05:00">2:30 PM EST</time>
<!-- Duration -->
<time datetime="PT2H30M">2 hours 30 minutes</time>Common Datetime Formats
datetime-examples.html
<!-- Full date: YYYY-MM-DD -->
<time datetime="2024-12-25">Christmas 2024</time>
<!-- Year and month: YYYY-MM -->
<time datetime="2024-12">December 2024</time>
<!-- Year only: YYYY -->
<time datetime="2024">2024</time>
<!-- Date and time: YYYY-MM-DDTHH:MM -->
<time datetime="2024-01-15T14:30">Jan 15 at 2:30 PM</time>
<!-- Full with timezone: YYYY-MM-DDTHH:MM:SS+HH:MM -->
<time datetime="2024-01-15T14:30:00+00:00">2:30 PM UTC</time>Practical Examples
time-examples.html
<!-- Blog post date -->
<article>
<h2>My Blog Post</h2>
<p>
Published on <time datetime="2024-01-15">January 15, 2024</time>
by John Doe
</p>
<p>Article content...</p>
</article>
<!-- Event listing -->
<article>
<h3>Web Development Workshop</h3>
<p>
Date: <time datetime="2024-03-20">March 20, 2024</time><br>
Time: <time datetime="14:00">2:00 PM</time> -
<time datetime="17:00">5:00 PM</time>
</p>
</article>
<!-- Comment timestamp -->
<article>
<p>Great article!</p>
<footer>
Posted by Jane on
<time datetime="2024-01-16T09:23:00">Jan 16, 2024 at 9:23 AM</time>
</footer>
</article>The Mark Element
Use <mark> to highlight text for reference—like search results, important notes, or text relevant to the current context.
Basic Mark Usage
basic-mark.html
<!-- Highlighting search terms -->
<p>Search results for "HTML tutorial":</p>
<p>Learn <mark>HTML</mark> with our comprehensive <mark>tutorial</mark>.</p>
<!-- Important note -->
<p><mark>Note:</mark> This feature is only available in the premium version.</p>
<!-- Relevant text -->
<p>The recipe calls for 2 cups of flour, <mark>1 cup of sugar</mark>, and eggs.</p>Mark vs Strong/Em
Understanding the difference:
mark-comparison.html
<!-- mark: Relevance or reference -->
<p>Search results for "JavaScript":</p>
<p>Learn <mark>JavaScript</mark> programming today.</p>
<!-- strong: Importance -->
<p><strong>Warning:</strong> Do not exceed the recommended dosage.</p>
<!-- em: Emphasis -->
<p>I <em>really</em> need to finish this project.</p>Search Results Example
search-results.html
<article>
<h3>HTML5 Tutorial for Beginners</h3>
<p>
Learn <mark>HTML5</mark> with our step-by-step guide.
Master semantic <mark>HTML5</mark> elements and build modern websites.
</p>
<a href="/tutorial">Read more</a>
</article>
<article>
<h3>Complete Guide to <mark>HTML5</mark></h3>
<p>
Everything you need to know about <mark>HTML5</mark> from basics
to advanced topics.
</p>
<a href="/guide">Read more</a>
</article>Styling Mark
The default styling is yellow background, but you can customize it:
styled-mark.html
<style>
/* Default browser styling (yellow) */
mark {
background-color: yellow;
color: black;
}
/* Custom styling */
mark {
background-color: #fff3cd;
color: #856404;
padding: 2px 4px;
border-radius: 3px;
}
/* Different style for different contexts */
.search-result mark {
background-color: #ffeb3b;
font-weight: bold;
}
.highlight mark {
background-color: #b3e5fc;
}
</style>
<p class="search-result">
Search: <mark>JavaScript</mark> tutorial
</p>
<p class="highlight">
Important: <mark>Save your work regularly</mark>
</p>Combining Time and Mark
combined.html
<!-- Highlighting important dates -->
<p>
Deadline: <mark><time datetime="2024-03-01">March 1, 2024</time></mark>
</p>
<!-- In search results -->
<article>
<h3>Event on <mark>March</mark> 20th</h3>
<p>
Join us on <mark><time datetime="2024-03-20">March 20, 2024</time></mark>
for our annual conference.
</p>
</article>Best Practices
Always Use datetime for Time
datetime-best.html
<!-- Good: Machine-readable datetime -->
<time datetime="2024-01-15">January 15, 2024</time>
<!-- Poor: No datetime attribute -->
<time>January 15, 2024</time>
<!-- Still works but less useful -->
<p>January 15, 2024</p>Use Mark for Relevance, Not Emphasis
mark-usage.html
<!-- Good: Highlighting search terms -->
<p>Results for "<mark>web development</mark>"</p>
<!-- Wrong: Using for importance -->
<p><mark>This is very important!</mark></p>
<!-- Better: Use strong for importance -->
<p><strong>This is very important!</strong></p>Accessibility Considerations
- Time elements help screen readers announce dates correctly
- Mark elements may be announced as "highlighted" by some screen readers
- Ensure sufficient color contrast when styling mark
- Don't rely only on mark styling to convey meaning
Key Takeaways
- Use
<time>for dates, times, and durations - Always include the
datetimeattribute - Format datetime in ISO 8601 standard (YYYY-MM-DD)
- Use
<mark>to highlight relevant text - Mark is for reference, not emphasis or importance
- Default mark styling is yellow background
- Both elements improve semantic meaning and accessibility
- Use strong/em for importance/emphasis, not mark
What's Next?
Congratulations! You've completed the Semantic HTML section. You now understand how to structure web pages with meaningful, accessible markup. Next, we'll explore HTML5 Features, starting with an overview of modern HTML5 capabilities and APIs.