<link> Nedir?
<link> etiketi, bir HTML belgesi ile harici kaynaklar (en yaygın olarak CSS dosyaları) arasında bağlantı kurmak için kullanılır. Bu etiket yalnızca <head> bölümünde yer alır ve sayfa üzerinde görünmez.
Ne İşe Yarar?
<link> etiketi; stil dosyaları, ikonlar (favicon), yazı tipleri ve bazı önbellek/ön yükleme (preload) tanımları gibi kaynakların sayfaya dahil edilmesini sağlar. Özellikle CSS dosyalarını bağlamak için vazgeçilmezdir ve sayfanın görünümünü doğrudan etkiler.
En Basit Kullanımı
En yaygın kullanım, harici bir CSS dosyasını sayfaya eklemektir.
<head>
<link rel="stylesheet" href="stil.css">
</head>Örnek Kullanımlar
Harici CSS dosyası ekleme
Sayfanın tasarımını belirleyen stil dosyasını bağlar.
<head>
<link rel="stylesheet" href="css/style.css">
</head>Favicon (site ikonu) tanımlama
Tarayıcı sekmesinde görünen küçük site ikonunu belirler.
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>Google Fonts gibi harici kaynak bağlama
Harici yazı tiplerini sayfaya dahil etmek için kullanılır.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto">
</head>Ön yükleme (preload) kullanımı
Önemli bir kaynağın daha hızlı yüklenmesini sağlar.
<head>
<link rel="preload" href="style.css" as="style">
</head>Ne Zaman Kullanılır?
- CSS dosyalarını sayfaya eklerken.
- Favicon veya harici font tanımlarken.
- Performans amaçlı ön yükleme yapılırken.
Küçük İpuçları
- <link> etiketi yalnızca <head> bölümünde kullanılmalıdır.
- Sayfa başına birden fazla <link> etiketi kullanılabilir.
- CSS için rel="stylesheet" değeri zorunludur.
- Yanlış dosya yolu (href) tanımı, stillerin yüklenmemesine neden olur.