The time element is a brand new HTML5 element used to specify date and times within a document. It's basically a flow element and has two attributes: datetime and pubdate. The first attribute is used to define the date and time format in the element it's attached to. As W3Schools specifies, "This attribute is used if no date or time is specified in the element's content.
" The format of dates and times is the same as that used for the XHTML ins and del elements. So 2011-02-26 and 2011-02-26T24:00:00Z are both valid values for this element.
pubdate, instead, is a Boolean attribute that specifies if the date and time provided have to be used as the publication time for a given element (or even for the entire document). As all HTML5 Boolean attributes, it can either be written simply as pubdate or as pubdate="pubdate" depending on what kind of coding style you choose for your HTML5 documents.
This element actually replaces the non semantical small element used in many CMS (e.g. Wordpress) systems to display dates. For example, in Wordpress you might have:
<div class="post"> <h2>Title</h2> <small>February 26, 2011</small> </div>
Instead, now you can write:
<article>
<header>
<h2>Title</h2>
<time datetime="2011-02-26" pubdate="pubdate">February 26, 2011</time>
</header>
</article>
which is more semantical and appropriate. The current support in browsers is far from being complete. For such reason, you can use CSS and its generated content feature to properly render this element:
article, header, time {
display: block;
}
article {
width: 60%;
margin: 0 auto;
padding: 2em 0;
}
article header {
background: #a40;
color: #fff;
padding: 1.5em;
border-radius: 10px;
}
header h2 {
font: 2em "Trebuchet MS", Trebuchet, sans-serif;
margin: 0;
text-align: center;
}
time {
text-align: center;
font-size: 1.2em;
padding: 5px 0;
}
time:before {
content: attr(datetime);
}
In this case, we're using the content property to insert the datetime attribute's value when a time element has no actual content. You can see a demo below.