Elemen Time HTML5 Dan Dasar-Dasar Belajar 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.

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.

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 .

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.

Post Views: 265