HTML5 semantic date

ClockThe element has had an off-again, on-again relationship with HTML5. Removed from the specification several months ago by WHATWG, it was quickly reinserted after an uprising from the web development community. is not just back, it’s improved and better than ever, with many of the element’s new attributes officially supported by the W3C.

surrounds time and date content on your page, in almost any context: the only requirement is that the date must be anytime between 0 CE and the future, as the element cannot take negative values. allows the browser, search engines and other applications to understand the specific time and date that is referenced on a web page, rather than guessing.

The simplest example is a year date:

The .

Or a month, for any year:

Remember, remember, Guy Fawkes Day.

Month and year or full date:

Construction of the Berlin Wall began in . It fell on

Obviously we can also talk about dates in the future. Full dates should include a time, in 24-hour (military) format, separated from the date by a T character or a space:

The working group’s presentations have been rescheduled for

(Note that the W3C validator currently allows the full date without time information; it may not yet recognize the year-only and month-year combinations shown above).

For exact moments in time, we can also supply seconds:

That’s a good start, but remember that all web pages are international: a browser looking at the datetime value above has no idea which side of the international date line the page is talking about. While not having this information is allowed by the W3C validator, you should always add time zone details by specifying the offset between the location of the event and UTC (Coordinated Universal Time) traditionally known as Greenwich Mean Time. For example, Calgary is in the Mountain Time Zone, seven hours behind London. With that information, the HTML code would become:

Alternatively, using just the time:

You have a meeting at


pubdate is now supported by the W3C. Adding the pubdate attribute to indicates the publication date of the first appropriate ancestor element. For example:

…would indicate that the article was published on 18 February, 2012. A time with pubdate attribute directly in the would indicate that the

You might also like
Beginning HTML5 5: Text Semantic Markup
Beginning HTML5 5: Text Semantic Markup
HTML5 and CSS 101: Hypertext Markup Language - 18. The DIV
HTML5 and CSS 101: Hypertext Markup Language - 18. The DIV ...
Login 2011 Workshop / HTML5, part I - markup
Login 2011 Workshop / HTML5, part I - markup
Monaco changes hands.(Business)(Navistar pays $5 million less than originally proposed for the RV maker, whose headquarters will stay in Coburg): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Uses for Monaco site weighed.(Business)(A local business leader says the facility on Interstate 5 would be ideal for a large manufacturer): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Individual Software Professor Teaches Dreamweaver CS5 [Download]
Digital Software (Individual Software)
  • Developing the Site Structure. Creating and Applying CSS Styles. Inserting Text and Hyperlinks. Building Templates, Tables & Forms. Inserting Images and Multimedia
  • Importing Word or HTML. Adding a Flash Button. Creating a Nav Bar and Rollover Images. Using Frames and Formatting Options. Publishing to a Remote Site
Related Posts