Tag untuk membuat link ke alamat situs yang benar adalah

Question

pada tutorial ini kita akan belajar cara membuat link html menggunakan tag a untuk menghubungkan satu halaman dengan halaman lain.

Table of Contents Show

Atribut tag a
2. hreflang
6. download
Tag apa yang digunakan untuk membuat link?
Bagaimana cara penulisan link yang benar?
Bagaimana cara membuat link URL?
Apa fungsi dari tag href?

Deskripsi

tag a atau anchor adalah tag yang mendefinisikan sebuah hyperlink untuk menunjukkan link ke halaman lain.

cara penulisan sintaks anchor

<a> link yang tidak bisa di klik </a>
<a><img src="https://thohirdev.com/images/logo-tutorial.png"></>
Code language: HTML, XML (xml)

meskipun kode tersebut menggunakan elemen anchor tapi tidak banyak berguna karena belum menyertakan instruksi tambahan, untuk membuat link kita perlu atribut tambahan ke elemen anchor.

Baca juga : cara membuat komentar pada html

Atribut tag a

1. href

href adalah atribut yang berfungsi untuk menentukan alamat tujuan, url pada atribut href dibagi menjadi 2 url, yaiu sebagai berikut.

Link absolute

contoh url lengkap situs web seperti https://thohirdev.com termasuk link eksternal karena menuju ke halaman web lain.

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

Link relatif

url yang mengarah ke dokumen lain dalam situs web sama.

link ini termasuk link internal karena masih berada pada website yang sama, misalnya /contact menunjuk ke halaman contact.

<a href="/contact"> contact </a>



Code language: HTML, XML (xml)

jika kita ingin ke halaman depan web bisa menggunakan penulisan sintaks berikut.

<a href="/"> Beranda </a>
Code language: HTML, XML (xml)

link tersebut mengarahkan ke dokumen index.html atau index.php jika menggunakan file php.

membuat link untuk menuju ke paling atas halaman web saat posisi berada paling bawah halaman web

<a href="#top">ke atas</a>
Code language: HTML, XML (xml)

membuat link menuju ke posisi tertentu menggunakan atribut id

<a href="#menujukeid">menuju ke atribut id</a>
Code language: HTML, XML (xml)

untuk menuju ke posisi tertentu harus menambahkan atribut id, nilai id harus sama dengan nilai atribut href seperti berikut ini.

<div id="menujukeid">
     Jika klik link paling bawah akan menuju kesini
</div>
Code language: HTML, XML (xml)

atribut href juga bisa untuk memanggil nomor telepon bahkan mengirim email

sintaks link cara memanggil nomor telepon

<a href="tel:089669566600">telpon thohir</a>



Code language: HTML, XML (xml)

jika nilai atribut href berupa tel: saat klik link tersebut maka akan menghubungi nomor tersebut.

sintaks link cara mengirim email

jika nilai atribut href mailto: maka akan membuka alamat email saat klik:

<a href="mailto:[email protected]">Kirim email</a>
Code language: HTML, XML (xml)

kita juga dapat menambahkan alamat untuk penerima cc atau bcc menggunakan sintaks berikut.

<a href="mailto:[email protected][email protected]&[email protected]
">Kirim email</a>
Code language: HTML, XML (xml)

kita juga bisa mengisi subjek dan isi email

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

0

bahkan tag a bisa membuat link untuk memanggil fungsi javascript

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

1

jika kita klik link tadi maka akan muncul tampilan alert seperti ini

Coba script berikut ini yang sudah kita pelajari

Coba Script

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

2

Jika kita coba klik link website maka akan menuju web thohirdev sedangkan ketika klik contact tampilannya blank karena tidak ada halaman contact di web tersebut. coba sendiri link lainnya jika ingin mencobanya 🙂

warna default link berwarna biru, cara merubah warna link pada html dengan menggunakan style CSS

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

3

akan tampil link berwarna merah

cara menghilangkan underline pada link html tersebut dengan css text-decoration:none;

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

4

underline pada link tersebut sudah hilang

2. hreflang

hreflang adalah atribut yang berguna untuk memberitahu mesin pencari dalam menentukan bahasa situs web yang akan tampil. contohnya sebagai berikut.

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

5

contoh tersebut menunjukan bahwa halaman web https://thohirdev.com menggunakan bahasa inggris , jika bahasanya indonesia maka kode bahasa ganti dengan id

3. rel

rel adalah atribut yang berfungsi untuk mendeskripsikan hubungan dari dokumen saat ini dengan dokumen tujuan.

misalnya, kita dapat menggunakan untuk mengidentifikasi alamat tujuan sebagai sumber tentang penulis dokumen.

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

6

Ada beberapa nilai atribut yang berbeda untuk menggambarkan hubungan antara link saat ini dan tujuan link.

rel=”nofollow” : gunakan nilai atribut ini jika kita menautkan ke link tujuan yang tidak ingin memberi reputasi pada situs web tertentu.

misalnya, jika kita ingin menautkan ke situs berisi spam sebagai contoh link web yang mempunyai rate buruk atau link yang bisa menyebabkan spam seperti link yang berada dikolom komentar, kita gunakan nilai ini agar mesin pencari mengabaikan nilai SEO

perbedaan link nofollow dan dofollow , nofollow singkatnya membuat Google tidak mengikuti link atau url yang disematkan sedangkan dofollow justru memberikan sinyal ke Google untuk mengikuti link tersebut. atribut dofollow tidak perlu di tambahkan karena secara default link sudah termasuk dofollow
rel=”alternate” : jika situs kita memiliki lebih dari satu versi, seperti terjemahan kedalam bahasa yang berbeda. Gunakan nilai ini untuk mengidentifikasi link sebagai versi alternatif dari laman sat ini.
rel=”bookmark” : Nilai ini untuk mengidentifikasi url yang permanen dan dapat untuk bookmark halaman.
rel=”help” : Identifikasi link yang menautkan sebagai link bantuan untuk halaman saat ini.
rel=”license”: Gunakan atribut ini saat menautkan ke lisensi hak cipta.
rel=”next”: Jika dokumen saat ini ada dalam rangkaian dokumen, gunakan nilai ini saat menautkan ke dokumen berikutnya dalam rangkaian tersebut.
rel=”prev”: Jika dokumen saat ini ada dalam rangkaian dokumen, gunakan nilai ini saat menautkan ke dokumen sebelumnya dalam rangkaian tersebut.
rel=”noreferrer”: Jika Anda ingin menautkan ke situs web eksternal tetapi menghindari memberi tahu situs web tujuan siapa perujuknya.

4. target

target adalah atribut yang berfungsi untuk menentukan target pada saat membuka link. ada nenerapa ilai atribut target:

_self : membuka link pada halaman itu sendiri (default target dan biasanya tidak perlu menambahkannya)

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

7

_blank : membuka link pada jendela atau tab baru

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

8

_top: menuju bagian paling atas pada halaman

<a href="https://thohirdev.com"> website </a>
Code language: HTML, XML (xml)

9

_parent : membuka link pada frame induk

<a href="/contact"> contact </a>
Code language: HTML, XML (xml)

0

framename : membuka link dalam bingkai bernama tertentu. ( sudah usang pada html5 dan tidak menyarankan untuk digunakan ), target framename memerlukan nama iframe untuk menuju ke frame tersebut.

<a href="/contact"> contact </a>
Code language: HTML, XML (xml)

1

5. title

title adalah atribut yang berfungsi sama seperti tooltips, yaitu memberikan informasi tambahan yang akan tampil saat kursor bergerak menyentuh link.

Coba Script

<a href="/contact"> contact </a>
Code language: HTML, XML (xml)

2

coba script tersebut dengan menekan tombol biru coba script dan coba gerakan kursor ke link tersebut maka akan muncul keterangan dari teks yang ada pada atribut title

6. download

download adalah atribut yang berfungsi untuk memberi tahu browser bahwa link tersebut merupakan sebuah file.

Tag apa yang digunakan untuk membuat link?

Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Bagaimana cara penulisan link yang benar?

Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).