// Tutorial //

How To Use the Time Element in HTML5

Published on August 26, 2016 · Updated on September 24, 2020
    Default avatar
    By Alligator.io
    Developer and author at DigitalOcean.
    How To Use the Time Element in HTML5

    Introduction

    The <time> element is new to HTML5. It makes it easier to markup time information. Let’s examine some scenarios and use <time> in practice.

    Prerequisites

    Using the Time Element in HTML5

    <time> allows you to markup date and/or time information in a format that’s easy to understand for both humans and machines. For example, if you want to markup time that’s already in a machine-readable format, you use <time> like this:

    <p>
      Meet me at <time>11:59</time> at the dock.
    </p>
    

    Or, if the date/time information is not machine-readable, you’d mark it up like this with the datetime attribute:

    <p>
      Last updated
      <time datetime="2015-11-03">
        November 3rd 2015
      </time>.
    </p>
    

    The value for the datetime attribute takes one of the following formats:

    • date: YYYY-MM-DD
    • datetime (with time zone): YYYY-MM-DDThh:mm:ss.Z (e.g.: 2016-06-30T03:37:56-0800)
    • datetime-local (no time zone): YYYY-MM-DDThh:mm:ss
    • time: hh:mm:ss
    • month: YYYY-MM

    This is how you can use the new <time> element.

    Conclusion

    <time> is an important new element in HTML5.

    For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.

    If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

    Learn more here


    About the authors
    Default avatar
    Developer and author at DigitalOcean.

    Default avatar
    Developer and author at DigitalOcean.

    Still looking for an answer?

    Was this helpful?
    Leave a comment

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!