Element HTML yang Jarang Kamu Pakai Tapi Sangat Berguna

Halo teman-teman semua, di artikel kali ini kita akan membahas beberapa elemen HTML yang jarang diketahui tapi sangat berguna. Teman-teman pasti sudah familiar dengan elemen-elemen seperti paragraf, heading, link, dan sebagainya. Apa saja elemen-elemen HTML yang perlu penting tapi perlu diketahui?

Audio

Tag <audio> berfungsi untuk memutar suara seperti musik atau format audio lainnya. Ada tiga format yang didukung pada saat ini yaitu MP3, WAV, dan OGG.

Contoh:

<audio controls>
  <!-- Won't play because the mp3 doesn't exist -->
  <source src="cat.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Output

Tag <output> ini dapat digunakan untuk menampilkan hasil dari suatu perhitungan. Kalian dapat menggunakan tanda + dan = untuk menunjukan bahwa nilai pertama dan kedua harus "dikeluarkan" melalui tag `

.

Contoh:

<form oninput="totalWeight.value=parseInt(catAWeight.value)+parseInt(catBWeight.value)">0
  <input type="range" id="catAWeight" value="50">100
  +<input type="number" id="catBWeight" value="50">
  =<output name="totalWeight" for="catAWeight catBWeight"></output>
</form>

Progress

Tag <progress> dapat berfungsi untuk menampilkan progress bar.

Contoh:

<progress value="42" max="100"></progress>

Video

Tag <video> dapat dipakai untuk memutar file video baik lokal maupun yang tersimpan di server lain. Dengan elemen ini, kita tidak perlu menggunakan library pihak ketiga untuk memutar video di halaman web yang sedang dikerjakan.

Contoh:

<video width="320" height="240" controls>
  <!--can't play -->
  <source src="">
</video>

Time

Tag <time> dapat dipakai untuk menampilkan tanggal/waktu. Secara visual, tidak ada perbedaan saat menggunakan tag <time>, akan tetapi jika tag ini dipakai, maka browser bisa membantu pengguna untuk menambahkan tanggal/waktu ke aplikasi kalender atau reminder yang mereka pakai. Selain itu, elemen <time> juga dapat membantu mesin pencari seperti Google, Yahoo, atau Bing untuk memberikan hasil pencarian yang lebih akurat.

Contoh:

<p>Saya bangun pada pukul <time>07:00</time> setap harinya.</p>