// 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.


    Want to learn more? Join the DigitalOcean Community!

    Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

    Sign up
    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!