HTML target nedir?

Mehmet · Dün 20:34 da

HTML target nedir?

HTML’de target, bir bağlantının veya form sonucunun hangi tarayıcı bağlamında açılacağını belirleyen özelliktir. Örneğin target="_blank" bağlantıyı yeni bir sekme ya da pencere bağlamında açmayı, target="_self" ise mevcut sayfada açmayı ister. En sık <a> ve <form> etiketleriyle kullanılır.

Basit bağlantı örneği

Aşağıdaki tam örneği bir ornek.html dosyasına kaydedip tarayıcıda açabilirsiniz:

Kod:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>target örneği</title>
</head>
<body>
  <a href="https://example.com" target="_blank" rel="noopener">
    Yeni sekmede aç
  </a>

  <p>
    <a href="https://example.com" target="_self">
      Aynı sekmede aç
    </a>
  </p>
</body>
</html>

Beklenen sonuç, ilk bağlantının yeni bir sekmede veya pencerede, ikinci bağlantının ise mevcut sekmede açılmasıdır. Her iki bağlantı da aynı yerde açılıyorsa tarayıcı ayarlarını, bağlantının gerçekten href içerip içermediğini ve HTML’nin doğru kaydedildiğini kontrol edin.

target değerleri nasıl çalışır?

_self ve _blank gibi tanımlanmış özel değerler hazır gezinme bağlamlarını ifade eder. Alt çizgiyle başlamayan bir değer ise adlandırılmış bir hedef oluşturur. Aynı isim tekrar kullanılırsa bağlantılar mevcut aynı hedefi kullanabilir.

Değer	Sonuç	Ne zaman kullanılır?
_self	Mevcut bağlamda açar	Normal sayfa içi gezinme
_blank	Yeni, isimsiz bağlam açar	Kullanıcıyı mevcut sayfadan ayırmak istediğinizde
_parent	Bir üst çerçevede açar	İç içe çerçeve yapılarında
_top	En üst sayfa bağlamında açar	Çerçeve içinden ana sayfaya çıkmak istediğinizde
raporPenceresi	Bu isimdeki hedefi kullanır	Sonucu belirli bir iframe veya adlandırılmış pencereye göndermek istediğinizde

Genel bağlantılar için target yazmamak da çoğu zaman yeterlidir; bir base target ayarı yoksa varsayılan davranış mevcut bağlamda açmaktır. _blank kullanırken örnekteki gibi rel="noopener" eklemek, yeni sayfanın açan sayfaya window.opener üzerinden erişmesini engellemeye yardımcı olur.

Adlandırılmış iframe hedefi kullanma

Yerel bir deneme için aynı klasörde hedef.html adında basit bir HTML sayfası oluşturun. Sonra iframe’e name verip bağlantının target değerini aynı isim yapabilirsiniz:

Kod:

<iframe name="icerikAlani" title="İçerik alanı"
  style="width:100%; max-width:400px; height:200px; border-radius:0;"></iframe>

<a href="hedef.html" target="icerikAlani">
  İçeriği iframe içinde aç
</a>

Burada target="icerikAlani" değeri, iframe’in name="icerikAlani" değeriyle eşleştiği için mevcut ve erişilebilir hedef.html sayfası iframe’in içinde yüklenir. Eşleşme yoksa tarayıcı aynı isimde yeni bir hedef oluşturabilir; bu nedenle hedef adını yazarken büyük-küçük harf ve yazım hatalarını kontrol edin. Harici sayfa iframe içinde görüntülenmeyi engelliyorsa bu, target hatası değil, karşı sitenin çerçeveleme politikasıdır.

Formlarda target kullanımı

Formdaki target, form gönderildikten sonra sunucudan gelen yanıtın nerede gösterileceğini belirler. Aşağıdaki example.com/form kurgusal uç noktadır; gerçek çalışan form işleyicinizle değiştirilmelidir:

Kod:

<form action="https://example.com/form" method="get" target="_blank" rel="noopener">
  <label>
    Arama:
    <input type="text" name="q">
  </label>
  <button type="submit">Gönder</button>
</form>

Formun tek bir gönderme düğmesinde farklı hedef istiyorsanız formtarget kullanabilirsiniz. Bu özellik, düğmenin ait olduğu formun target değerini o gönderim için geçersiz kılar.

Sandbox veya gezinme politikaları, özellikle _top gibi üst çerçeve hedeflerini engelleyebilir. target bir izin aşma yöntemi değildir.

Sık yapılan hatalar

target değerini href sanmak: target adresi değiştirmez, yalnızca adresin hangi bağlamda açılacağını belirler.
İframe’de yalnızca id vermek: Adlandırılmış hedef için iframe’in name özelliği de bulunmalıdır.
Her bağlantıda _blank kullanmak: Kullanıcı her tıklamada yeni sekmelerle karşılaşabilir; yalnızca gerçekten bağımsız açılması gereken içeriklerde kullanın.
target="blank" ile target="_blank" değerlerini karıştırmak: Alt çizgi yoksa bu, hazır anahtar kelime değil, “blank” adlı özel hedef ismidir.

Sık sorulan sorular

Target yazmadığım hâlde bağlantı neden yeni yerde açılıyor?

Belgenin head bölümünde bir base öğesinin target değeri tanımlanmış olabilir. Bu değer, kendi target değeri olmayan bağlantı ve formların varsayılanını etkileyebilir. Bağlantıda açıkça target="_self" kullanmak o bağlantı için varsayılanı değiştirir.

Adlandırılmış iframe hedefi onun DOM’una erişim izni verir mi?

Hayır. Target yalnız gezinmenin nerede yapılacağını belirler; origin veya sandbox sınırlarını kaldırmaz. Farklı origin içeriği yüklemek, üst sayfanın onun belge içeriğini okuyabileceği anlamına gelmez. Bu ihtiyaç için karşı tarafın katıldığı kontrollü mesajlaşma ayrıca tasarlanır.

HTML target nedir?

Mehmet