Apa itu Link Placeholder HTML5?
idUp hingga HTML5, sebuah tag membutuhkan satu atribut: href. Tetapi HTML5 bahkan membuat atribut itu opsional. Saat Anda menulis tag tanpa atribut apa pun, disebut tautan placeholder.
Tautan placeholder terlihat seperti ini:
SebelumnyaMenggunakan Placeholder Links Selama Pengembangan
Hampir setiap perancang web telah membuat tautan tempat penampung pada satu waktu atau lainnya saat merancang dan membangun situs web. Sebelum HTML5, kami akan menulis:
teks tautansebagai placeholder. Dan saya telah mengirim situs mockup ke klien dengan placeholder hanya untuk meminta klien bertanya kepada saya "mengapa tautan dalam teks tidak berfungsi?"
Masalah dengan menggunakan tagar (#) sebagai tautan placeholder adalah tautan tersebut dapat diklik, dan ini dapat menyebabkan kebingungan bagi klien Anda. Dan, jika seseorang lupa untuk memperbaruinya dengan URL yang benar, tautan tersebut dapat muncul rusak di situs langsung karena tidak tertaut ke apa pun.
Sebagai gantinya, Anda harus mulai menggunakan tag tanpa atribut apa pun. Anda dapat membuat style ini agar terlihat seperti tautan lain di halaman Anda, tetapi mereka tidak akan dapat diklik karena mereka hanya placeholder.
Menggunakan Placeholder Links di Live Sites
Tetapi tautan placeholder memiliki tempat di desain web untuk lebih dari sekedar pengembangan. Satu tempat tempat tautan placeholder dapat bersinar adalah di navigasi. Dalam banyak kasus, daftar navigasi situs web memiliki beberapa cara untuk menunjukkan halaman mana Anda berada. Ini sering disebut indikator “Anda ada di sini”.
Sebagian besar situs bergantung pada atribut id pada elemen yang membutuhkan penanda "Anda ada di sini", tetapi beberapa menggunakan atribut kelas juga. Namun, atribut apa pun yang Anda gunakan, Anda perlu melakukan banyak pekerjaan untuk setiap halaman yang memiliki navigasi di atasnya, menambah dan menghapus atribut dari elemen yang benar.
Dengan tautan placeholder, Anda dapat menulis navigasi sesuka Anda, dan kemudian cukup menghapus atribut href dari tautan yang sesuai saat Anda menambahkan navigasi ke halaman. Saya menyimpan seluruh daftar navigasi saya sebagai snipet di editor saya, jadi itu hanya copy-paste cepat dan kemudian hapus href. Anda juga bisa mendapatkan CMS Anda untuk melakukan hal yang sama.
Selain menambahkan gaya khusus (saya akan menunjukkan caranya di bawah) ke tautan placeholder, tautan tidak dapat diklik. Jadi pelanggan tidak bingung berpikir bahwa mereka mungkin mendapatkan sesuatu yang lain jika mereka mengeklik tautan navigasi tempat mereka saat ini.
Tautan Placeholder Styling
Tautan placeholder mudah untuk gaya dan gaya berbeda dari tautan lain di halaman web Anda. Pastikan untuk memberi style tag dan tag tautan: a. Sebagai contoh:
sebuah {warna: merah; font-weight: bold; teks-dekorasi: tidak ada; } a: tautan {color: blue; font-weight: normal; text-decoration: garis bawah; }CSS ini akan membuat tautan placeholder menjadi tebal dan merah, tanpa garis bawah. Sementara tautan reguler akan memiliki berat normal, biru dan bergaris bawah.
Ingat untuk mengatur ulang gaya apa pun yang Anda tidak ingin terbawa dari tag. Misalnya, saya menetapkan font-weight untuk dicetak tebal untuk tautan placeholder, jadi saya harus menetapkannya ke:
font-weight: normal;untuk tautan standar. Hal yang sama berlaku dengan dekorasi-teks, dengan menghapusnya dengan pemilih, itu akan dihapus untuk a: pemilih tautan jika saya tidak mengembalikannya.