tRikSonic
Tema
  • Original
  • Translate
/ / HTML time Tag

HTML time Tag

Terakhir diperbarui : 22 Mei 2018 - 07.18
/ / HTML time Tag

Tutorial HTML <time>

Element HTML time digunakan untuk menulis format tanggal dan waktu. Dalam penulisannya, element <time> berpatokan kepada format masehi dalam kalender.
html time
Element <time> jika dalam penulisannya tanpa diikutsertakan attribute datetime, maka sifatnya wajib mengikuti format standar international ISO 8601 dan tidak boleh ada element html apapun didalamnya.

Contoh HTML <time>

<p>
 Rapat hari ini akan dibuka pada pukul <time>08:40</time>
 dan kalau sesuai jadwal akan ditutup pada pukul <time>11:00</time>
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p>
 Rapat hari ini akan dibuka pada pukul <time>08:40</time>
 dan kalau sesuai jadwal akan ditutup pada pukul <time>11:00</time>
</p>

</body>
</html>

Contoh HTML <time>

<h2>Contoh Yang benar</h2>
<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time>2009-04-25</time></li>
  <li>Hobby : Membaca</li>
</ol>

<hr>

<h2>Contoh Yang salah</h2>
<p>Attribute datetime diperlukan, jika formatnya seperti ini</p>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time>25-04-2009</time></li>
  <li>Hobby : Membaca</li>
</ol>

<hr>

<h2>Contoh Yang salah</h2>
<p>Attribute datetime diperlukan, jika formatnya seperti ini</p>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time>25 April 2009</time></li>
  <li>Hobby : Membaca</li>
</ol>

<hr>

<h2>Contoh Yang salah</h2>
<p>Attribute datetime diperlukan, jika element html ingin disematkan</p>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time><b>2009-04-25</b></time></li>
  <li>Hobby : Membaca</li>
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<h2>Contoh Yang benar</h2>
<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time>2009-04-25</time></li>
  <li>Hobby : Membaca</li>
</ol>

<hr>

<h2>Contoh Yang salah</h2>
<p>Attribute datetime diperlukan, jika formatnya seperti ini</p>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time>25-04-2009</time></li>
  <li>Hobby : Membaca</li>
</ol>

<hr>

<h2>Contoh Yang salah</h2>
<p>Attribute datetime diperlukan, jika formatnya seperti ini</p>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time>25 April 2009</time></li>
  <li>Hobby : Membaca</li>
</ol>

<hr>

<h2>Contoh Yang salah</h2>
<p>Attribute datetime diperlukan, jika element html ingin disematkan</p>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, <time><b>2009-04-25</b></time></li>
  <li>Hobby : Membaca</li>
</ol>

</body>
</html>

Attribute HTML <time>

datetime
Attribute ini digunakan untuk menentukan format tanggal dan waktu yang bisa dipahami oleh mesin pembaca
value : YYYY-MM-DDThh:mm:ssTZD
#Keterangan
YYYYmenentukan tahun, misal : 2017
MMmenentukan bulan, misal : 05 untuk bulan mei, 12 untuk bulan desember
DDmenetukan tanggal, misal : 12 untuk tanggal 12
Tmemberi info bahwa keterangan waktu juga disertakan, value ini harus ditulis dengan huruf besar, dan diikuti value keterangan waktu seperti hh, mm, ss

Misal : T09:00 (jam:menit) atau T09:00:55 (jam:menit:detik).

Catatan : Value T bisa diganti dengan space
hhmenentukan jam, misal : (09 untuk jam 9 pagi), (21 untuk jam 9 malam)
mmmenentukan menit, misal (03 untuk menit ke tiga), (50 untuk menit ke lima puluh)
ssmenentukan detik, misal (03 untuk detik ke tiga), (50 untuk detik ke lima puluh)
TZDTime Zone Designator yang berarti menentukan Zona Waktu, Z menunjukkan Zulu, atau yang akrab didengan dengan Greenwich Mean Time GMT (UTC+00:00).
Untuk indonesia WIB, TZD yang digunakan adalah +07:00

contoh 1 : datetime="2016-01-06T20:00+07:00" artinya (tahun 2016 bulan januari tanggal enam, jam delapan malam WIB.).

contoh 2 : datetime="2016-01-06 20:00+07:00" artinya sama dengan contoh nomor 1, yang membedakannya cara penulisan dengan menggunakan value T dengan space.
Contoh 1 :
<p>
 Materi akan dilanjutkan setelah 
 <time datetime="09:30"><em>coffee break</em></time>
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p>
 Materi akan dilanjutkan setelah 
 <time datetime="09:30"><em>coffee break</em></time>
</p>

</body>
</html>
Contoh 2 :
<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, 
     <time datetime="2009-04-25">25 April 2009</time>
  </li>
  <li>Hobby : Membaca</li>
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<ol>
  <li>Nama : Muhammad Nafis</li>
  <li>Tanggal lahir : Palangka Raya, 
     <time datetime="2009-04-25">25 April 2009</time>
  </li>
  <li>Hobby : Membaca</li>
</ol>

</body>
</html>
Contoh 3 :
<!--contoh 1-->
<p>
  Besok kita akan memperingati
  <time datetime="2017-11-09"><i>Hari Pahlawan</i></time>
</p>

<!--contoh 2-->
<p>
  Besok kita akan memperingati
  <time datetime="11-09"><i>Hari Pahlawan</i></time>
</p>

<!--Penulisan yang salah-->
<p>
  Besok kita akan memperingati
  <time datetime="09-11-2017"><i>Hari Pahlawan</i></time>
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<!--contoh 1-->
<p>
  Besok kita akan memperingati
  <time datetime="2017-11-09"><i>Hari Pahlawan</i></time>
</p>

<!--contoh 2-->
<p>
  Besok kita akan memperingati
  <time datetime="11-09"><i>Hari Pahlawan</i></time>
</p>

<!--Penulisan yang salah-->
<p>
  Besok kita akan memperingati
  <time datetime="09-11-2017"><i>Hari Pahlawan</i></time>
</p>

</body>
</html>

Global Attributes:

Element <time> mencakup Global Attributes HTML.

Event Attributes:

Element <time> mencakup Event Attributes HTML.

Browser Support :

HTML
ElementChromeSafariFirefoxOperaIE / Edge
<time>6.05.02211.19.0
Nilai pada table menentukan minimal versi browser

Default CSS :

Browser yang support dengan element <time>, mempunyai nilai default :
/* tidak ada */
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.