HTML time tag | belajar <time> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML time tag. Tutorial dan panduan mengenai element <time>...</time> yang digunakan untuk menginformasikan tanggal dan waktu. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <time>.

Deskripsi
Penjelasan HTML time

HTML <time> element digunakan untuk merepresentasikan sebuah waktu 24-jam atau tanggal, tepatnya tanggal dalam sistem masehi (dikenal dengan nama "Gregorian Calendar") dengan tambahan waktu dan informasi zona waktu (timezone) yang dapat ditulis secara opsional.

Element <time> sering digunakan bersama attribute datetime yang digunakan dengan maksud untuk menunjukkan waktu yang dapat dimengerti oleh mesin-pembaca (machine-readable) sehingga dapat dimanfaatkan oleh browser (user-agent) seperti untuk mengingat tanggal lahir user, tugas, acara dan kalender pengingat lainnya.

<time> yang tidak memiliki attribute datetime tidak boleh terdapat element apapun didalamnya dan hanya berisi dengan konten keterangan waktu sesuai format standard (ISO 8601).

Konten didalam <time> element diisi dengan tanggal, waktu, zona waktu atau durasi yang ditulis dengan format yang beraneka ragam. Contohnya dapat dilihat dibawah.

HTML <time> merupakan tag yang baru diperkenalkan pada HTML5.

Attributes
Atribut HTML Tag <time>

datetime

Menentukkan format tanggal dan waktu yang dapat dipahami oleh mesin-pembaca (machine-readable)

Value: format penulisan tanggal dan waktu yang valid (ISO 8601)

Contoh:

<time datetime="1945-08-17">Jumat, 17 Agustus 1945</time>

Penulisan tanggal untuk datetime menggunakan format standar international ISO 8601 yang diawali dengan tahun, bulan dan tanggal yang dipisahkan dengan tanda strip (-) seperti contoh diatas. Jika atribut datetime disebutkan, maka konten di dalam <time> dapat diisi dengan format tanggal yang relevan (contoh konten diatas adalah format penulisan tanggal Bahasa Indonesia). Untuk format selengkapnya, dapat dilihat pada pembahasan mengenai HTML datetime attribute.

Global Attributes
Atribut Secara Global (Keseluruhan)

<time> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<time> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <time> element

Example 1

Contoh HTML <time> element tanpa atribut datetime, oleh karenanya konten di dalam time harus sesuai dengan format standar (valid).

HTML 
<p> Saya mulai bekerja pada
<time>2012-06-01</time>
</p>

Jika format yang ditulis tidak valid, maka element <time> tidak menunjukkan waktu yang dapat diasosiasikan.

Example 2

Contoh HTML <time> element yang hanya menggunakan keterangan waktu (jam).

HTML 
<p>
Saya bekerja pada pukul <time>08:00</time> dan pulang pukul <time>17:00</time>
</p>

Example 3

Contoh HTML <time> element yang digunakan untuk menulis tanggal dipublikasikannya sebuah artikel, lengkap dengan microdata schema.org.

HTML 
<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">Cara Menyisipkan Tanggal di dalam HTML</h1>
  <footer>Ditulis Pada:
    <time itemprop="datePublished" datetime="2015-08-17">Senin, 17 Agustus 2015</time>.
  </footer>
  <p itemprop="description">Untuk menyisipkan tanggal dan waktu di dalam halaman HTML gunakan element &lt;time&gt;.</p>
</article>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML time tag</title>
    <style>

    </style>
  </head>
  <body>
     <h3>Example 1</h3>
      <p> Saya mulai bekerja pada
       <time>2012-06-01</time>
      </p>

     <hr />
     <h3>Example 2</h3>
      <p>
      Saya bekerja pada pukul <time>08:00</time> dan pulang pukul <time>17:00</time>
      </p>

     <hr />
     <h3>Example 3</h3>
      <article itemscope itemtype="http://schema.org/Article">
       <h1 itemprop="headline">Cara Menyisipkan Tanggal di dalam HTML</h1>
       <footer>Ditulis Pada:
         <time itemprop="datePublished" datetime="2015-08-17">Senin, 17 Agustus 2015</time>.
        </footer>
       <p itemprop="description">Untuk menyisipkan tanggal dan waktu di dalam halaman HTML gunakan element &lt;time&gt;.</p>
      </article>

  </body>
</html>
SHARE
Previous Article Next Article