Langkah-langkah untuk menghapus garis bawah dari tautan teks dan masalah yang harus diperhatikan
Secara default, konten teks yang ditautkan ke HTML menggunakan elemen atau "jangkar" ditata dengan garis bawah. Seringkali, desainer web memilih untuk menghapus gaya bawaan ini dengan menghapus garis bawah.
Banyak desainer tidak peduli dengan tampilan teks yang digarisbawahi, terutama dalam blok konten padat dengan banyak tautan. Semua kata yang digarisbawahi benar-benar dapat mematahkan aliran pembacaan dokumen. Banyak yang berpendapat bahwa yang digarisbawahi 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, ketika Anda menelusuri blok teks berukuran besar, tautan bergaris digabung dengan kontras warna yang tepat memudahkan pembaca untuk segera memindai laman dan melihat di mana tautan berada. Jika Anda melihat artikel desain web di sini di About.com, serta artikel lain di situs ini, Anda akan melihat gaya ini menggarisbawahi tautan di tempat.
Jika Anda memutuskan untuk menghapus tautan dari teks (proses sederhana yang akan kami bahas segera), pastikan untuk menemukan cara untuk mengatur teks tersebut agar tetap membedakan apa itu tautan dari apa yang teks biasa. Ini paling sering dilakukan dengan kontras warna tersebut, tetapi warna saja dapat menimbulkan masalah bagi pengunjung dengan gangguan penglihatan seperti buta warna. Tergantung pada bentuk khusus mereka buta warna, kontras mungkin benar-benar hilang pada mereka, mencegah mereka melihat perbedaan antara teks yang terhubung dan yang tidak terkait. 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 dari situs web kami yang menangani semua hal visual - CSS.
Gunakan Cascading Style Sheets untuk Mematikan Underline pada Tautan
Dalam banyak kasus, Anda tidak ingin mengubah 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 style sheet eksternal Anda.
sebuah {text-decoration: none; }Itu dia! Satu baris CSS sederhana akan mematikan garis bawah (yang sebenarnya menggunakan properti CSS untuk "text-decoration") 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:
nav a {text-decoration: none; }Sekarang, tautan teks di halaman akan mendapatkan garis bawah standar, tetapi yang ada di nav akan menghapusnya.
Satu hal yang banyak dilakukan oleh desainer web adalah mengembalikan tautan ke "aktif" ketika seseorang mengarahkan kursor ke teks. Ini akan dilakukan menggunakan: hover CSS pseudo-class, seperti ini:
sebuah {text-decoration: none; } a: hover {text-decoration: garis bawah; }Menggunakan CSS sebaris
Sebagai alternatif untuk membuat perubahan pada stylesheet eksternal, Anda juga dapat menambahkan gaya langsung ke elemen itu sendiri dalam HTML, seperti ini:
tautan ini tidak memiliki garis bawahMasalah dengan metode ini adalah ia menempatkan informasi gaya di dalam struktur HTML Anda, yang bukan merupakan praktik terbaik. Style (CSS) dan struktur (HTML) harus tetap terpisah.
Jika Anda ingin semua tautan teks situs yang digarisbawahi dihapus, menambahkan informasi gaya ini ke setiap tautan secara individual akan berarti cukup banyak markup tambahan ditambahkan ke kode situs Anda. Peretasan 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 style sheet eksternal untuk semua kebutuhan styling 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, itu mungkin melakukannya dengan mengorbankan kegunaan secara keseluruhan. Pertimbangkan hal ini pada saat berikutnya Anda mempertimbangkan untuk mengubah properti "text-decoration" suatu halaman.
Artikel asli oleh Jennifer Krynin. Diedit pada 9/19/16 oleh Jeremy Girard