Deskripsi
Penjelasan HTML link tag

HTML <link> element menunjukkan sebuah hubungan (link) antara dokumen (HTML) yang bersangkutan dengan sumber file dari luar (eksternal).

<link> ditulis di dalam element <head>..</head> tanpa tag penutup (end tag), juga merupakan element kosong tanpa konten apapun yang hanya berisi attribute saja. <link> element selalu digunakan untuk merujuk file CSS yang berekstensi .css, yang berisi aturan kode CSS, sehingga kode tersebut dapat diaplikasikan untuk mendesain dan memberi sentuhan tampilan yang menarik pada sebuah dokumen web yang merujuk file tersebut.

Element <link> dapat ditulis lebih dari satu kali, tergantung kebutuhan file CSS yang ingin dirujuk dan dipergunakan. Semakin banyak, tentunya semakin memperlambat loading halaman tersebut.

Jika Anda bermaksud ingin belajar HTML link yang merujuk (membuka) website atau dokumen lain ketika diklik, silahkan pelajari HTML <a> tag.

Attributes
Atribut HTML Tag <link>

crossorigin

Menentukkan bagaimana element <link> tersebut menangani permintaan cross origin.

href

Menentukkan lokasi file (CSS) atau dokumen yang di-link (dirujuk). Biasanya, sumber file CSS yang ingin diaplikasikan pada dokumen yang bersangkutan.

hreflang

Menentukkan bahasa yang digunakan pada link yang dirujuk tersebut.

media

Menentukkan target media atau alat yang ingin diberlakukan untuk dokumen yang merujuk file (CSS) tersebut.

rel

Menentukkan hubungan (relationship) antara dokumen yang bersangkutan dengan dokumen yang di-link.

sizes

Menentukkan ukuran (size) dari sumber yang di-link. Hanya digunakan untuk <link> element yang memiliki attribute rel="icon".

type

Menentukkan tipe media (media type) dari sumber yang di-link.


Global Attributes
Atribut Secara Global (Keseluruhan)

<link> tag mencakup global attributes.

Event Attributes
Atribut event (Peristiwa)

<link> tag mencakup event attributes.

Example
Contoh HTML <link> element

Contoh memasukkan style (CSS) dalam dokumen HTML.

Gunakan element <link> seperti berikut:

<link rel="stylesheet" href="http://dul.web.id/assets/css/dul-button.css">
  • rel="styesheet" = Menunjukkan bahwa file yang dirujuk adalah file stylesheet (CSS).
  • href attribute digunakan untuk menentukkan lokasi file (CSS) yang ingin disisipkan. Pada contoh diatas file dul-button.css berada dalam folder assets/css/ yang terletak di website dul.web.id.

Selanjutnya, element <link> seperti contoh diatas, ditulis didalam element <head>..</head> dalam sebuah dokumen HTML. Contoh lengkapnya, adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://dul.web.id/assets/css/dul-button.css">
  </head>
  <body>

  </body>
</html>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <link>
Code Editor