HTML a Etiketi: href, target, download ve rel ile Bağlantılar

href ile bağlantı türleri

href bağlantının gösterdiği URL'dir. Bağlantılar yalnızca HTTP adresleriyle sınırlı değildir; tarayıcıların desteklediği her URL şeması kullanılabilir. MDN'nin saydığı şemalar arasında telefon numaraları için tel:, e-posta için mailto:, SMS için sms: ve çalıştırılabilir kod için javascript: bulunur. Bunlara ek olarak URL'nin parça kısmı bir sayfadaki bölüme, metin parçaları (text fragments) belirli bir metne, medya parçaları da bir medya dosyasının belirli bir kısmına işaret edebilir.

<!-- Mutlak URL -->
<a href="https://www.example.com/">Örnek site</a>

<!-- Göreli URL türleri -->
<a href="//example.com">Şemaya göreli adres</a>
<a href="/blog/">Kök dizine göreli adres</a>
<a href="iletisim.html">Aynı dizine göreli adres</a>
<a href="./iletisim.html">Aynı dizine göreli adres (./ ile)</a>
<a href="../index.html">Üst dizine göreli adres</a>

Göreli adresler alan adını içermez; tarayıcı onları geçerli sayfanın adresine göre çözer. Bu yüzden kendi sayfalarınız arasındaki bağlantılarda kısa ve pratiktirler. Sayfada bir <base> öğesi varsa göreli adresler onun belirttiği temel URL'ye göre çözülür.

Aynı sayfadaki bir bölüme bağlantı

Sayfa içi bağlantı için hedef öğeye bir id verir, bağlantının href değerine de diyez işaretiyle bu kimliği yazarsınız. id değeri belgede benzersiz olmalı ve boşluk içermemelidir; ayrıntılar HTML global öznitelikler yazısında.

<p><a href="#iade-kosullari">İade koşullarına git</a></p>

<!-- ... sayfanın geri kalanı ... -->

<h2 id="iade-kosullari">İade koşulları</h2>
<p>Ürünü teslimden sonraki 14 gün içinde iade edebilirsiniz.</p>

MDN, sayfanın en üstüne dönmek için href="#top" ya da boş parça href="#" kullanılabileceğini, bunun HTML belirtiminde tanımlandığını not eder. Eski HTML'de hedef konum <a name="..."> ile tanımlanırdı; name özniteliği artık kullanımdan kalkmıştır ve yerine global id özniteliği kullanılır.

mailto: ve tel: bağlantıları

Kullanıcının e-posta programında yeni bir ileti açmak için mailto: şeması kullanılır. Konu veya gövde ekleme gibi ayrıntılar için MDN, kendi bağlantı oluşturma rehberine ve ilgili RFC'ye yönlendirir. Telefon numaraları için tel: kullanılır; MDN'ye göre davranış cihazın yeteneklerine göre değişir: hücresel cihazlar numarayı otomatik arar, birçok işletim sisteminde arama yapabilen programlar devreye girer, bazı durumlarda numara rehbere kaydedilir ya da başka bir cihaza gönderilir.

<p>Bize ulaşın:</p>
<ul>
  <li><a href="mailto:destek@example.com">destek@example.com</a></li>
  <li><a href="tel:+902120000000">+90 212 000 00 00</a></li>
</ul>

target: bağlantı nerede açılır?

target bağlantının hangi tarama bağlamında açılacağını belirtir: bir sekme, pencere ya da <iframe>. Bir ad yazabileceğiniz gibi özel anlamı olan anahtar sözcükleri de kullanabilirsiniz:

_parent ve _top değerleri, sayfanız bir <iframe> içinde gösterildiğinde anlam kazanır; iframe ayrıntıları HTML iframe etiketi yazısında.

target="_blank", noopener ve noreferrer

Yeni sekmede açılan bir sayfa, window.opener özelliği üzerinden kendisini açan sayfaya erişebiliyordu. MDN, target="_blank" değerinin rel="noreferrer" ve rel="noopener" olmadan kullanılmasının siteyi window.opener API'si üzerinden yapılan saldırılara açık bırakabileceğini belirtir. Aynı yerde önemli bir not da vardır: yeni tarayıcı sürümlerinde <a> öğesinde target="_blank" kullanmak, örtük olarak rel="noopener" ile aynı korumayı sağlar. Hangi sürümlerin bunu yaptığı için MDN uyumluluk tablosuna bakın.

<a href="https://www.example.org/" target="_blank" rel="noopener">
  Örnek kuruluş (yeni sekmede açılır)
</a>

noopener kullanıldığında _top, _self ve _parent dışındaki boş olmayan hedef adlarının, yeni pencere ya da sekme açıp açmama kararında _blank gibi değerlendirildiğini de MDN not eder. rel özniteliğinin diğer değerleri (nofollow dahil) MDN'nin rel sayfasında listelenir.

download: bağlantıyı indirme olarak işlemek

download özniteliği tarayıcıya bağlantıyı açmak yerine indirmesini söyler. Değersiz yazılırsa tarayıcı dosya adını Content-Disposition başlığından, URL yolunun son parçasından ya da medya türünden kendisi önerir. Bir değer verirseniz o değer dosya adı olarak önerilir; / ve \ karakterleri alt çizgiye dönüştürülür ve dosya sisteminin yasakladığı diğer karakterler de tarayıcı tarafından ayarlanabilir.

<a href="/belgeler/fiyat-listesi.pdf" download="fiyat-listesi-2026.pdf">
  Fiyat listesini indirin (PDF)
</a>

Diğer öznitelikler: hreflang, type, ping, referrerpolicy

• hreflang: bağlantı verilen sayfanın dilini ipucu olarak bildirir; değerleri global lang ile aynıdır ve tarayıcıda yerleşik bir işlevi yoktur.
• type: hedefin biçimini MIME türüyle ipucu olarak bildirir; yerleşik bir işlevi yoktur.
• ping: boşlukla ayrılmış URL listesidir; bağlantı izlendiğinde tarayıcı bu adreslere gövdesi PING olan POST istekleri gönderir. Genellikle izleme amaçlıdır.
• referrerpolicy: hedefe ne kadar referrer bilgisi gönderileceğini belirler. Varsayılan strict-origin-when-cross-origin değeridir: aynı kökene tam URL, aynı güvenlik seviyesindeki başka kökene yalnızca köken gönderilir, HTTPS'ten HTTP'ye geçişte hiç gönderilmez. unsafe-url değeri MDN'ye göre güvensizdir.

interestfor özniteliği ise <a> öğesini bir 'ilgi tetikleyicisi' yapar: kullanıcı öğenin üzerine geldiğinde ya da odakladığında hedef öğe gösterilir veya gizlenir. Bu yeni bir özelliktir; tarayıcı desteği için MDN uyumluluk tablosuna bakın.

Erişilebilir bağlantılar

MDN'nin bağlantılar için ilk kuralı, bağlantı metninin hedefi bağlamından bağımsız olarak anlatmasıdır. Yardımcı yazılımların sayfadaki bütün bağlantıları listeleyen kısayolları vardır; 'buraya tıklayın' ya da yalnızca 'burada' yazan bağlantılar bu listede anlamsız kalır. Güçlü bağlantı metni gören kullanıcılara da yarar, çünkü sayfayı hızlıca tarayan herkes bağlantı metinlerine bakar.

<!-- Zayıf: bağlantı metni hedefi anlatmıyor -->
<p>Ürünlerimiz hakkında bilgi için <a href="/urunler">buraya</a> tıklayın.</p>

<!-- Güçlü: bağlantı metni hedefi anlatıyor -->
<p>Daha fazla bilgi için <a href="/urunler">ürünlerimize göz atın</a>.</p>

• Sahte düğme yapmayın: href="#" ya da javascript:void(0) ile bağlantıyı düğme gibi kullanmak; kopyalama, yeni sekmede açma, yer imine ekleme ve JavaScript yüklenemediğinde beklenmedik davranışlara yol açar ve yardımcı teknolojilere yanlış anlam iletir. Bir eylem için button öğesi kullanın; bağlantıyı yalnızca gerçek bir URL'ye gitmek için kullanın.
• Yeni sekmeyi duyurun: target="_blank" ile açılan ya da bir dosya indiren bağlantılar ne olacağını belirtmelidir. Bir simge kullanıyorsanız, simge yüklenmese bile anlamın korunması için alt metni verin.
• Atlama bağlantısı ekleyin: <body> içinde olabildiğince erken yer alan ve ana içeriğin başına giden bir bağlantı, klavye kullanıcılarının her sayfada tekrarlanan menüyü geçmesini sağlar. Örneği HTML semantik etiketler yazısında.
• Yeterli boyut ve aralık bırakın: MDN, bağlantı gibi etkileşimli öğeler için en az 44x44 CSS pikseli dokunma alanı önerir; metin içindeki bağlantılar bu kuraldan muaftır. Yakın duran bağlantılar arasında boşluk bırakmak, yanlış öğeye dokunmayı önler.

<a href="https://tr.wikipedia.org/" target="_blank" rel="noopener">
  Vikipedi (yeni sekmede açılır)
</a>
<a href="/raporlar/yillik-rapor.pdf">
  Yıllık rapor
  <img src="pdf-simgesi.svg" width="14" alt="(PDF dosyası)" />
</a>

a öğesinin içine neler konabilir?

<a> flow, phrasing, interactive ve palpable içerik kategorilerine girer. İzin verilen içeriği 'transparent'tır: yani üst öğenin izin verdiği her şeyi alabilir, ancak içinde etkileşimli içerik ya da başka bir <a> bulunamaz ve hiçbir torununda tabindex tanımlanamaz. Bu kural sayesinde bir <div> içindeki bağlantı bir kartın tamamını (başlık, görsel, paragraf) sarabilir; fakat bir <p> içindeki bağlantı yalnızca phrasing içerik alır. Bağlantının içine <button> ya da başka bir bağlantı koymak geçersizdir.

href taşıyan bir <a> öğesinin örtük ARIA rolü link olur, href yoksa generic rolündedir. MDN'ye göre href varken öğe odaklıyken Enter tuşuna basmak bağlantıyı etkinleştirir. href olmayan bir <a> ise generic rolünde kaldığı için yardımcı teknolojilere bağlantı olarak sunulmaz.

Uygulamalı örnek: bir destek sayfasının bağlantıları

Bir destek sayfasında genellikle birkaç farklı bağlantı türü bir arada bulunur: ana içeriğe atlama bağlantısı, sayfa içi soru başlıklarına giden bağlantılar, e-posta ve telefon bağlantıları, indirilebilir bir kullanım kılavuzu ve dış bir kaynağa yeni sekmede açılan bir bağlantı. Aşağıdaki örnek bunların hepsini bu yazıdaki kurallara göre bir araya getirir:

<a href="#icerik">Ana içeriğe geç</a>
<main id="icerik">
  <h1>Destek</h1>
  <p><a href="#kargo">Kargo süresi</a> ve <a href="#iade">iade</a> soruları aşağıda.</p>
  <h2 id="kargo">Kargo ne kadar sürer?</h2>
  <p>Siparişler genellikle iki iş günü içinde kargoya verilir.</p>
  <h2 id="iade">Nasıl iade ederim?</h2>
  <p>
    <a href="/belgeler/iade-formu.pdf" download>İade formunu indirin (PDF)</a>
    ve doldurduktan sonra
    <a href="mailto:iade@example.com">iade@example.com</a> adresine gönderin.
  </p>
  <p>Acil durumlar için <a href="tel:+902120000000">+90 212 000 00 00</a>.</p>
  <p>
    <a href="https://www.example.org/tuketici-haklari" target="_blank" rel="noopener">
      Tüketici hakları rehberi (yeni sekmede açılır)
    </a>
  </p>
</main>

Bu örnekte her bağlantının metni hedefini kendi başına anlatır; ekran okuyucunun bağlantı listesinde 'İade formunu indirin (PDF)' ya da 'Tüketici hakları rehberi (yeni sekmede açılır)' gibi anlamlı ifadeler görünür. download değersiz kullanıldığı için tarayıcı dosya adını URL'nin son parçasından ya da sunucunun başlıklarından önerir; dosya aynı kökende olduğu için öznitelik yok sayılmaz. Sayfa içi bağlantıların hedefleri benzersiz id değerleri taşır ve atlama bağlantısı <main> öğesine gider.

Sık yapılan hatalar

• 'Buraya tıklayın' metni: bağlantı listesinde anlamsız kalır.
• Eylem için bağlantı kullanmak: sayfada bir şey yapan (menü açan, form gönderen) öğe <button> olmalıdır.
• Bağlantı içinde bağlantı: <a> öğeleri iç içe yazılamaz.
• Başka siteden dosyaya download eklemek: öznitelik yok sayılır; dosyanın sizin kökeninizde olması gerekir.
• Eski name çapaları: <a name="..."> yerine hedef öğeye id verin.
• Tekrar eden id hedefleri: MDN'ye göre id değeri bütün belgede benzersiz olmak zorundadır; parça bağlantısının hedefi olan bir değeri iki öğeye vermeyin.

Sık Sorulan Sorular

target="_blank" kullanırken rel="noopener" yazmak hâlâ gerekli mi?

MDN, yeni tarayıcı sürümlerinde target="_blank" değerinin örtük olarak noopener davranışı sağladığını belirtir. Eski tarayıcıları da desteklemek istiyorsanız rel="noopener" eklemenin zararı yoktur; hangi sürümlerin örtük davranışı uyguladığı için MDN uyumluluk tablosuna bakın.

Bağlantıların hepsi yeni sekmede mi açılmalı?

Hayır. MDN, beklenmedik şekilde yeni sekme ya da pencere açılmasının az gören, ekran okuyucu kullanan ya da bilişsel güçlük yaşayan kişileri şaşırtabileceğini belirtir. Yeni sekme kullanıyorsanız bunu bağlantı metninde ya da simgenin alt metninde söyleyin.

Bağlantı metni olarak URL yazmak doğru mu?

Bağlantı metninin hedefi anlatması gerekir. Uzun bir URL çoğu zaman hedefi anlatmaz; sayfanın adını ya da ne yapılacağını yazmak daha açıklayıcıdır. URL'yi göstermeniz gerekiyorsa uzun adreslerin satır kırılması için wbr öğesi işe yarar.

nofollow ne işe yarar?

rel="nofollow" belgenin sahibinin bağlantı verilen belgeyi onaylamadığını belirtir ve arama motoru örümceklerine bağlantı ilişkisini dikkate almamalarını söyler. Arama motoru tarafındaki ayrıntılar için meta robots etiketi yazısına bakabilirsiniz.

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 · HTML button etiketi · HTML semantik etiketler · HTML link etiketi · tabindex ve klavye erişimi