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>
crossorigin
Menentukkan bagaimana element
<link>
tersebut menangani permintaan cross origin.href
Menentukkan 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"/>
hreflang
Menentukkan jenis bahasa pada halaman
Contoh :
<link href='//triksonic.blogspot.com/2017/03/html-canvas-tag.html' hreflang='x-default' rel='alternate'/>
media
Menentukkan 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"/>
rel
Wajib disebutkan, menentukan keterkaitan atau fungsi value yang ada pada element
<link>
terhadap halaman yang sedang dibuka.sizes
Menentukkan ukuran gambar/icon, hanya untuk sematan attribute
rel="icon"
.Contoh :
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
type
Menentukkan 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;
}