Secara default, konten teks yang ditautkan ke HTML menggunakan elemen atau "jangkar" ditata dengan garis bawah. Seringkali, desainer web memilih untuk menghapus gaya default ini dengan menghapus garis bawah.
Alasan untuk dan Terhadap Garis Bawah
Banyak desainer tidak peduli dengan tampilan teks yang digarisbawahi, terutama pada blok konten yang padat dengan banyak tautan. Semua kata yang digarisbawahi itu benar-benar dapat memutus alur pembacaan dokumen. Banyak yang berpendapat bahwa garis bawah itu sebenarnya membuat kata-kata lebih sulit untuk dibedakan dan dibaca dengan cepat karena cara menggarisbawahi mengubah bentuk huruf alami.
Namun, ada manfaat yang sah untuk mempertahankan garis bawah ini pada tautan teks. Misalnya, saat Anda menelusuri blok teks yang besar, tautan yang digarisbawahi ditambah dengan kontras warna yang tepat memudahkan pembaca untuk segera memindai halaman dan melihat di mana tautan tersebut berada.
Jika Anda memutuskan untuk menghapus tautan dari teks (proses sederhana yang akan segera kami bahas), pastikan untuk menemukan cara untuk menata gaya teks tersebut agar tetap membedakan apa tautan dari teks biasa. Ini paling sering dilakukan dengan
kontras warna, tetapi warna saja dapat menimbulkan masalah bagi pengunjung dengan gangguan penglihatan seperti buta warna. Bergantung pada bentuk khusus buta warna mereka, kontras mungkin benar-benar hilang pada mereka, mencegah mereka melihat perbedaan antara teks tertaut dan tidak tertaut. Inilah sebabnya mengapa teks yang digarisbawahi masih dianggap sebagai cara terbaik untuk menampilkan tautan.Jadi bagaimana Anda mematikan garis bawah jika Anda masih ingin melakukannya? Karena ini adalah karakteristik visual yang kami perhatikan, kami akan beralih ke bagian situs web kami yang menangani semua hal visual — CSS.
Gunakan Cascading Style Sheets untuk Mematikan Garis Bawah pada Tautan
Dalam kebanyakan kasus, Anda tidak ingin mematikan garis bawah hanya pada satu tautan teks. Sebaliknya, gaya desain Anda mungkin mengharuskan Anda untuk menghapus garis bawah dari semua tautan. Anda akan melakukan ini dengan menambahkan gaya ke Anda lembar gaya eksternal.
Sebuah {
dekorasi teks: tidak ada;
}
Itu dia! Satu baris sederhana itu CSS akan mematikan garis bawah (yang sebenarnya menggunakan properti CSS untuk "dekorasi teks") pada semua tautan.
Anda juga bisa lebih spesifik dengan gaya ini. Misalnya, jika Anda hanya ingin mematikan garis bawah atau tautan di dalam elemen "nav", Anda dapat menulis:
navigasi {
dekorasi teks: tidak ada;
}
Sekarang, tautan teks pada halaman akan mendapatkan garis bawah default, tetapi yang ada di nav akan menghapusnya.
Satu hal yang dipilih oleh banyak perancang web untuk dilakukan adalah menghidupkan kembali tautan "aktif" ketika seseorang mengarahkan kursor ke teks. Ini akan dilakukan dengan menggunakan :hover Kelas semu CSS, seperti ini:
Sebuah {
dekorasi teks: tidak ada;
}
a: melayang {
dekorasi teks: garis bawah;
}
Menggunakan CSS Sebaris
Sebagai alternatif untuk membuat perubahan pada lembar gaya eksternal, Anda juga dapat menambahkan gaya langsung ke elemen itu sendiri di HTML.
Masalah dengan metode ini adalah ia menempatkan informasi gaya di dalam struktur HTML Anda, yang bukan merupakan praktik terbaik. Gaya (CSS) dan struktur (HTML) harus dipisahkan.
Jika Anda ingin semua tautan teks situs dihapus garis bawahnya, tambahkan informasi gaya ini ke setiap tautan secara individual akan berarti cukup banyak markup tambahan yang ditambahkan ke situs Anda kode. Penggembungan halaman ini dapat memperlambat waktu buka situs dan membuat pengelolaan halaman secara keseluruhan jauh lebih menantang. Untuk alasan ini, lebih baik untuk selalu beralih ke lembar gaya eksternal untuk semua kebutuhan penataan halaman.
Dalam Penutupan
Semudah menghapus garis bawah dari tautan teks halaman web, Anda juga harus memperhatikan konsekuensi dari melakukannya. Meskipun mungkin memang membersihkan tampilan halaman, mungkin melakukannya dengan mengorbankan kegunaan secara keseluruhan. Pertimbangkan ini saat Anda mempertimbangkan untuk mengubah properti "teks-dekorasi" halaman.