Tips HTML yang Mungkin Jarang Kamu Temukan!

Kalau kamu lagi belajar HTML dasar, kamu harus lihat tips dan trik berikut ini! Siapa sangka hanya dengan menggunakan HTML saja bisa membantu kita membuat elemen-elemen yang ada di website menjadi lebih interaktif dan powerful tanpa perlu menggunakan JavaScript! Memangnya ada tips HTML apa saja ya? Yuk cari tahu dan pelajari lewat artikel berikut ini:

1. Membuat Indikator Bar

Ada yang tau gak ternyata selain menggunakan tag progress, ternyata kita bisa buat indikator bar dengan menggunakan tag meter. Eits, tapi tentu saja ini beda ya! Perlu kita ketahui bahwa keduanya punya fungsi dan konteks yang berbeda. Apa saja ya?

Tag progress digunakan untuk menampilkan proses yang sedang berjalan. Seperti download, upload, loading, dan sebagainya. Sedangkan tag meter digunakan untuk menampilkan nilai dalam rentang tertentu, seperti baterai, performa, suhu, dan sebagainya. Untuk melihat perbedaannya bisa lihat di bawah ya.

2. Membuat Autocomplete

Ada banyak yang mencari tutorial membuat autocomplete, padahal kita dapat membuatnya di HTML tanpa perlu pakai JavaScript, loh! Baru tahu?

Caranya juga sangat mudah. Perlu diingat, untuk yang memiliki data banyak tentunya harus tetap dihubungkan dengan database ya agar tetap update.

3. Mengubah Urutan Nomor List

Saat mendesain tampilan website dan ingin menampilkan daftar poin, kita bisa memanfaatkan tag ul atau ol dari HTML. Nah, lalu bagaimana caranya kalau kita ingin membuat urutan nomor list dengan tidak dimulai dari angka 1? Sangat mudah! Kita dapat menggunakan atribut "start". Misalnya, kita ingin menampilkan mulai dari nomor 6 ke atas, kita bisa mengetikkan "start="6"".

4. Membuat Accordion

Pernah melihat desain yang klik tanda panah dulu untuk melihat lebih detail? Yup, biasanya itu disebut dengan "accordion". Siapa sangka, membuat accordion di HTML ternyata cukup sederhana dan bisa dilakukan tanpa perlu JavaScript atau jQuery. Kita bisa menggunakan tag details. Dan hasilnya akan menjadi seperti ini:

5. Membuat Grup Kategori pada Selection

Ingin mengumpulkan kategori tertentu pada sebuah selection? Kita bisa membuatnya dengan menggunakan HTML! Gunakan tag optgroup untuk membuat kategori pada pilihan.

Lihat semua code yang dibuat di sini ya:

See the Pen HTML Tricks by Dumet_School (@dumet_school) on CodePen.

Catatan:

Perlu diingat, semua yang dicontohkan memang tampilan default-nya seperti itu. Kalau kamu ingin tampilannya lebih menarik, kamu bisa memperindahnya dengan tambahan CSS.

Kesimpulan

Dalam membangun elemen-elemen pada sebuah website, HTML dan CSS bisa jadi kombinasi dasar yang sangat berguna. Terus gali dan explore penggunaan HTML untuk pembuatan website yang lebih efisien dan mudah. Yuk, pelajari semuanya di kursus Frontend Developer! Segera hubungi kami untuk informasi kursus yang lebih lengkap ya :)

Semoga artikel ini bermanfaat ya! Sampai jumpa di artikel yang selanjutnya :)