Bağlantı hedefleri
target ve rel öznitelikleriyle bağlantının nerede açılacağını kontrol edersin.
target özniteliği ne yapar?
target özniteliği, bağlantının nerede açılacağını belirler. Varsayılan değer _self'tir; bağlantı aynı sekmede açılır. Yeni bir sekmede açmak için target="_blank" yazılır.
Yeni sekme, dış sitelere çıkan bağlantılarda okuyucuyu sayfada tutmak için sık kullanılır. Ancak her bağlantıyı yeni sekmede açmak deneyimi bölüp sekmeleri çoğalttığı için ölçülü kullanmak gerekir.
rel=noopener neden önemli?
target="_blank" ile açılan yeni sekme, eski güvenlik açıkları yüzünden açılan sayfaya belli bir erişim verirdi. Bunu engellemek için rel="noopener" eklenir; bu, yeni sekmenin açan sayfaya erişimini keser.
Dış bağlantılarda target="_blank" ve rel="noopener" çoğu zaman birlikte yazılır. Modern tarayıcılar bu korumayı varsayılan uygulasalar da, açıkça yazmak eski tarayıcılarda da güvenliği korur.
Uygulama Dış bağlantıyı yeni sekmede güvenli aç.
İskelet içine dış bir bağlantı ekle: https://arsiv-kitaplik.example adresine gitsin, yeni sekmede açılsın ve rel="noopener" ile güvenli olsun. Çapa metni "Arşiv" olsun.
Örnek çözümü göster
<h1>Çamlık Kitaplığı</h1>
<p>Dış kaynaklar:</p>
<a href="https://arsiv-kitaplik.example" target="_blank" rel="noopener">Arşiv</a>Hedef ve güvenlik birlikte
target bağlantının nerede açılacağını, rel ise açılan sayfayla ilişkiyi denetler. Yeni sekme açtığında rel="noopener" eklemek küçük ama önemli bir alışkanlıktır.
Dış bağlantılarda bu ikisini birlikte yazmak, okuyucuyu sayfanda tutarken güvenliği de korur. Bir sonraki derste bağlantıları e-posta ve telefonla nasıl kuracağını göreceksin.
Kendini test et
-
Bir bağlantının yeni sekmede açılması için target değeri ne olmalı?
- _blank
- _self
- _new
- _tab
Cevabı göster
_blank — Doğru. _blank, yeni sekmede açmanın standart değeridir.
-
Dış bağlantıyı güvenli biçimde tamamla.
<a href="https://arsiv-kitaplik.example" target="_blank" rel="____">Arşive git</a>Cevabı göster
<a href="https://arsiv-kitaplik.example" target="_blank" rel="noopener">Arşive git</a> -
target ve rel değerlerini eşleştir.
- _self
- Aynı sekmede aç
- _blank
- Yeni sekmede aç
- noopener
- Erişimi kes
- target
- Açılış yerini belirle