path: root/files/tr/html/element/link/index.html

---
title: '<link>: Dış Kaynak Bağlantısı öğesi'
slug: HTML/Element/link
tags:
  - Bağlantı
  - Eleman
  - HTML
  - HTML belgesi meta verileri
  - Referans
  - Web
  - Web Performansı
  - meta veri
translation_of: Web/HTML/Element/link
---
<div>{{HTMLRef}}</div>

<p><strong>HTML Dış Kaynak Bağlantısı öğesi (<code>&lt;link&gt;</code>)</strong> geçerli belge ile harici kaynak arasındaki ilişkileri belirtir. Bu eleman en çok {{Glossary ("CSS", "stylesheets")}} bağlantısına kullanılır, ancak site simgeleri (hem "favicon" stil ikonları hem de ana ekran için simgeler ve mobil cihazlardaki uygulamalar) oluşturmak için de kullanılır.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div>

<div class="hidden">Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/interactive-examples"> https://github.com/mdn/interactive-examples</a> ve bize bir çekme isteği gönderin.</div>

<p>Harici bir stil sayfasını bağlamak için, {{HTMLElement ("head")}} içine şu şekilde bir <code>&lt;link&gt;</code> öğesi ekleyin:</p>

<pre class="brush: html no-line-numbers">&lt;link href="main.css" rel="stylesheet"&gt;</pre>

<p>Bu basit örnek, <code>href</code> özniteliği ve <code>stylesheet</code> değerine sahip bir <code>rel</code> özniteliğindeki stil sayfasının yolunu sağlar. <code>rel</code> "ilişki" anlamına gelir ve büyük olasılıkla <code>&lt;link&gt;</code> öğesinin temel özelliklerinden biridir - değer, bağlandığı öğenin bağlantıyla nasıl belge içeren ilişkilendirildiğini gösterir. <a href="/en-US/docs/Web/HTML/Link_types">Bağlantı türleri</a> referansımızdan göreceğiniz gibi, birçok farklı ilişki türü vardır.</p>

<p>Karşılaştığınız başka yaygın türler de var. Örneğin, sitenin favicon'una bir bağlantı:</p>

<pre class="brush: html no-line-numbers">&lt;link rel="icon" href="favicon.ico"&gt;</pre>

<p>Çeşitli mobil platformlarda kullanım için özel simge türlerini belirtmek için kullanılan, örneğin <code> rel </code> değerleri olan başka bir simge vardır;</p>

<pre class="brush: html no-line-numbers">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png"&gt;</pre>

<p><code>sizes</code> niteliği simge boyutunu belirtirken, <code> type </code> bağlanan kaynağın MIME türünü içerir. Bunlar, tarayıcının mevcut en uygun ikonu seçmesine izin vermek için faydalı ipuçları sunar.</p>

<p>Ayrıca bir <code> media </code> özniteliği içinde bir ortam türü veya sorgu da sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:</p>

<pre class="brush: html no-line-numbers">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>

<p>Bazı ilginç yeni performans ve güvenlik özellikleri de <code>&lt;link&amp;gt</code> öğesine eklendi. Bu örneği ele alalım:</p>

<pre class="brush: html no-line-numbers">&lt;link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous"&gt;</pre>

<p><code>rel</code> ve <code>preload</code> değeri, tarayıcının bu kaynağı önceden yüklemesi gerektiğini belirtir (bkz. <a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" içeriği önceden yükleme</a>) ile daha fazla ayrıntı için), <code>as</code> niteliği, getirilen belirli bir içerik sınıfını gösterir. <code>crossorigin</code> niteliği, kaynağın bir {{Glossary("CORS")}} isteği ile alınıp alınmayacağını belirtir.</p>

<p>Diğer kullanım notları:</p>

<ul>
 <li>Bir <code>&lt;link&gt;</code> öğesi, <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">bağlantı türü </a> olup olmadığına bağlı olarak, {{HTMLElement("head")}} veya {{HTMLElement("body")}} <strong>body-ok</strong> olan öğesinde oluşabilir. Örneğin, <code>stylesheet</code> bağlantı türü body-ok'dur ve bu nedenle gövdede <code>&lt;link rel="stylesheet"&gt;</code> izin verilir. Ancak, bu izlenecek iyi bir uygulama değildir; <code>&lt;link&gt;</code> öğelerinizi gövde içeriğinizden ayırmak, bunları <code>&lt;head&gt;</code> içine yerleştirmek daha mantıklı olur.</li>
 <li>Bir siteye favicon oluşturmak için <code>&lt;link&gt;</code> kullanırken siteniz güvenliğini artırmak için bir İçerik Güvenliği Politikası (CSP) kullanıyorsa, politika favicon'a uygulanır. Yüklenmeyen favicon ile ilgili sorunlarla karşılaşırsanız, {{HTTPHeader("Content-Security-Policy")}} başlığının <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> yönergesi</a> buna erişimi engellemiyor.</li>
 <li>HTML ve XHTML özellikleri, <code>&lt;link&gt;</code> öğesi için olay işleyicilerini tanımlar, ancak bunların nasıl kullanılacağı açık değildir.</li>
 <li>XHTML 1.0 altında, <code>&lt;link&gt;</code> gibi boş öğeler sonda eğik çizgi gerektirir: <code>&lt;link /&gt;</code>.</li>
 <li>WebTV, <code>rel</code> için <code>next</code> değerinin bir sonraki sayfada bir belge dizisinde önyüklenmesini destekler.</li>
</ul>

<h2 id="Öznitelikler">Öznitelikler</h2>

<p>Bu öğe <a href="/en-US/docs/Web/HTML/Global_attributes">genel özellikleri</a> içerir.</p>

<dl>
 <dt>{{HTMLAttrDef("as")}}</dt>
 <dd>Bu özellik yalnızca <code>&lt;link&gt;</code> öğesinde <code> rel="preload"</code> veya <code>rel="prefetch"</code> ayarlanmışsa kullanılır. <code>&lt;link&gt;</code> tarafından yüklenen içeriğin türünü belirtir, istek eşleştirme, doğru <a href="/en-US/docs/Web/HTTP/CSP">içerik güvenlik politikasının uygulanması</a> ve doğru {{HTTPHeader("Kabul et")}} ayarlarının yapılması için gerekli olan istek başlığı. Ayrıca, <code>rel="preload"</code> bunu istek önceliklendirme için bir sinyal olarak kullanır. Aşağıdaki tabloda, bu özellik için geçerli değerler ve bunların uygulandıkları öğeler veya kaynaklar listelenmiştir.</dd>
 <dd>
 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">Değeri</th>
    <th scope="col">Şunlara Uygulanır</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>audio</td>
    <td><code>&lt;audio&gt;</code> elementler</td>
   </tr>
   <tr>
    <td>document</td>
    <td><code>&lt;iframe&gt;</code> ve <code>&lt;frame&gt;</code> elements</td>
   </tr>
   <tr>
    <td>embed</td>
    <td><code>&lt;embed&gt;</code> elementler</td>
   </tr>
   <tr>
    <td>fetch</td>
    <td>
     <p>fetch, XHR</p>

     <div class="blockIndicator note">
     <p>Bu değer, crossorigin niteliğini içermek için <code>&lt;link&gt;</code> değerini de gerektirir.</p>
     </div>
    </td>
   </tr>
   <tr>
    <td>font</td>
    <td>CSS @font-face</td>
   </tr>
   <tr>
    <td>image</td>
    <td><code>&lt;img&gt;</code> ve <code>&lt;picture&gt;</code> srcset veya görüntü kümesi özniteliklerine sahip öğeler, SVG <code>&lt;image&gt;</code> öğelerini, CSS <code>*-image</code> kurallar</td>
   </tr>
   <tr>
    <td>object</td>
    <td><code>&lt;object&gt;</code> elemanlar</td>
   </tr>
   <tr>
    <td>script</td>
    <td><code>&lt;script&gt;</code> elemanlar, Çalışan <code>importScripts</code></td>
   </tr>
   <tr>
    <td>style</td>
    <td><code>&lt;link rel=stylesheet&gt;</code> elemanlar, CSS <code>@import</code></td>
   </tr>
   <tr>
    <td>track</td>
    <td><code>&lt;track&gt;</code> elemanlar</td>
   </tr>
   <tr>
    <td>video</td>
    <td><code>&lt;video&gt;</code> elemanlar</td>
   </tr>
   <tr>
    <td>worker</td>
    <td>Worker, SharedWorker</td>
   </tr>
  </tbody>
 </table>
 </dd>
 <dt>{{HTMLAttrDef("crossorigin")}}</dt>
 <dd>Bu numaralandırılmış öznitelik, kaynak alınırken {{Glossary("CORS")}} kullanılması gerektiğini gösterir. <a href="/en-US/docs/Web/HTML/CORS_Enabled_Image">CORS etkin görüntüler</a>, <em>lekelenmeden</em> {{HTMLElement("canvas")}} öğesinde yeniden kullanılabilir. İzin verilen değerler:
 <dl>
  <dt><code>anonymous</code></dt>
  <dd>Çapraz kökenli bir istek (yani, {{HTTPHeader("Origin")}} HTTP başlığına sahip) yapılır, ancak hiçbir kimlik bilgisi gönderilmez (yani, çerez, X.509 sertifikası veya HTTP Temel kimlik doğrulaması) gönderilmez. Sunucu kaynak siteye kimlik bilgileri vermezse ({{HTTPHeader("Access-Control-Allow-Origin")}} HTTP başlığını ayarlayarak) kaynak etiketlenecek ve kullanımı kısıtlanacaktır.</dd>
  <dt><code>use-credentials</code></dt>
  <dd>Gönderilen bir kimlik bilgileriyle birlikte (örneğin, bir çerez, sertifika ve/veya HTTP Temel kimlik doğrulaması gerçekleştirilir) bir çapraz orijinallik isteği (ör. <code>taimted</code> HTTP başlığına sahip) Sunucu kaynak siteye kimlik bilgileri vermezse ({{HTTPHeader("Access-Control-Allow-Credentials")}} HTTP başlığı), kaynak <em>etiketlenir</em> ve kullanımı kısıtlanır.</dd>
 </dl>
 Öznitelik yoksa, kaynak {{Glossary("CORS")}} isteği olmadan (yani, <code>Origin</code> HTTP üstbilgisini göndermeden) tatsız kullanımını engeller. Geçersiz ise, numaralandırılmış <strong>anonim</strong> anahtar kelimesi kullanılmış gibi kullanılır. Ek bilgi için <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS ayarları niteliklerine</a> bakın.</dd>
 <dt>{{HTMLAttrDef("disabled")}}</dt>
 <dd>
 <p>Yalnızca <code>rel="stylesheet"</code> için <code>disabled</code> Boolean özelliği, açıklanan stil sayfasının belgeye yüklenip yüklenmemesi gerektiğini belirtir. HTML yüklendiğinde <code>disabled</code> belirtilirse, sayfa yüklenirken stil sayfası yüklenmez. Bunun yerine, <code> disabled </code> özelliği <code>false</code> olarak değiştirildiyse veya kaldırılırsa, stil sayfası isteğe bağlı olarak yüklenir.</p>

 <p>Ancak, stil sayfası yüklendikten sonra, <code>disabled</code> özelliğinin değerinde yapılan değişikliklerin artık {{domxref("StyleSheet.disabled")}} özelliğinin değeriyle hiçbir ilişkisi yoktur. Bunun yerine bu özelliğin değerini değiştirmek, belgeye uygulanan stil sayfası formunu etkinleştirir ve devre dışı bırakır.</p>

 <p>Bu, <code>StyleSheet</code>'in <code>disabled</code> özelliğinden farklıdır; <code>true</code> olarak değiştirmek, stil sayfasını belgenin {{domxref("document.styleSheets")}} listesinden kaldırır ve <code>false</code> konumuna geri döndüğünde stil sayfasını otomatik olarak yeniden yüklemez.</p>
 </dd>
 <dt>{{HTMLAttrDef("href")}}</dt>
 <dd>Bu özellik, bağlı kaynağın {{Glossary("URL")}} belirtir. Bir URL mutlak veya göreceli olabilir.</dd>
 <dt>{{HTMLAttrDef("hreflang")}}</dt>
 <dd>Bu özellik, bağlı kaynağın dilini gösterir. Tamamen tavsiye niteliğindedir. İzin verilen değerler <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> tarafından belirlenir. Bu özelliği yalnızca {{HTMLAttrxRef("href", "a")}} özelliği varsa kullanın.</dd>
 <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt>
 <dd>Kaynağın göreceli önemini gösterir. Öncelikli ipuçları, değerler kullanılarak verilir:</dd>
 <dd>
 <p><strong><code>auto</code></strong>: Indicates <strong>no preference</strong>. Tarayıcı, kaynağın önceliğine karar vermek için kendi sezgisel bilgilerini kullanabilir.</p>

 <p><strong><code>high</code></strong>: Tarayıcıya kaynağın <strong> yüksek </strong> öncelikli olduğunu gösterir.</p>

 <p><strong><code>low</code></strong>: Tarayıcıya, kaynağın <strong> düşük </strong> öncelikli olduğunu gösterir.</p>

 <div class="blockIndicator note">
 <p><strong>Not:</strong> <code>importance</code> özelliği, yalnızca <code>rel="preload"</code> veya <code>&lt;link&gt;</code> öğesi için kullanılabilir <code>rel="prefetch"</code> var.</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt>
 <dd>Tarayıcıya getirmesini söylediğiniz kaynağın (dosya) temel 64 kodlu şifreleme karması satır içi meta verilerini içerir. Tarayıcı, alınan kaynağın beklenmedik bir şekilde işleme alınmadığını doğrulamak için bunu kullanabilir. <a href="/en-US/docs/Web/Security/Subresource_Integrity">Alt Kaynak Bütünlüğü</a>'ne bakın.</dd>
 <dt>{{HTMLAttrDef("media")}}</dt>
 <dd>Bu özellik, bağlı kaynağın uygulanacağı medyayı belirtir. Değeri bir medya türü <a href="/en-US/docs/Web/CSS/Media_queries">medya sorgusu</a> olmalı. Bu özellik temel olarak harici stil sayfalarına bağlanırken kullanışlıdır - kullanıcı aracısının üzerinde çalıştığı cihaz için en iyi uyarlanmış olanı seçmesini sağlar.
 <div class="blockIndicator note">
 <p><strong>Notlar:</strong></p>

 <ul>
  <li>HTML 4'te bu, yalnızca boşluklarla ayrılmış basit bir medya açıklaması hazır bilgileri listesi olabilir; yani, <a href="/en-US/docs/Web/CSS/@media"> medya türleri ve grupları</a>, <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code> gibi bu özellik için değer olarak tanımlandığı ve izin verildiği yerlerde. HTML5 bunu, HTML 4'ün izin verilen değerlerinin yerini alan herhangi bir <a href="/en-US/docs/Web/CSS/Media Queries">medya sorgusu</a> türüne genişletmiştir.</li>
  <li><a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Medya Sorguları</a>'nı desteklemeyen tarayıcılar mutlaka yeterli bağlantıyı tanımayacaktır; HTML 4'te tanımlanan kısıtlı ortam sorgusu kümesi olan geri dönüş bağlantılarını ayarlamayı unutmayın.</li>
 </ul>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt>
 <dd>Kaynağı alırken hangi yönlendiricinin kullanılacağını belirten bir dize:
 <ul>
  <li><code>no-referrer</code> {{HTTPHeader("Referer")}} başlığının gönderilmeyeceği anlamına gelir.</li>
  <li><code>no-referrer-when-downgrade</code> TLS (HTTPS) olmadan bir başlangıç noktasına giderken {{HTTPHeader("Referer")}} başlığının gönderilmeyeceği anlamına gelir. Başka türlü bir politika belirtilmemişse, bu bir kullanıcı aracısının varsayılan davranışıdır.</li>
  <li><code>origin</code> Yönlendiricinin, kabaca şema, ana bilgisayar ve bağlantı noktası olan sayfanın orijini olacağı anlamına gelir.</li>
  <li><code>origin-when-cross-origin</code> diğer kaynaklara navigasyonun şema, ev sahibi ve liman ile sınırlı olacağı, aynı kaynaktaki navigasyonun yönlendirenin yolunu içereceği anlamına gelir.</li>
  <li><code>unsafe-url</code> yönlendirenin orijini ve yolu içereceği anlamına gelir (ancak bölüm, parola veya kullanıcı adı değil). Bu durum güvensizdir, çünkü TLS korumalı kaynaklardan güvensiz kökenlere kökeni ve yolu sızdırabilir.</li>
 </ul>
 </dd>
 <dt>{{HTMLAttrDef("rel")}}</dt>
 <dd>Bu özellik, bağlı belgenin geçerli belgeyle ilişkisini adlandırır. Özelliğin, <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değerlerinin</a> boşlukla ayrılmış bir listesi olması gerekir.</dd>
 <dt>{{HTMLAttrDef("sizes")}}</dt>
 <dd>Bu özellik, kaynakta bulunan görsel medya için simgelerin boyutlarını tanımlar. Yalnızca {{HTMLAttrxRef("rel", "link")}} bir <code>icon</code> değeri veya Apple'ın <code>apple-touch-icon</code> gibi standart olmayan bir tür içeriyorsa mevcut olmalıdır. Aşağıdaki değerlere sahip olabilir:
 <ul>
  <li><code>any</code>, yani, simge, <code>image/svg+xml</code> gibi bir vektör formatında olduğu gibi herhangi bir boyuta ölçeklenebilir.</li>
  <li>her biri <code> <em>&lt;piksel cinsinden genişlik&gt;</em>x<em>&lt;piksel cinsinden yükseklik&gt;</em></code> veya <code>&lt;biçiminde bir beyaz boşlukla ayrılmış boyut listesi <em>&lt;piksel cinsinden="" genişlik=""&gt;&lt;/piksel&gt;</em>X<em>&lt;piksel cinsinden yükseklik&gt;</em></code>. Bu boyutların her biri kaynakta bulunmalıdır.</li>
 </ul>

 <div class="blockIndicator note">
 <p><strong>Not:</strong> Çoğu simge formatı yalnızca bir simge saklayabilir; bu nedenle çoğu zaman {{HTMLAttrxRef("sizes")}} özelliği yalnızca bir giriş içerir. MS’in ICO formatı Apple’ın ICNS’sinin yaptığı gibi. ICO daha her yerde bulunur, bu nedenle eğer tarayıcılar arası destek kaygılıysa (özellikle eski IE sürümleri için) bu biçimi kullanmalısınız.</p>
 </div>
 </dd>
 <dt>{{HTMLAttrDef("title")}}</dt>
 <dd><code>title</code> niteliğinin <code>&lt;link&gt;</code> öğesinde özel bir semantiği vardır. Bir <code>&lt;link rel="stylesheet"&gt;</code> üzerinde kullanıldığında, bir <a href="/en-US/docs/Web/CSS/Alternative_style_sheets"> tercih edilen veya alternatif bir stil sayfasını</a> tanımlar. Yanlış kullanılması, <a href="/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets">stil sayfasının yok sayılmasına neden olabilir</a>.</dd>
 <dt>{{HTMLAttrDef("type")}}</dt>
 <dd>Bu özellik, bağlantılı içeriğin türünü tanımlamak için kullanılır. Özelliğin değeri, <strong>metin/html</strong>, <strong>metin/css</strong> vb. gibi bir MIME türü olmalıdır. Bu özelliğin yaygın kullanımı, başvurulan stil sayfasının türünü tanımlamaktır (örneğin, <strong>metin/css</strong> gibi), ancak CSS’nin web’de kullanılan tek stil sayfası dili olduğu göz önüne alındığında, yalnızca <code>type</code> niteliğini atlayın, ancak aslında şu anda pratik önerilir. Tarayıcının yalnızca desteklediği dosya türlerini indirdiğinden emin olmak için <code>rel="preload"</code> bağlantı türlerinde de kullanılır.</dd>
</dl>

<h3 id="Standart_olmayan_özellikler">Standart olmayan özellikler</h3>

<dl>
 <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt>
 <dd>Bu özelliğin değeri, bir nesnede gerçekleştirilebilecek işlevler hakkında bilgi sağlar. Değerler genellikle kullanıldığında HTTP protokolü tarafından verilir, ancak (<strong>başlık</strong> özniteliği ile benzer nedenlerle) bağlantıya önceden danışma bilgilerini eklemek yararlı olabilir. Örneğin, tarayıcı belirtilen yöntemlerin bir işlevi olarak bir bağlantının farklı bir oluşturulmasını seçebilir; aranabilir bir şey farklı bir simge alabilir veya bir dış link mevcut siteden ayrıldığının bir göstergesi olabilir. Bu özellik iyi tanımlanmamıştır ve tanımlayıcı tarayıcı Internet Explorer 4 tarafından bile desteklenmemektedir.</dd>
 <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt>
 <dd>Bu özellik, bir sonraki gezinme işleminde gerekli olabilecek bir kaynağı ve kullanıcı aracısının onu alması gerektiğini tanımlar. Bu, ileride kaynak istendiğinde kullanıcı aracısının daha hızlı yanıt vermesini sağlar.</dd>
 <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt>
 <dd>Tanımlanmış bağlantı ilişkisine sahip olan veya herhangi bir bağlantılı kaynağın oluşturulmasını gösterecek olan çerçeve veya pencere adını tanımlar.</dd>
</dl>

<h3 id="Eski_özellikler">Eski özellikler</h3>

<dl>
 <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt>
 <dd>Bu özellik, bağlı kaynağın karakter kodlamasını tanımlar. Değer, {{rfc(2045)}}'de tanımlandığı gibi karakter kümelerinin boşluk ve/veya virgülle ayrılmış bir listesidir. Varsayılan değer şudur: <code>iso-8859-1</code>.
 <div class="note"><strong>Kullanım notu:</strong> Bu eski özellik ile aynı efekti üretmek için, bağlı kaynak üzerinde {{HTTPHeader("Content-Type")}} HTTP başlığını kullanın.</div>
 </dd>
 <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt>
 <dd>Bu özelliğin değeri, geçerli belgenin, {{HTMLAttrxRef("href", "link")}} özelliği ile tanımlandığı şekilde bağlantılı belgeyle ilişkisini gösterir. Böylece özellik, <code>rel</code> niteliğinin değeriyle karşılaştırıldığında ters ilişkiyi tanımlar. Özniteliğin <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değerleri</a>, {{HTMLAttrxRef("rel", "link")}} için olası değerlere benzer.</dd>
 <dd>
 <div class="blockIndicator note">
 <p><strong>Not:</strong> Bu özellik, WHATWG HTML yaşam standardı tarafından (MDN'nin kanonik davrandığı şartnamesi olan) geçersiz. Ancak, W3C şartnamesinde <code>rev</code>'in <em>değil</em> olduğuna dikkat edin. Bununla birlikte, belirsizlik göz önüne alındığında, <code>rev</code>'e güvenmek akıllıca değildir.</p>

 <p>Bunun yerine, {{HTMLAttrxRef("rel", "link")}} özelliğini, karşıt <a href="/en-US/docs/Web/HTML/Link_types">bağlantı türü değeriyle</a> kullanmalısınız. Örneğin, <code>made</code> için ters bağlantı oluşturmak için <code>author</code>'u belirtin. Ayrıca, bu özellik "revizyon" anlamına gelmez ve birçok site bu şekilde kötüye kullanmasına rağmen, sürüm numarasıyla kullanılmamalıdır.</p>
 </div>
 </dd>
</dl>

<h2 id="CSS_ile_stil_oluşturma">CSS ile stil oluşturma</h2>

<p><code>&lt;link&gt;</code> elemanın bir web belgesinde görsel bir varlığı yoktur, bu nedenle endişelenilmesi gereken herhangi bir tasarım düşüncesi yoktur.</p>

<h2 id="Örnekler">Örnekler</h2>

<h3 id="Stil_sayfası_dahil_etme">Stil sayfası dahil etme</h3>

<p>Sayfaya stil sayfası eklemek için aşağıdaki söz dizimini kullanın:</p>

<pre class="brush: html no-line-numbers">&lt;link href="style.css" rel="stylesheet"&gt;
</pre>

<h3 id="Alternatif_stil_sayfaları_sağlama">Alternatif stil sayfaları sağlama</h3>

<p>Ayrıca <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">alternatif stil sayfalarında</a> belirtebilirsiniz.</p>

<p>Kullanıcı, Görünüm ve Sayfa Stili menüsünden seçerek hangi stil sayfasını kullanacağını seçebilir. Bu, kullanıcıların bir sayfanın birden çok sürümünü görmelerine olanak sağlar.</p>

<pre class="brush: html no-line-numbers">&lt;link href="default.css" rel="stylesheet" title="Varsayılan Stil"&gt;
&lt;link href="fancy.css" rel="alternate stylesheet" title="Fantezi"&gt;
&lt;link href="basic.css" rel="alternate stylesheet" title="Temel"&gt;
</pre>

<h3 id="Farklı_kullanım_içerikleri_için_simgeler_sağlama">Farklı kullanım içerikleri için simgeler sağlama</h3>

<p>Aynı sayfada birkaç farklı simgeye bağlantılar ekleyebilirsiniz ve tarayıcı ipucu olarak <code>rel</code> ve <code>sizes</code> değerlerini kullanarak kendi bağlamında hangisinin en iyi sonucu vereceğini seçer.</p>

<pre class="brush: html no-line-numbers">&lt;!-- yüksek çözünürlüklü Retina ekranlı üçüncü nesil iPad: --&gt;
&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"&gt;
&lt;!-- yüksek çözünürlüklü Retina ekranlı iPhone: --&gt;
&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"&gt;
&lt;!-- birinci ve ikinci nesil iPad: --&gt;
&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"&gt;
&lt;!-- Retina olmayan iPhone, iPod Touch ve Android 2.1+ cihazlar: --&gt;
&lt;link rel="apple-touch-icon-precomposed" href="favicon57.png"&gt;
&lt;!-- basic favicon --&gt;
&lt;link rel="icon" href="favicon32.png"&gt;</pre>

<h3 id="Kaynakları_ortam_sorgularıyla_koşullu_olarak_yükleme">Kaynakları ortam sorgularıyla koşullu olarak yükleme</h3>

<p>Bir <code>media</code> niteliği içinde bir ortam türü veya sorgu sağlayabilirsiniz; bu kaynak daha sonra yalnızca ortam koşulu doğru olduğunda yüklenir. Örneğin:</p>

<pre class="brush: html no-line-numbers">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
&lt;link href="mobile.css" rel="stylesheet" media="all"&gt;
&lt;link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"&gt;
&lt;link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"&gt;
</pre>

<h3 id="Stil_sayfası_yükleme_etkinlikleri">Stil sayfası yükleme etkinlikleri</h3>

<p>Bir stil sayfasının ne zaman yüklendiğini, üzerine ateşlemek için bir <code> load </code> olayını izleyerek belirleyebilirsiniz; Benzer şekilde, bir stil sayfası işlenirken bir <code>error</code> olayını izleyerek bir hata olup olmadığını tespit edebilirsiniz:</p>

<pre class="brush: html">&lt;script&gt;
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // İlginç bir şey yapın; sayfa yüklendi
}

myStylesheet.onerror = function() {
  console.log("Stil sayfası yüklenirken bir hata oluştu!");
}
&lt;/script&gt;

&lt;link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"&gt;
</pre>

<div class="blockIndicator note">
<p><strong>Not:</strong> <code>load</code> olayı, stil sayfası ve içe aktarılan içeriğinin tümü yüklenip ayrıştırıldığında ve stillerin içeriğe uygulanmaya başlamasından hemen önce başlatılır.</p>
</div>

<h3 id="Önceden_yükleme_örnekleri">Önceden yükleme örnekleri</h3>

<p><a href="/en-US/docs/Web/HTML/Preloading_content">İçeriği <code>rel="preload"</code></a> ile önyükleme, bir dizi <code> &amp;ltlink rel="preload"&gt;</code> örneği bulabilirsiniz.</p>

<h2 id="Teknik_özet">Teknik özet</h2>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/en-US/docs/Web/HTML/Content_categories">İçerik kategorileri</a></th>
   <td>Meta veri içeriği. <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> varsa: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">akış içeriği</a> ve <a href="/en-US/docs/Web/HTML/Content_category#Phrasing_content">phrasing içeriği</a>.</td>
  </tr>
  <tr>
   <th>İzin verilen içerik</th>
   <td>Yok, bir {{Glossary("boş eleman")}}.</td>
  </tr>
  <tr>
   <th>Etiket ihmali</th>
   <td>Boş bir öğe olduğundan, başlangıç etiketi bulunmalı ve bitiş etiketi bulunmamalıdır</td>
  </tr>
  <tr>
   <th>İzin verilen ebeveynler</th>
   <td>Meta veri öğelerini kabul eden herhangi bir öğe. <a href="/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> varsa: <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">içerik ifadesi</a>.</td>
  </tr>
  <tr>
   <th scope="row">İzin verilen ARIA rolleri</th>
   <td>Hiçbiri</td>
  </tr>
  <tr>
   <th>DOM arayüzü</th>
   <td>{{DOMxRef("HTMLLinkElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Şartnames">Şartnames</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Şartname</th>
   <th scope="col">Durum</th>
   <th scope="col">Yorum</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Preload")}}</td>
   <td>{{Spec2("Preload")}}</td>
   <td>Defines <code>&lt;link rel="preload"&gt;</code>, ve <code>as</code> atıf.</td>
  </tr>
  <tr>
   <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}</td>
   <td>{{Spec2("Subresource Integrity")}}</td>
   <td><code>integrity</code> atıf eklendi.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "&lt;link&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>En son anlık görüntüden değişiklik yok</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "&lt;link&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td><code>crossorigin</code> ve <code>sizes</code> özellikleri eklendi; Herhangi bir medya sorgusuna <code>media</code> genişletilmiş değerleri; <code> rel </code> için birçok yeni değer ekledi.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "&lt;link&gt;")}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("Resource Hints", "#prefetch", "prefetch")}}</td>
   <td>{{Spec2("Resource Hints")}}</td>
   <td><code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> ve <code>prerender</code> eklendi.</td>
  </tr>
 </tbody>
</table>

<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2>

<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat- veri </a> ve bize çekme isteği gönderin.</div>

<p>{{Compat("html.elements.link", 3)}}</p>

<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>

<ul>
 <li>{{HTTPHeader("Link")}} HTTP başlık</li>
 <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove'un &lt;script&gt; ve &lt;link&gt; düğümü olayı uyumluluk tablosu</a></li>
</ul>