Kesalahan Umum Seorang UI Engineer : Salah Memahami Pembuatan Garis Horizontal dan Vertikal

Daftar Isi

• Tidak Membedakan Jenis Garis
• Pakai <hr> Untuk Garis Horizontal
• Pakai <div> Untuk Garis Vertikal
• Tidak Konsisten Antara Visual dan Semantik
• Penutup

Sebagai UI Engineer, kita sering banget ngurusin tampilan - tampilan kecil yang kelihatannya sepele tapi sebenarnya penting banget. Salah satunya adalah masalah garis. Baik itu garis Horizontal (mendatar) maupun Vertikal (tegak). Banyak yang keliru soal ini, padahal cara pakainya beda loh.

1. Tidak Membedakan Jenis Garis

Pertama, penting banget buat tahu kalau garis itu ada 2 tipe :

• Garis Horizontal (Mendatar, Memisahkan antar bagian)
• Garis Vertikal (Tegak, Memisahkan konten kiri dan kanan)

Masalahnya, kadang semua garis dibikin pakai <div> aja, padahal ada tag HTML khusus yang bisa bantu bikin kode lebih rapi dan semantik.

2. Pakai <hr> Untuk Garis Horizontal

Nah, untuk buat garis horizontal, sebenarnya HTML sudah menyediakan tag khusus, yaitu :

<hr>

Tag <hr> ini udah otomatis punya border bawaan. jadi kita nggak perlu nambahin border lagi kayak gini :

<hr class="border border-gray-300"> <!-- Ini sebenarnya nggak perlu -->

Yang lebih benar dan simpel

<hr class="mt-4"> <!-- Cukup tambahin margin kalau mau ngatur jarak -->

Kalau mau ganti warna garis atau tebalnya, baru deh tambahin border untuk modifikasi tebalnya dan bisa juga pakai border-red-600 untuk mengganti warnanya.

Contoh :

Horizontal Line

Seperti yang kita lihat di konten bagian kiri ada 1 garis horizontal (Mendatar) yang pakai tag <hr>

<hr class="w-1/2 border-[#ECECEC]">

3. Pakai <div> Untuk Garis Vertikal

Buat garis yang berdiri (vertikal), jangan pakai <hr> karena itu khusus horizontal. Di sini justru kita boleh banget pakai <div> Contohnya kayak gini :

<div class="w-1 h-6 bg-gray-300"></div>

Kita atur lebarnya pakai w-1 yang artinya punya lebar 1 px dan tinggi sesuai kebutuhan dan juga bg-gray-300 buat atur warnanya, Gampang kan?

Contoh :

Vertical Line

<div class="w-[1px] h-[96px] bg-[#D5D9E0]"></div>

Bisa dilihat pada gambar di atas, ini adalah contoh penggunaan garis vertikal yang misahin antar konten kiri dan kanan.

4. Tidak Konsisten Antara Visual dan Semantik

Kadang kita bikin tampilan asal keliatan bagus aja, tapi ngelupain arti semantik dari elemen yang kita pakai. Padahal kalau tim lain baca kode kita, mereka bisa bingung. Jadi, penting banget buat konsisten antara tampilan dan struktur HTML nya.

Penutup

Intinya, garis itu emang kecil, tapi kalau salah pakai bisa bikin kode jadi nggak rapi dan susah maintenance. Yuk mulai biasain pakai elemen yang tepat, biar tampilan cakep dan kode tetap rapi.