Tutorial HTML <link>:
HTML link Tag - belajar html link. Element
link mendefinisikan sebagai hubungan antara dokumen dengan sumber daya ekternal.
Element
<link> biasanya digunakan untuk memanggil css ekternal, tapi disamping itu elemen <link> bisa juga digunakan sebagai deglarasi suatu informasi tambahan suatu halaman, misal dengan sematan attibute "hreflang", dan lain sebagainya.Element
<link> pada peletakannya wajib di letakkan diantara rentang tag <head>...</head>, hal ini di maksudkan agar element <link> tersebut menjadi acuan/landasan pada saat element <body> di baca oleh browser.Element
<link> dapat ditulis lebih dari satu kali dalam penulisannya, semua tergantung kebutuhan dan keperluan halaman.Contoh HTML <link>:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:30px;"> <div class="alert alert-info"> <strong>Info :</strong> Lorem ipsum... </div> <div class="alert alert-danger"> <strong>Peringatan :</strong> Lorem ipsum... </div> <div class="alert alert-success"> <strong>Terimakasih :</strong> Lorem ipsum... </div> </body> </html>
Attribute HTML <link>
crossoriginMenentukkan bagaimana element
<link> tersebut menangani permintaan cross origin.hrefMenentukkan lokasi data yang tersemat berupa
url atau link.Contoh :
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="image_src" href="/tutorial.png"/>
hreflangMenentukkan jenis bahasa pada halaman
Contoh :
<link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
mediaMenentukkan tipe media pada suatu halaman
Contoh :
<link rel="stylesheet" href="style.css" type="text/css" media="all"/>
<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="tampilan.css" type="text/css" media="screen"/>
relWajib disebutkan, menentukan keterkaitan atau fungsi value yang ada pada element
<link> terhadap halaman yang sedang dibuka.sizesMenentukkan ukuran gambar/icon, hanya untuk sematan attribute
rel="icon".Contoh :
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
typeMenentukkan media tipe pada element
link.Contoh :
<link rel="stylesheet" href="style.css" type="text/css"/> <link rel="icon" href="/favicon.ico" type="image/x-icon"/> <link href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>
Global Attributes:
Element
<link> mencakup Global Attributes HTML.
Event Attributes:
Element
<link> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<link>, biasanya mempunyai nilai default :link {
display: none;
}