HTML link Etiketi: rel Değerleri, Stil Sayfası, Simge ve Alternate

Temel kullanım ve teknik özet

<head>
  <meta charset="utf-8" />
  <title>Ürünler</title>
  <link rel="stylesheet" href="css/ana.css" />
  <link rel="icon" href="favicon.ico" />
</head>

<link>, <meta> gibi boş (void) bir öğedir: içeriği olmaz, kapanış etiketi yazılmaz. İçerik kategorisi metadata içeriğidir. itemprop taşıyorsa akış ve ifade içeriği sayılır. Teknik özete göre href taşıyan bir <link> öğesinin örtük ARIA rolü link'tir, ancak üzerine başka bir role yazılamaz.

Öğe genellikle <head> içinde durur. Bağlantı türü "body-ok" olarak işaretlenmişse <body> içinde de geçerlidir; örneğin stylesheet böyle bir türdür. MDN yine de bunun iyi bir uygulama olmadığını, <link> öğelerini gövde içeriğinden ayırıp head içinde toplamanın daha anlamlı olduğunu söyler. XHTML 1.0'da boş öğelerin sonunda eğik çizgi zorunluydu; HTML'de bu eğik çizgi isteğe bağlıdır.

rel özniteliği nasıl çalışır?

rel değeri, boşlukla ayrılmış, sırasız ve her biri bir kez geçen anahtar sözcüklerden oluşur. class adlarından farkı şudur: class anlam taşımaz, rel sözcükleri ise hem insanlar hem makineler için tanımlı bir anlam ifade etmelidir. Geçerli değerlerin kayıtları IANA bağlantı ilişkileri listesi, HTML Living Standard ve microformats wiki'deki mevcut rel değerleri sayfasıdır; bu üç kaynakta bulunmayan bir değer kullanırsanız bazı doğrulayıcılar uyarı verir. Değerler büyük-küçük harfe duyarlı değildir.

rel'in varsayılan değeri yoktur. <link> üzerinde rel yoksa, boşsa ya da tanınan bir sözcük içermiyorsa öğe hiçbir bağlantı oluşturmaz. Bu, <a> öğesinden önemli bir farktır: <a> ve <area> rel olmadan da bağlantı oluşturur, yalnızca ilişkisi tanımsız kalır.

MDN'in tablosu her değer için iki tür ayırır. Link türündeki değerler başka bir belgeye işaret eden bir bağlantı tanımlar (örneğin alternate, author, license). External Resource türündeki değerler ise tarayıcının bir kaynağı alıp işlemesini sağlar (örneğin stylesheet, icon, preload). Bazı değerler yalnızca <a>, <area> ve <form> içindir: nofollow, noopener, noreferrer, external, bookmark ve tag <link> üzerinde kullanılamaz. Bağlantı öğesindeki rel kullanımı a etiketi yazısında anlatılıyor.

stylesheet: stil dosyası bağlamak

rel="stylesheet" harici bir kaynağı stil sayfası olarak içe aktarır. Dosya text/css ise type yazmanız gerekmez, çünkü bu varsayılandır; MDN web'de kullanılan tek stil dili CSS olduğu için type'ı yazmamayı önerir. Başka kökenden alınan stil sayfaları CORS protokolüne tabidir; bu konu integrity ve crossorigin yazısında ayrıntılı anlatılıyor.

media özniteliği bir medya türü ya da sorgusu alır. MDN'e göre media eşleşmiyorsa harici stil sayfası ne kullanılır ne de indirilir. Bu sayede yazdırma için ayrı bir dosya ya da yalnızca dar ekranlarda gereken bir dosya tanımlayabilirsiniz.

<link href="css/ana.css" rel="stylesheet" />
<link href="css/yazdir.css" rel="stylesheet" media="print" />
<link href="css/dar.css" rel="stylesheet" media="screen and (width <= 600px)" />

Head içindeki bir rel="stylesheet" bağlantısı, tarayıcı onu ayrıştırırken bulduğunda varsayılan olarak çizimi (render) engeller. Betikle sonradan eklenen bir stil bağlantısının çizimi engellemesini istiyorsanız blocking="render" eklemeniz gerekir. blocking yalnızca rel içinde stylesheet veya expect varken kullanılabilir ve şu an tek geçerli belirteci render'dır. Yalnızca head içindeki öğeler çizimi engelleyebilir.

<link blocking="render" rel="stylesheet" href="css/kritik.css" crossorigin />

disabled mantıksal özniteliği yalnızca rel="stylesheet" için geçerlidir. HTML'de baştan yazılırsa stil sayfası sayfa yüklenirken indirilmez; öznitelik kaldırıldığında ya da false yapıldığında istek üzerine yüklenir. Stil dosyası yüklendiğinde load, işlenirken hata olursa error olayı tetiklenir; load dosya ve içe aktardığı tüm içerik yüklenip ayrıştırıldıktan sonra, stiller uygulanmaya başlamadan hemen önce gelir. Bu olayları dinlemek JavaScript işidir; temel bilgiler için JavaScript öğrenme rehberine bakabilirsiniz.

Alternatif stil sayfaları ve title

<link> üzerinde title özniteliği özel bir anlam taşır: varsayılan ya da alternatif bir stil sayfası tanımlar. MDN her stil sayfasını üç gruptan birine yerleştirir:

• Kalıcı (persistent): rel="stylesheet", title yok. Her zaman uygulanır.
• Tercih edilen (preferred): rel="stylesheet" ve title var. Varsayılan olarak uygulanır, alternatif seçilirse devre dışı kalır. Yalnızca bir tane olabilir; farklı başlıklı birden fazla tercih edilen stil yazarsanız bazıları yok sayılır.
• Alternatif (alternate): rel="alternate stylesheet" ve boş olmayan title. Varsayılan olarak kapalıdır, kullanıcı seçebilir.

<link href="css/sifirla.css" rel="stylesheet" />
<link href="css/varsayilan.css" rel="stylesheet" title="Varsayılan" />
<link href="css/yuksek-kontrast.css" rel="alternate stylesheet" title="Yüksek kontrast" />
<link href="css/sade.css" rel="alternate stylesheet" title="Sade" />

Firefox bu stilleri Görünüm menüsündeki Sayfa Stili alt menüsünde title değerleriyle listeler; MDN'e göre diğer tarayıcılar bunun için bir eklenti ister. Sayfanız kendi seçim arayüzünü de sunabilir. MDN, kullanıcının mevcut tercihleriyle çalışan sunumlar için prefers-color-scheme ve prefers-contrast CSS medya özelliklerini önerir. Aynı title değerine sahip stil sayfaları aynı seçeneğin parçası sayılır.

icon: site simgesi

rel="icon", kullanıcı arayüzünde belgeyi temsil eden simgeyi belirtir. Birden fazla <link rel="icon"> yazdığınızda tarayıcı media, type ve sizes özniteliklerine bakarak en uygununu seçer. Birden fazla simge eşit derecede uygunsa sonuncusu kullanılır. En uygun görünen simge sonradan uygunsuz çıkarsa (örneğin desteklenmeyen bir biçimdeyse) tarayıcı bir sonrakine geçer.

sizes özniteliği yalnızca rel içinde icon ya da Apple'ın standart dışı apple-touch-icon türü varken yazılmalıdır. Değeri any (SVG gibi her boyuta ölçeklenebilen vektör biçimleri için) ya da boşlukla ayrılmış genişlikxyükseklik listesidir. Çoğu simge biçimi tek bir boyut tuttuğu için genellikle tek giriş yazılır; ICO ve ICNS biçimleri birden fazla boyut tutabilir.

<link rel="icon" href="favicon.ico" sizes="32x32" />
<link rel="icon" href="simge.svg" type="image/svg+xml" sizes="any" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

• rel="shortcut icon" içindeki shortcut sözcüğü kurala uymaz ve yok sayılır; MDN artık kullanılmaması gerektiğini açıkça söyler.
• iOS, web klibi simgesi için icon ve sizes değil, standart dışı apple-touch-icon türünü kullanır.
• Tarayıcılar sitenin kökünden /favicon.ico dosyasını kendiliğinden ister; yine de açık <link> yazmak sizi bu alışkanlıkların değişmesine karşı korur.
• Siteniz CSP kullanıyorsa simge de politikaya tabidir; simge yüklenmiyorsa img-src direktifini kontrol edin.
• MDN'e göre Chromium tabanlı tarayıcılar rel="icon" üzerinde crossorigin özniteliğini desteklemez.

Hangi boyutlarda simge hazırlamanız gerektiği ve dosyaların nasıl üretileceği favicon boyutları yazısında anlatılıyor.

alternate: çeviriler, akışlar ve başka biçimler

alternate, belgenin başka bir temsilini işaret eder ve anlamı diğer özniteliklere göre değişir. stylesheet ile birlikte alternatif stil sayfası olur. hreflang belge dilinden farklıysa bağlantı bir çeviridir. type değeri application/rss+xml veya application/atom+xml ise bir akışa (feed) bağlantıdır. type başka bir biçimse (örneğin PDF) aynı belgenin farklı formatıdır. hreflang ve type birlikte de yazılabilir.

<link rel="alternate" href="en/hizmetler" hreflang="en" title="English" />
<link rel="alternate" type="application/atom+xml" href="akis.xml" title="Blog" />
<link rel="alternate" href="hizmetler.pdf" type="application/pdf" title="PDF sürümü" />

hreflang bağlantı verilen kaynağın dilini belirtir, yalnızca bilgilendirme amaçlıdır ve geçerli BCP 47 dil etiketleri almalıdır (tr, en, de gibi). Yalnızca href varken yazılır. Tercih edilen URL'yi bildiren rel="canonical" da bir <link> değeridir; yinelenen içerik ve doğru kullanımı canonical etiketi yazısında anlatılıyor.

manifest, me ve diğer bilgi bağlantıları

rel="manifest" web uygulaması manifestine bağlanır; başka kökenden alınıyorsa CORS gerekir. MDN'in crossorigin sayfasına göre kimlik bilgisi isteyen bir manifest, aynı kökenden gelse bile crossorigin="use-credentials" ile alınmalıdır.

<link rel="manifest" href="uygulama.webmanifest" crossorigin="use-credentials" />
<link rel="me" href="https://sosyal.ornek/@ayse" />
<link rel="license" href="lisans" />
<link rel="privacy-policy" href="gizlilik" />
<link rel="terms-of-service" href="kullanim-kosullari" />
<link rel="search" type="application/opensearchdescription+xml" href="opensearch.xml" title="Site içi arama" />

rel="me", XHTML Friends Network (XFN) belirtiminden gelir ve mevcut belgenin, bağlantı verilen içeriğin sahibi olan kişiyi temsil ettiğini söyler. RelMeAuth ve web ile oturum açma belirtimlerinde bir kişinin alan adıyla kendini bir servise tanıtması için kullanılır. MDN, bunu tarayıcıların değil web servislerinin kullandığını, bu yüzden tarayıcı uyumluluğunun önemsiz olduğunu belirtir.

license, sayfanın ana içeriğinin bağlantı verilen belgede anlatılan telif lisansıyla korunduğunu söyler; eş anlamlı gibi görünen copyright yanlıştır. search, belgede veya sitede arama yapmak için tasarlanmış bir kaynağa işaret eder; type değeri application/opensearchdescription+xml ise bu bir OpenSearch eklentisidir. author belge yazarı hakkında bilgi veren sayfaya bağlanır; tarihsel nedenlerle eski rev="made" değeri rel="author" gibi işlenir. next ve prev bir serideki sonraki ve önceki belgeyi gösterir; previous yazımı yanlıştır. <link> içindeki next için tarayıcılar o belgenin sırada alınacağını varsayıp onu bir kaynak ipucu gibi işleyebilir.

Performans değerleri ve diğer öznitelikler

preload, modulepreload, preconnect, dns-prefetch ve prefetch değerleri kaynakların ya da bağlantıların önceden hazırlanmasını sağlar. Bunlarla birlikte kullanılan as, imagesrcset, imagesizes ve fetchpriority öznitelikleri preload, preconnect ve prefetch yazısında ayrıntılı anlatılıyor. MDN'e göre as, rel="preload" varken zorunlu, modulepreload ile isteğe bağlıdır; diğer durumlarda kullanılmamalıdır.

referrerpolicy özniteliği belirtilmezse tarayıcının varsayılanı strict-origin-when-cross-origin politikasıdır: aynı kökene tam adres, güvenliği aynı kalan farklı kökene yalnızca köken gönderilir, HTTP'ye düşüşte hiçbir şey gönderilmez. Değerlerin tam listesi meta etiketleri yazısındaki referrer bölümüyle aynıdır. Eski charset ve rev öznitelikleri kullanımdan kalkmıştır; charset'in etkisi için bağlanan kaynağın Content-Type başlığı, rev yerine karşıt anlamlı rel değeri kullanılır. target ise standart dışıdır.

Uygulama: bir blog sayfasının head bölümü

Aşağıdaki head bölümü, yukarıdaki değerlerin bir arada nasıl göründüğünü gösteriyor: kalıcı stil, yazdırma stili, simgeler, manifest, İngilizce çeviri ve Atom akışı. Her <link> tek bir ilişkiyi anlatıyor; aynı kaynağa iki farklı ilişki gerekiyorsa iki ayrı öğe yazılıyor.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Blog | Örnek Yazılım</title>
    <link rel="stylesheet" href="css/ana.css" />
    <link rel="stylesheet" href="css/yazdir.css" media="print" />
    <link rel="icon" href="favicon.ico" sizes="32x32" />
    <link rel="icon" href="simge.svg" type="image/svg+xml" sizes="any" />
    <link rel="manifest" href="uygulama.webmanifest" />
    <link rel="alternate" href="en/blog" hreflang="en" />
    <link rel="alternate" type="application/atom+xml" href="akis.xml" title="Blog akışı" />
    <link rel="license" href="lisans" />
  </head>
  <body>
    <h1>Blog</h1>
  </body>
</html>

Sık yapılan hatalar

• rel yazmamak: <link> üzerinde rel yoksa hiçbir bağlantı oluşmaz; stil dosyası uygulanmaz.
• </link> yazmak: öğe boştur, kapanış etiketi geçersizdir.
• shortcut icon kullanmak: shortcut yok sayılır; yalnızca icon yazın.
• Birden fazla tercih edilen stil: farklı title ile birden fazla rel="stylesheet" yazınca bazıları yok sayılır.
• sizes'ı stil sayfasında kullanmak: sizes yalnızca simge türleriyle anlamlıdır.
• integrity'yi her rel ile yazmak: yalnızca stylesheet, preload ve modulepreload ile geçerlidir.
• nofollow veya noopener'ı link'e koymak: bu değerler yalnızca <a>, <area> ve <form> içindir.

Sık Sorulan Sorular

link etiketini body içinde kullanabilir miyim?

Bağlantı türü body-ok ise evet; stylesheet bunlardan biridir. Ancak MDN, <link> öğelerini head içinde toplamayı önerir. Head dışındaki bir stil bağlantısı çizimi engellemek için kullanılamaz, çünkü yalnızca head içindekiler çizimi engelleyebilir.

type="text/css" yazmalı mıyım?

Gerekmez. CSS stil sayfaları için type varsayılan olarak text/css kabul edilir ve MDN yazılmamasını önerir. type asıl olarak rel="preload" ile tarayıcının desteklemediği türleri indirmemesi için işe yarar.

link ile a etiketindeki rel arasındaki fark nedir?

<link> sayfada görünmez, belge ile kaynak arasında bir ilişki kurar ve rel olmadan hiçbir şey yapmaz. <a> kullanıcının tıkladığı bir bağlantıdır, rel olmadan da çalışır ve nofollow, noopener gibi açıklama türü değerleri yalnızca o kabul eder.

Aynı rel içinde birden fazla değer yazabilir miyim?

Evet, değerleri boşlukla ayırırsınız ve her biri bir kez geçmelidir. En bilinen örnek rel="alternate stylesheet"'tir. Sözcüklerin sırası önemli değildir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · meta etiketleri · preload ve preconnect · integrity ve crossorigin · a etiketi ve bağlantılar · favicon boyutları · canonical etiketi