Belajar HTML5 Elemen Time HTML5


Labkom99.com - Elemen time HTML5 adalah elemen semantik yang digunakan untuk menentukan tanggal dan waktu halaman. Elemen time tersebut berisi 2 bagian informasi tanggal. Satu bagian untuk membaca mesin, bagian lainnya untuk bisa terbaca manusia. Berikut ini contoh sederhana kode elemen time.

<time datetime="2015-10-01">2015 years 10 month 1 day</time>   

Seperti pada kode contoh di atas, date dan time yang diberikan dalam atribut adalah untuk membaca mesin. Tanggal orang membaca adalah bagian <time> di antara tag.

 

Jika Anda hanya perlu menggunakan tanggal yang dapat dibaca oleh mesin, Anda dapat menulis tanggal di antara tag <time> alih-alih atribut date time, misalnya, seperti berikut ini:

<time>2015-10-01</time> 

Pada tahun 2011, elemen time tersebut dihapus dari spesifikasi HTML5. Tetapi setelah beberapa pembaruan nanti, itu baru ditambahkan ke spesifikasi HTML5.

 

Baca Juga : Belajar HTML5 Elemen Header Dan Footer HTML5


Format Tanggal

Format tanggal elemen time harus terdiri dari beberapa format yang tercantum di bawah ini:

YYYY-MM-DDTHH:MM:SS.SSS+ZHZM
YYYY-MM-DDTHH:MM:SS.SSS-ZHZM
YYYY-WXX      


Arti format tanggal di atas adalah sebagai berikut:

 

Kode huruf

deskripsi

YYYY

Gunakan 4 digit untuk menentukan tahunnya, misalnya: 2015

MM

Gunakan 2 digit untuk menentukan bulan, contoh: 09 atau 12, bulan harus antara 01-12

WXX

Gunakan 2 digit untuk menentukan nomor minggu dalam setahun, seperti 01 atau 51. Jumlah minggu harus antara 01-53

DD

Gunakan 2 digit untuk menentukan jumlah hari, seperti 01 atau 31. Jumlah hari harus antara 01-31

T

Huruf T digunakan untuk menunjukkan bahwa string waktu dimasukkan setelah tanggal. Anda juga dapat menggunakan spasi sebagai pengganti huruf T.

HH

Gunakan 2 digit untuk menentukan jumlah jam, jumlah jam harus antara 00-23

MM

Gunakan 2 digit untuk menentukan jumlah menit, jumlah menit harus antara 00-59

SS

Gunakan 2 digit untuk menentukan jumlah detik, jumlah detik harus antara 00-59

SSS

Gunakan 3 digit untuk menentukan jumlah milidetik, jumlah milidetik harus antara 000-999

-ZHZM

Offset zona waktu didasarkan pada UTC (Waktu Universal Terkoordinasi). Gunakan + atau-untuk menentukan, lalu gunakan 4-digit jam dan menit (HHMM) sebagai nilai offset.

+ ZHZM

Offset zona waktu didasarkan pada UTC (Waktu Universal Terkoordinasi). Gunakan + atau-untuk menentukan, lalu gunakan 4-digit jam dan menit (HHMM) sebagai nilai offset.

 

Beberapa bagian dari opsi ini bersifat opsional. Misalnya, Anda tidak perlu menggunakan bagian waktu, detik dan mili detik juga opsional. Jika Anda menggunakan bagian waktu, Anda harus menentukan zona waktu.


Baca Juga : Belajar HTML5 Elemen Navigasi HTML5


Beberapa contoh format tanggal dan waktu tercantum di bawah ini:

 

Format tanggal dan waktu

contoh

YYYY

2015

TTTT-BB

2015-09

TTTT-BB-HH

2015-09-09

YYYY-WXX

2015-W35

MM-DD

09-10

YYYY-MM-DDTHJ: MM-ZHZM

2015-09-10T23: 59-0500

TTTT-BB-HHTJJ: MM: SS-ZHZM

2015-09-10T23: 59: 59-0500

YYYY-MM-DDTHJ: MM: SS.SSS + ZHZM

2015-09-10T23: 59: 59: 999 + 0200

YYYY-MM-DDTHJ: MM: SS.SSS-ZHZM

2015-09-10T23: 59: 59: 999-0500

 


Menentukan Durasi

Kita juga dapat menggunakan elemen time untuk menentukan durasi daripada waktu yang tepat. Untuk menentukan durasi, Anda dapat menggunakan prefiks time di atribut  data timedalam elemen P, lalu menambahkan satuan waktu setelahnya. Satuan waktu disini diwakili oleh 1 huruf, contoh:

<time datetime="P1D">    


Contoh di atas mewakili durasi satu hari.

Satuan durasi dapat berupa:

 

satuan

deskripsi

D

hari

H.

jam

M

menit

S

kedua

 

Anda tidak dapat menentukan bulan sebagai unit, karena jumlah hari dalam sebulan tidak tetap. Ini akan menghasilkan jumlah detik yang berbeda yang digunakan untuk menghitung waktu di tempat, jadi bulan tidak dapat digunakan.

 

Durasi di atas juga bisa ditulis dengan spasi di antara huruf untuk memudahkan membaca:

<time datetime="P 1 D"> 

Jika Anda P menggunakannya nanti T, Anda dapat menentukan durasi dengan lebih tepat:

<time datetime="PT12H 34M 59S">   

Contoh di atas menunjukkan bahwa durasinya adalah 12 jam, 34 menit dan 59 detik.

 

Perhatikan penggunaan spasi pada tulisan di atas. Anda juga bisa menulis durasinya seperti ini:

<time datetime="PT 12H 34M 59S">
<time datetime="PT12H34M59S">  

Atribut Pubdate

elemen Time pubdate Atribut menunjukkan apakah kali ini adalah <article> waktu publikasi artikel .

 

Baca Juga : Belajar HTML5 Elemen Article Dan Elemen Aside HTML5


Berikut ini contohnya:

<time datetime="2015-09-10" pubdate>2015 years 9 month 10 day</time> 

Perhatikan bahwa Anda tidak perlu pubdate menentukan nilai true atau untuk atribut false. Penulisan seperti di atas berarti kali ini adalah waktu publikasi.

 

Berikut adalah contoh kode articleyang menggunakan elemen time dalam elemen :

<article>
 
    <p>
        Belajar HTML5 Elemen Time
    </p>
 
    <p>
        <time datetime="2015-09-10" pubdate>2015 years 9 month 10 day</time> 
    </p>
 
</article>             
           

Tidak ada aturan tegas tentang <time> apakah elemen di atas perlu disematkan ke dalam elemen p.

Komentar