HTML Bağlantı Başlıkları ve Hedefleri

Bağlantılar oturumu size net href değerlerine sahip çalışan a öğelerini verdi. href’i değiştirmeden deneyimi dönüştüren iki yaygın ek: kısa bir üzerine gelme ipucu için title özniteliği ve hedefi yeni bir tarayıcı sekmesinde açabilen bir target. Dikkatli kullanılırsa yardımcı olurlar. Her menü öğesine konursa insanları rahatsız eder ve güvenlik tuzakları yaratırlar.

Bu öznitelikler ne yapar

href hâlâ bağlantının nereye gittiğini belirler. title, target ve rel, ipuçlarını ve tarayıcının o hedefi nasıl açacağını ayarlar. Bunları açıklayıcı metnin yerine değil, sağlam bağlantı metninin üstüne eklenen isteğe bağlı araçlar olarak öğrenin.

Doğrudan yanıt

• title="…" — üzerine gelince isteğe bağlı danışma tooltip metni (destek ve yarar değişir; yalnızca buna güvenmeyin)
• target="_blank" — yeni sekme veya pencerede aç
• _blank ile birlikte rel="noopener noreferrer" de ayarlayın; böylece yeni sayfa window.opener üzerinden orijinal sekmenizi tam kontrol edemez (daha güvenli günlük kalıp)
  Site içi gezinmeyi varsayılan olarak aynı sekmede tutun. _blank’i sayfanızda kalmanın gerçekten yardımcı olduğu durumlara saklayın — çoğu zaman harici referanslar veya indirmeler.

title, target ve rel bir bakışta

Yararlı bir title tooltip

Görünür bağlantı metninin ötesinde kısa bir ekstra ipucu değer kattığında title kullanın. Netliği ikiye katlayacağını umarak aynı cümleyi her iki yere de yapıştırmayın — ekran okuyucu ve üzerine gelme deneyimleri farklıdır ve boş tekrar dikkat boşa harcar.

Title örneğini okumak

• Görünür metin Beginner guide birincil etiket olarak kalır
• title birçok masaüstü tarayıcıda üzerine gelince kısa bir danışma dizesi ekler
• Mobil ve yardımcı teknolojiler title’ı aynı şekilde göstermeyebilir — görünür metni güçlü tutun
• href hâlâ guide.html’e işaret eder; title tek başına gezinmez

Daha güvenli rel ile yeni sekme

Harici bir siteyi yeni sekmede açmak okuyucuların dersinizi açık tutmasını sağlar. Bu durumlarda varsayılan daha güvenli alışkanlık olarak _blank’i rel="noopener noreferrer" ile eşleştirin.

Neden noopener ve noreferrer

• noopener, yeni sayfanın window.opener yoluyla orijinal sekmenizi manipüle etme riskini azaltır
• noreferrer birçok tarayıcıda referrer göndermeyi de önler (gizlilik yan etkisi; yine de bu kalıpla birlikte sık öğretilir)
  Bu derste derin tarayıcı güvenliği teorisine ihtiyacınız yok — _blank harici bağlantılar için eşleştirilmiş öznitelikleri ezberleyin ve ilerleyin.

Her şeyi blank yapmayın

Yeni sekmeler çoğalır. Kenar çubuğundaki her bağlantı _blank açarsa kullanıcılar basit Geri düğmesi hikâyesini kaybeder ve bir yığın sekmeyle kalır. Kendi sayfalarınız için aynı sekme bağlantılarını tercih edin (about.html, sonraki ders, ana sayfa). Sitenizden çıkarken veya ürün gereksinimi açıkça istediğinde _blank kullanın.

title sayfa başlığı değildir

head içindeki belge <title> öğesi tüm sekmeyi etiketler. Bir a üzerindeki title özniteliği yalnızca o bağlantıdaki bir ipucudur. Farklı işler, benzer İngilizce sözcük — karıştırmayın.

Editörünüzde pratik

1. Net görünür metin ve bir ekstra ayrıntı ekleyen yararlı bir title ile yerel bir bağlantı ekleyin.
2. target="_blank" ve rel="noopener noreferrer" ile harici bir bağlantı ekleyin.
3. Tooltip’i görmek için (masaüstünde) üzerine gelin; yeni sekmeyi doğrulamak için tıklayın.
4. _blank olmadan üçüncü bir site içi bağlantı tutun ve mevcut sekmeyi normal şekilde değiştirdiğini doğrulayın.
5. Bağlantı metnini sıfır yeni bilgiyle yalnızca tekrarlayan her title’ı yeniden yazın.

Kolay hatalar

• Her iç menü öğesinde _blank kullanmak
• _blank harici bağlantılarda rel="noopener noreferrer" unutmak
• Yalnızca bağlantı metnini yankılayan işe yaramaz bir title yazmak
• title veya target’ın eksik bir href’in yerine geçebileceğini sanmak
• Bağlantı title özniteliğini belge <title> öğesiyle karıştırmak

Özet

• title kısa bir üzerine gelme ipucu ekleyebilir; görünür bağlantı metni birincil kalır
• target="_blank" yeni bir sekme veya pencere açar
• Daha güvenli harici bağlantılar için _blank’i rel="noopener noreferrer" ile eşleştirin
• Kendi sayfalarınız için aynı sekme gezinmesini tercih edin
• href hedef olmaya devam eder; bu öznitelikler yalnızca deneyimi inceler