Home » » Tutorial Belajar HTML - Tag Anchor

Tutorial Belajar HTML - Tag Anchor

Tag anchor adalah salah satu tag yang paling banyak digunakan pada struktur html di sebuah halaman website. Tag anchor berfungsi untuk mempermudah navigasi dari satu lokasi ke lokasi lain ataupun dari satu halaman website ke halaman website lainnya.

Struktur Bagian Tag Anchor

Bentuk penulisan tag anchor seperti berikut:

<a rel="nilai rel" href="url" target="_blank">anchor teks</a>

Tag Anchor memiliki beberapa bagian, berikut adalah penjelasannya:

1. <a ... dan </a>

Adalah tag pembuka dan penutup

2. anchor text

Adalah tulisan yang terlihat pada halaman website

3. atribut href

Adalah attribut wajib diisi, dimana url adalah lokasi kemana anchor akan difungsikan. 

URL bisa berisi seperti

https://google.com 

Bisa juga berisi hashtag seperti

#menu

4. atribut rel (opsional)

Berfungsi untuk memberi tahu robot perayap tentang fungsi tag anchor. Atribut ini bersifat opsional yang artinya boleh ditulis, boleh juga tidak.

Penjelasan lebih lengkap tentang atribut rel akan dibahas lebih detil di bagian lain di artikel ini.

5. atribut target (opsional)

Atribut target digunakan untuk memberitahu browser tentang bagaimana cara browser menampilkan halaman yang tersebut pada atribut href. Tag ini juga bersifat opsional, boleh ditulis, boleh juga tidak.

Contoh Penggunaan Tag Anchor

Sebagaimana disebutkan sebelumnya, tag anchor pada atribut href, bisa diisi dengan url, bisa juga dengan hashtag.

Misalnya, di halaman website, kita sediakan menu untuk pengguna bisa menghubungi kita. Maka bentuk penulisan urlnya akan menjadi seperti ini:

<a href="https://faynim.my.id/p/kontak.html">Kontak</a>

Maka saat pengguna mengklik tulisan Kontak, halaman browser akan berganti ke halaman kontak.

Saya akan mencontohkan penggunaan tag anchor sekaligus penggunaan atribut target="_blank".

Nilai target yang sering dipakai adalah _blank. Nilai ini bertujuan untuk memberitahu browser agar membuka halaman baru pada window baru, saat pengguna mengklik anchor teks.

Sedangkan jika tidak disebutkan atau tidak ditulis, maka halaman baru akan dibuka menggantikan halaman yang sekarang aktif.

Ini adalah contoh atribut rel="_blank"

Kontak

Bentuk penulisannya adalah

<a href="https://faynim.my.id/p/kontak.html" target="_blank">Kontak</a>

Sedangkan di bawah ini adalah contoh tanpa rel="_blank". (Klik tombol Back untuk kembali ke halaman ini)

Kontak

Bentuk penulisannya adalah

<a href="https://faynim.my.id/p/kontak.html">Kontak</a>

Sedangkan penggunaan href dengan hashtag, kamu bisa mencoba klik tulisan di bawah ini.

Ke Atas

Bentuk penulisannya adalah

<a href="#contohtaganchorawal">Kontak</a>

Dimana hashtag #contohtaganchorawal adalah id dari tag H2 pada sub bab di atas dengan bentuk penulisannya seperti ini:

<h2 id="contohtaganchorawal">Struktur Bagian Tag Anchor</h2>

Atribut id bisa dituliskan di semua tag html. Selain berfungsi untuk anchor, tag id juga bisa digunakan pada CSS dan Javascript.

Mengenal Lebih Jauh Atribut Rel

Sebagaimana disebutkan atribut rel berfungsi untuk memberitahu robot perayap dalam merayap halaman website.

Apa itu Robot Perayap

Jika kita sering menggunakan google untuk mencari sesuatu, maka yang harus kamu sadari adalah google akan memberikan cuplikan sesuai dengan relevansi kata yang dicari. Bagaimana Google bisa mengetahui penggalan kalimat yang ditampilkan pada halaman hasil pencarian?

Karena Google memiliki sebuat robot perayap, dimana robot tersebut akan berkeliling di semua halaman web di seluruh dunia, kemudian merayap halaman demi halaman. Dan menyimpannya.

Robot Membaca Nilai Rel

Di saat robot menemukan tag anchor, robot tersebut akan mengaktifkan antrian berikutnya untuk dirayap. Jika mendapati tag anchor memiliki atribut rel, maka robot tersebut akan membaca nilai rel tersebut.

Jika tertulis "nofollow", maka robot perayap akan mengabaikan url tersebut untuk dirayap berikutnya. Sedangkan jika nilai rel adalah "dofollow", maka robot akan melanjutkan rayapan ke url tersebut. Nilai rel "dofollow" sama pengaruhnya jika atribut rel tidak perlu ditulis.

Pentingnya Tag Anchor pada SEO

Jika kamu belajar tentang SEO, tag anchor akan berperan penting dalam membangun kualitas sebuah website. Seberapa pentingnya, bisa kamu pelajari artikel SEO di jurnal firman ataupun di penulis seo pemula.

Baca Juga:

Iklan

0 comments :

Posting Komentar