5 FITUR HTML YANG MUNGKIN BELUM BANYAK ATAU JARANG DIKETAHUI

Assalamualaikum Wr.Wb.

Kembali lagi di blog ini, terimakasih sobat sudah mau melihat postingan blog ini.

Pada kali ini saya tidak memberikan sebuah tutorial tetapi saya akan memberikan sedikit informasi tentang Coding.

Ternyata sobat, HTML banyak fitur yang jarang banget digunakan oleh para Programmer atau mungkin para Programmer tersebut belum mengetahui fiturnya.

Nah, untuk mengetahuinya saya akan memberikannya di postingan ini


5 FITUR HTML YANG MUNGKIN BELUM BANYAK ATAU JARANG DIKETAHUI 


1. Picture 

Tag <picture> memberi lebih banyak kontrol untuk menentukan sumber dari suatu gambar. Biasanya dipakai untuk gambar yang responsif.

Tag <picture> berisi dua tag: satu atau lebih tag <source> dan satu tag <img>.

Browser akan mencari elemen <source> pertama yang cocok dengan media query yang sudah ditentukan, yang didapat oleh atribut srcset. Jika tidak ada kueri media yang cocok, browser akan menggunakan elemen <img>.

Contoh: 

<picture>
  <source media="(min-width:1024px)" srcset="dog-big.jpg" />
  <source media="(min-width:465px)" srcset="dog-small.jpg" />
  <img src="cat.jpg" alt="Flowers" style="width:auto;" />
</picture>

2. Color Picker

Elemen <input> dengan type “color” bakal jadi color picker ketika diklik.
Default value-nya yaitu #000000 (Hitam)

Contoh:
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" />

4. Title Tooltip

Apa Anda tahu Popper.js? Well, ini versi vanilla HTML-nya.
Contoh:

<span title="”See," this is the tooltip. :)”>Move your mouse over me!</span>

5. Datalist

Tag <datalist> dipakai untuk memberikan fitur autocomplete ke elemen <input>.
User bisa melihat daftar drop-down dari <datalist> yang sudah dibuat.

Contoh:
<!-- list dan id -nya harus sama -->
<input list="animals" name="animal" id="animal" />
<datalist id="animals">
  <option value="Cat"></option>
  <option value="Dog"></option>
  <option value="Chicken"></option>
  <option value="Cow"></option>
  <option value="Pig"></option>
</datalist>

BONUS

Bonus ini adalah, jarang orang gunakan.

Progress Bar

Bukan hanya framework seperti Bootstrap saja lho yang punya, vanilla HTML juga ada.
Contoh: 
<label for="course">Course completion:</label>
<progress id="course" value="67" max="100"></progress> 67%

Jangan lupa, sesuai Principle of The Least Power, usahakan Anda memakai native HTML feature dulu 😉

Itulah beberapa fitur yang jarang banget digunakan oleh para Programmer.
Sekian dulu dari postingan ini, saya akhiri dengan,
Wassalamu'alaikum Wr.Wb.
FERDI ANANDA

Halo, Perkenalkan Nama Saya Ferdi Ananda, saya seorang Front-end Web Developer, Graphic Designer dan Content Creator. Hubungi Saya Jika Memerlukan Sesuatu.

Post a Comment (0)
Previous Post Next Post

Below Post Ad