Dalam HTML, tag link adalah elemen penutup sendiri, biasanya terletak di bagian head dokumen. Ini digunakan untuk membangun asosiasi dengan sumber daya eksternal, seperti style sheet, ikon, dll. Tag link memiliki banyak atribut, yang mana rel dan href adalah yang paling umum digunakan.
Atribut rel mendefinisikan hubungan antara dokumen saat ini dan sumber daya tertaut. Nilai atribut rel yang umum adalah:
stylesheet : Mewakili tautan ke stylesheet CSS eksternal. icon : mewakili ikon yang ditautkan ke situs web, seperti favicon. Atribut href digunakan untuk menentukan URL sumber daya tertaut.
Contoh tag link yang umum adalah:
<!DOCTYPEhtml> <html> <kepala> <meta charset="UTF-8"> <title>Situs Web Saya</title> <!-- Tautan ke style sheet CSS eksternal --> <link rel="stylesheet" href="styles.css"> <!-- Ikon tautan ke situs web --> <link rel="icon" href="favicon.ico"> </kepala> <tubuh> <h1>Tautan!</h1> <p>Ini adalah pengantar tautan. </p> </tubuh> </html>
Dalam contoh ini, kami menggunakan dua tag link . Tag link pertama mengaitkan dokumen HTML dengan style sheet CSS eksternal styles.css , yang digunakan untuk menentukan gaya halaman. Tag link kedua mengaitkan dokumen HTML dengan situs web favicon.ico , yang akan ditampilkan saat pengguna membuka situs web di browser.
Tentu saja, tag link memiliki atribut dan kegunaan lain. Berikut adalah beberapa atribut umum dan kasus penggunaan:
type : Atribut ini digunakan untuk menentukan tipe MIME dari sumber daya tertaut. Misalnya, saat menautkan ke stylesheet CSS, Anda dapat menentukan tipenya sebagai text/css . Dalam kebanyakan kasus, browser dapat secara otomatis mengidentifikasi jenis sumber daya, sehingga atribut type tidak diperlukan. Contoh:
<link rel="stylesheet" href="styles.css" type="text/css">
media : Atribut ini memungkinkan Anda menentukan jenis media mana yang akan diterapkan pada style sheet. Misalnya, Anda bisa membuat style sheet khusus pencetakan yang digunakan saat pengguna mencetak halaman. Contoh:
<link rel="stylesheet" href="print.css" media="print">
sizes : Saat menggunakan tag link untuk menautkan ke ikon dengan berbagai ukuran, Anda dapat menggunakan atribut sizes untuk menentukan ukuran ikon. Ini berguna untuk situasi di mana ikon ditampilkan dalam ukuran berbeda tergantung pada perangkat. Contoh:
<link rel="icon" href="icon-48x48.png" size="48x48"> <link rel="icon" href="icon-96x96.png" size="96x96">
crossorigin : Saat menautkan ke sumber daya lintas asal, Anda dapat menggunakan atribut crossorigin untuk menentukan pengaturan CORS (Cross-Origin Resource Sharing) untuk sumber daya tersebut. Contoh:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : Atribut ini digunakan untuk memastikan integritas sumber daya eksternal dan dapat digunakan bersama dengan atribut crossorigin . Dengan memberikan hash berbasis konten pada sumber daya (seperti SHA-256), Anda dapat memastikan bahwa sumber daya tersebut tidak dirusak. Contoh:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integritas="sha256-base64-encoded-hash">
preload : rel="preload" dapat digunakan untuk memuat sumber daya penting terlebih dahulu, seperti font, gambar, atau skrip. Ini mengoptimalkan kinerja pemuatan halaman. Contoh:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Ini adalah beberapa atribut umum dan penggunaan tag link .
Selain yang disebutkan sebelumnya, rel memiliki lebih banyak nilai atribut:
alternate : Gunakan rel="alternate" untuk menyediakan versi alternatif dokumen, seperti halaman dalam bahasa berbeda atau untuk perangkat berbeda. Contoh:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="hanya layar dan (lebar maksimal: 640 piksel)" href="https://link.com/mobile/a">
dns-prefetch : Nama domain dapat diselesaikan terlebih dahulu melalui rel="dns-prefetch" untuk mengurangi waktu pencarian DNS dan mempercepat pemuatan sumber daya. Contoh:
<link rel="dns-prefetch" href="//link.com">
preconnect : Mirip dengan dns-prefetch , rel="preconnect" dapat membuat koneksi TCP terlebih dahulu ke sumber daya pihak ketiga, sehingga mengurangi waktu yang diperlukan untuk membuat koneksi. Contoh:
<link rel="preconnect" href="https://link.com">
prefetch : Gunakan rel="prefetch" untuk mengambil terlebih dahulu dan menyimpan sumber daya dalam cache untuk digunakan di halaman berikutnya. Ini berguna untuk memuat sumber daya yang mungkin digunakan di halaman sebelumnya. Contoh:
<link rel="prefetch" href="pre-page.html">
canonical : Menggunakan rel="canonical" dapat memberi mesin pencari URL kanonik suatu halaman, membantu menghindari masalah duplikat konten. Contoh:
<link rel="canonical" href="https://link.com/a/post">
license : Gunakan rel="license" untuk menentukan URL lisensi dokumen. Contoh:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : Gunakan rel="manifest" untuk menautkan file manifes aplikasi web (biasanya dalam format JSON) ke dokumen HTML. File manifes berisi metadata aplikasi web, seperti nama, deskripsi, ikon, dll. Contoh:
<link rel="manifest" href="manifest.json">
Harap dicatat bahwa browser yang berbeda mungkin memiliki tingkat dukungan yang berbeda-beda untuk properti dan fungsi ini. Disarankan untuk membaca dokumentasi yang relevan saat menggunakan fitur baru untuk memastikan kompatibilitas dan fungsionalitas.
Ini menyimpulkan artikel ini tentang penggunaan spesifik atribut tag tautan dalam HTML. Untuk informasi lebih lanjut tentang atribut tag tautan HTML, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah masa depan. downcodes.com!