Element HTML yang Jarang Kamu Pakai Tapi Sangat Berguna

Ditulis oleh aduar jendi, dipublikasi pada 02 Sep 2019 dalam kategori Tutorial
Element HTML yang Jarang Kamu Pakai Tapi Sangat Berguna - CodePolitan.com

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>

img

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>

img

Progress

Tag <progress> dapat berfungsi untuk menampilkan progress bar.

Contoh:

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

img

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>

img

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>

img


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP