tRikSonic
Tema

HTML link Tag

Terakhir diperbarui : 23 Mei 2018 - 13.06

Tutorial HTML <link>:

HTML link Tag - belajar html link. Element link mendefinisikan sebagai hubungan antara dokumen dengan sumber daya ekternal.
background html
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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox Android4
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <link>, biasanya mempunyai nilai default :
link {
  display: none;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.