Kenapa namanya “web”? Karena adanya tautan. Tautanlah yang merajut satu halaman ke halaman lain, sehingga kamu bisa berpindah ke mana saja di internet cuma dengan satu klik. Tanpa tautan, tiap halaman bakal berdiri sendiri-sendiri tanpa ada yang menghubungkan. Sementara itu, gambar punya peran lain: dia yang membuat halaman yang tadinya cuma teks polos jadi enak dilihat. Dua elemen inilah, <a> dan <img>, yang bikin web terasa seperti web.
Sebenarnya kamu sudah sempat berkenalan dengan keduanya di artikel sebelumnya. Kali ini kita bahas tuntas: bagaimana path bekerja, kenapa teks alt itu penting, dan detail-detail kecil yang menentukan apakah tautan dan gambarmu benar-benar jalan atau malah diam-diam rusak.
Tautan: elemen <a>
Untuk membuat tautan, kamu pakai elemen <a> — singkatan dari “anchor”, alias jangkar. Tapi tag-nya saja belum cukup, karena tautan perlu tahu arah tujuannya. Nah, tujuan itu kamu tentukan lewat atribut href (singkatan dari “hypertext reference”):
<a href="https://acy-partner.com">Kunjungi ACY Partner Indonesia</a>Ada tiga bagian, dan polanya selalu sama untuk tautan apa pun:
<a>— penanda bahwa ini sebuah tautan.href="https://acy-partner.com"— alamat tujuannya.Kunjungi ACY Partner Indonesia— teks yang muncul di layar dan bisa diklik.
Teks di antara tag itulah yang dilihat sekaligus diklik orang, jadi pastikan isinya jelas. “Kunjungi ACY Partner Indonesia” langsung memberi tahu pembaca ke mana mereka akan dibawa. Sebaliknya, teks samar macam “klik di sini” merugikan semua orang — apalagi pengguna pembaca layar, yang kerap meloncat dari tautan ke tautan dan mendengarnya tanpa konteks apa-apa.
Tulis teks tautan yang jelas berdiri sendiri
Jauhi “klik di sini” dan “baca selengkapnya” sebagai teks tautan. Coba bayangkan, pengguna pembaca layar bisa saja membuka daftar berisi semua tautan di satu halaman — dan satu layar penuh tulisan “klik di sini” sama sekali tidak membantu mereka. Lebih baik teksnya menggambarkan tujuannya, misalnya “baca panduan harga kami” atau “lihat dokumentasi lengkap.” Selain ramah aksesibilitas, ini juga bagus untuk mesin pencari, yang menjadikan teks tautan sebagai petunjuk soal isi halaman tujuan.
Ke mana sebuah tautan bisa mengarah: path
Nilai href bisa diisi dengan beberapa jenis alamat. Justru dengan memahami bedanya, kamu bisa menghindari tautan yang rusak.
Tautan eksternal (URL absolut)
Kalau mau menautkan ke situs lain, tulis alamat lengkapnya, lengkap dengan awalan https://:
<a href="https://acy-partner.com">Situs utama kami</a>Ini yang disebut URL absolut — alamatnya utuh dan lengkap, jadi tetap berfungsi dari mana pun dipanggil.
Tautan internal (URL relatif)
Untuk menautkan ke halaman lain di situsmu sendiri, biasanya kamu pakai URL relatif — yaitu path yang dihitung relatif terhadap halaman saat ini, tanpa perlu menyebut nama domain:
<a href="/about">Tentang kami</a>
<a href="/blog/postingan-pertamaku">Postingan pertamaku</a>Path yang diawali / artinya “mulai dari akar situs ini.” Jadi /about mengarah ke halaman about yang masih berada di situs yang sedang kamu buka. Selain lebih ringkas, tautan relatif juga tetap aman seandainya suatu saat kamu memindahkan seluruh situs ke domain yang baru.
Melompat di dalam satu halaman
Tautan juga bisa diarahkan ke titik tertentu di halaman yang sama dengan bantuan id. Caranya, beri sebuah elemen sebuah id, lalu arahkan tautan ke sana memakai tanda #:
<h2 id="harga">Harga</h2>
<a href="#harga">Lompat ke harga</a>Begitu tautan itu diklik, halaman akan tergulir turun langsung ke judul “Harga”. Inilah mekanisme yang dipakai oleh tautan “kembali ke atas” maupun daftar isi.
Jenis tautan berguna lainnya
Ada beberapa nilai href khusus yang juga perlu kamu kenal:
<a href="mailto:support@acy-partner.com">Email kami</a>
<a href="tel:+6281234567890">Telepon kami</a>mailto: akan membuka aplikasi email pengunjung dengan jendela pesan baru yang sudah siap diketik; sedangkan tel: membuat mereka tinggal mengetuk untuk langsung menelepon dari ponsel.
Membuka tautan di tab baru
Ada kalanya kamu ingin tautan terbuka di tab baru, bukan menggantikan halaman yang sedang dibuka — ini umum dipakai untuk tautan eksternal, supaya pengunjung tidak kehilangan jejak di situsmu. Caranya dengan menambahkan atribut target:
<a href="https://acy-partner.com" target="_blank" rel="noopener noreferrer">
Buka di tab baru
</a>target="_blank"menyuruh browser membuka tautan di tab baru.rel="noopener noreferrer"adalah tambahan kecil demi keamanan dan privasi, yang sebaiknya selalu kamu sertakan setiap kali memakaitarget="_blank".
Selalu pasangkan target=_blank dengan rel=noopener noreferrer
Saat kamu membuka tautan di tab baru lewat target="_blank", pada browser versi lama halaman baru itu bisa diam-diam mengintip balik halamanmu lewat JavaScript — dan itu termasuk celah keamanan sekaligus performa yang sudah dikenal. Nah, rel="noopener noreferrer" inilah yang menutup celah tersebut. Biasakan: tiap kali menulis target="_blank", langsung tulis rel="noopener noreferrer" di sebelahnya.
Gambar: elemen <img>
Untuk menampilkan gambar, kamu pakai elemen <img>. Berbeda dari tautan, gambar tidak punya isi teks yang perlu dibungkus — sebagai gantinya, kamu menunjuk ke berkas gambarnya lewat atribut src (singkatan dari “source”, alias sumber):
<img src="logo.png" alt="Logo ACY Partner Indonesia" />Ada dua hal yang perlu kamu cermati. Pertama, <img> itu self-closing — tidak ada </img>, sebab memang tidak ada apa pun yang ditaruh di dalamnya. Kedua, ada dua atribut penting: src (berkas yang ditampilkan) dan alt (deskripsi teksnya). Dua-duanya penting, dan peran alt ternyata jauh lebih besar dari yang dikira kebanyakan pemula.
Path gambar bekerja persis seperti path tautan
Aturan path pada src sama persis dengan href. Nilainya bisa berupa berkas di folder yang sama, path dari akar situs, atau URL lengkap:
<img src="kucing.jpg" alt="Seekor kucing" /> <!-- folder yang sama -->
<img src="/images/kucing.jpg" alt="Seekor kucing" /> <!-- dari akar situs -->
<img src="https://example.com/kucing.jpg" alt="Seekor kucing" /> <!-- eksternal -->Kalau ada gambar yang tidak muncul, biang keladinya hampir selalu path yang keliru — coba periksa ulang nama berkasnya (termasuk huruf besar dan kecilnya, karena di banyak server hal ini berpengaruh) beserta foldernya.
Kenapa teks alt itu tidak opsional
Atribut alt berisi deskripsi teks singkat dari sebuah gambar. Ada tiga tugas penting yang dijalankannya:
- Aksesibilitas: pembaca layar akan membacakannya untuk orang yang tidak bisa melihat gambar. Tanpa
alt, yang mereka dengar cuma kata “gambar” — sama sekali tidak membantu. - Cadangan: seandainya gambar gagal dimuat karena tautannya rusak atau koneksinya lambat, browser akan menampilkan teks alt sebagai gantinya, sehingga pembaca tetap paham apa yang semestinya ada di situ.
- SEO: mesin pencari tidak bisa benar-benar “melihat” gambar, jadi mereka bersandar pada teks alt untuk menebak isinya. Teks alt yang baik membuat gambarmu lebih mungkin nongol di hasil pencarian gambar.
Tulislah teks alt yang menggambarkan isi gambar apa adanya, seolah-olah kamu sedang menjelaskannya ke seseorang lewat telepon. Contoh yang bagus: “Anak anjing golden retriever tidur di sofa biru.” Sementara “image123” atau dibiarkan kosong jelas bukan pilihan yang tepat.
Satu pengecualian: gambar yang murni dekoratif
Untuk gambar yang sifatnya murni hiasan — misalnya ornamen latar atau garis pembatas yang tidak menambah makna apa-apa — kamu boleh mengisi alt-nya kosong (alt=""). Dengan begitu, pembaca layar akan melewatinya begitu saja ketimbang repot mengumumkan gambar yang sebenarnya tidak penting. Tapi ingat, ini cuma pengecualian. Begitu gambar membawa informasi, kamu wajib menuliskan deskripsi yang sebenarnya.
Lebar, tinggi, dan ukuran berkas
Sudah jadi kebiasaan baik untuk memberi tahu browser ukuran gambar sejak awal, supaya tata letak halaman tidak loncat-loncat selagi gambarnya masih dimuat:
<img src="foto.jpg" alt="Deskripsi" width="800" height="600" />Jangan lupa perhatikan juga ukuran berkasnya. Foto besar yang belum dikompres bisa membuat halamanmu berat dimuat, apalagi di ponsel. Memperkecil ukuran dan mengompres gambar sebelum dipakai adalah salah satu cara paling gampang supaya situs tetap ngebut — tapi soal itu kita simpan dulu untuk pembahasan lain.
Menggabungkan tautan dan gambar
Satu trik praktis terakhir: kamu bisa meletakkan gambar di dalam tautan, sehingga gambarnya sendiri yang bisa diklik. Tinggal bungkus saja <img> dengan <a>:
<a href="https://acy-partner.com">
<img src="logo.png" alt="ACY Partner Indonesia — ke halaman utama" />
</a>Kini, begitu gambar diklik, pengguna langsung dibawa ke tujuan tautannya. Beginilah biasanya logo yang bisa diklik di header situs bekerja. Perhatikan, teks alt-nya menggambarkan ke mana tautan itu mengarah, sebab di sini gambar itu sendiri yang berperan sebagai tautan.
Penutup
Sekarang kamu sudah bisa menghubungkan halaman sekaligus menampilkan visual — dua hal paling dasar yang bakal sering kamu kerjakan di HTML:
- Tautan dibuat dengan elemen
<a>plushrefyang menunjuk ke tujuan — URL absolut untuk situs lain, path relatif untuk halamanmu sendiri,#iduntuk meloncat di dalam halaman, ataumailto:/tel:untuk kontak. - Tulislah teks tautan yang deskriptif, bukan sekadar “klik di sini.”
- Pakai
target="_blank"kalau ingin tautan terbuka di tab baru, dan selalu pasangkan denganrel="noopener noreferrer". - Gambar memakai elemen self-closing
<img>dengansrc(berkasnya) danalt(deskripsi yang krusial untuk aksesibilitas, cadangan, dan SEO). - Path gambar tunduk pada aturan yang sama dengan path tautan; gambar yang rusak nyaris selalu gara-gara path yang keliru.
- Kamu bisa membungkus
<img>dengan<a>agar gambarnya menjadi bisa diklik.
Berbekal teks, tautan, dan gambar, kamu sebenarnya sudah sanggup merangkai halaman web yang benar-benar berguna. Selanjutnya kita melangkah ke sesuatu yang lebih interaktif: form dan input — cara menjaring informasi dari pengunjung lewat kotak teks, kotak centang, dan tombol.
