Traditional HTML is “stateless”, i.e it has no concept of time or change. While this is still true in a formal sense, HTML5 introduced several new elements and attributes that temporally locate elements. These additions also tie into features provided by JavaScript and microdata to make rich pages that have awareness of time, place, and units of measurement.

Prerequisites: Basic HTML, some JavaScript useful for advanced lessons.

Goals: Markup a document with relevant, search-friendly time and date information.

Time: 1 hour

1. Marking up Measurements
2. <time>
3. Responsive Calendar w/ Flexbox
4. Add Calendar Events to Web Pages
5. <ins> & <del>

Demos with JavaScript and Other Technologies

1. Digital Clock
2. Analog Clock
3. A Better Reading Time Counter

Photograph by becosky, provided under a Creative Commons Attribution-ShareAlike license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.