Çalıştırılabilir HTML Dokümanları: Yeni sekmede açma

Q: HTML'de bir linki yeni sekmede nasıl açarım?

etiketine target="blank" ekle: Example . Tarayıcı sayfayı yeni bir sekmede açar ve geçerli sayfayı açık tutar.

Q: target="_blank" ile hâlâ rel="noopener" gerekiyor mu?

Güncel Chrome, Firefox ve Safari target="_blank" linklerine noopener davranışını otomatik uygular, böylece yeni sayfa window.opener üzerinden seninkine ulaşamaz. rel="noopener" yazmanın bir maliyeti yoktur ve eski tarayıcılardaki ziyaretçileri korur, bu yüzden çoğu stil rehberi hâlâ bunu ister.

Q: noopener ile noreferrer arasındaki fark nedir?

noopener iki sekme arasındaki bağı koparır (yeni sekmede window.opener değeri null olur). noreferrer bunu yapar ve ayrıca tarayıcının sayfanın URL'sini referrer olarak göndermesini engeller, böylece diğer sitenin analitiği ziyareti doğrudan gelmiş gibi görür.

Q: HTML bir linkin sekme yerine yeni pencerede açılmasını zorlayabilir mi?

Hayır. target="_blank" yeni bir tarama bağlamı ister; bunun sekme mi pencere mi olacağına tarayıcı ve kullanıcının ayarları karar verir. Güncel tarayıcılar sekme açar.

Q: Bir sayfadaki tüm linkleri yeni sekmede nasıl açarım?

içine koy. Kendi target değeri olmayan her link bu durumda yeni sekmede açılır. Formları da etkiler, bu yüzden yalnızca gerçekten bunu istediğin sayfalarda kullan.

target="_blank" ile linki yeni sekmede açmak

Linke target="_blank" ekle. Tarayıcı hedefi yeni bir sekmede açar ve senin sayfanı olduğu yerde bırakır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

Tekniğin tamamı bu: <a> üzerinde target="_blank" ve bir sonraki bölümde anlatılan rel="noopener". Okurlar da herhangi bir linki Ctrl+tık (Mac'te Cmd+tık) ya da orta tıkla kendileri yeni sekmede açabilir; bu yüzden target="_blank" değerini yalnızca sayfadan ayrılmak onlara bir şey kaybettirecekse kullan, örneğin yarısı doldurulmuş bir form ya da oynayan bir video.

Bu sayfadaki önizlemeler, target olsun ya da olmasın her dış linki yeni sekmede açar, çünkü bir örnek çerçevesi asla başka bir sayfaya gitmemeli. target değerinin yarattığı farkı görmek için örneği bir dosya olarak kaydet ve tarayıcında aç.

rel="noopener" ve rel="noreferrer"

target="_blank" ile açılan bir sayfa eskiden window.opener içinde senin sayfana bir referans alırdı ve bunu senin sekmeni başka bir URL'ye (örneğin sahte bir giriş sayfasına) göndermek için kullanabilirdi. rel="noopener" bu referansı kaldırır.

`rel` değeri	Yeni sekmede `window.opener`	Yeni siteye gönderilen referrer
yok (eski tarayıcılar)	Senin sayfan	Evet
yok (güncel tarayıcılar)	`null`	Evet
`noopener`	`null`	Evet
`noreferrer`	`null`	Hayır
`opener`	Senin sayfan	Evet

Chrome, Firefox ve Safari'nin güncel sürümleri, sen rel="opener" yazmadıkça her target="_blank" linkini noopener olarak ele alır. Yine de rel="noopener" yazmak eski tarayıcılardaki ziyaretçileri korur ve niyeti kodda görünür kılar.

noreferrer ayrıca tarayıcının referrer göndermesini de engeller, böylece link verdiğin site ziyaretçinin hangi sayfadan geldiğini görmez. Bu bir güvenlik değil, gizlilik tercihidir: URL'nin gizli kalması gerekiyorsa kullan, trafiğini görmesi gereken ortaklar için kullanma.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel boşlukla ayrılmış birkaç değer alır, bu yüzden noopener SEO değerleriyle birleşebilir: ücretli bir link için rel="noopener sponsored", kefil olmadığın bir link için rel="noopener nofollow".

Kullanıcılara linkin yeni sekmede açıldığını söyle

Uyarı olmadan açılan yeni bir sekme kafa karıştırır, özellikle sayfanın değiştiğini fark etmeyebilecek ekran okuyucu kullananlar için. Bunu linkte söyle. Küçük bir ikon bunu görenlere gösterir; gizli bir metin de ekran okuyucu kullananlara söyler:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

a[target="_blank"] seçicisi oku her yeni sekme linkine otomatik ekler, böylece hiçbirini unutmazsın. Gizli span, linkin adının bir parçası olarak "accessibility guidelines (opens in a new tab)" şeklinde okunur, ama ekranda yer kaplamaz.

Her dış linki otomatik işaretle

Özellik seçicileri linklere href değerlerine göre stil verebilir. Burada http ile başlayan her link ok alır, site içi linkler almaz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= "ile başlar" demektir. Seçici yalnızca linklere stil verir: target ve rel özelliklerinin yine de HTML'de olması gerekir.

target değerleri

target linkin nerede açılacağını belirtir. Dört anahtar kelime vardır, diğer her değer bir addır:

`target`	Linki şurada açar
`_self`	Aynı sekme ya da çerçeve. Varsayılan budur.
`_blank`	Yeni, adsız bir sekme
`_parent`	Geçerli çerçevenin üst çerçevesi (çerçeve dışında `_self` ile aynı)
`_top`	Bütün sekme, tüm çerçevelerden çıkarak
herhangi bir ad, örn. `help`	O adı taşıyan sekme ya da çerçeve; yoksa oluşturulur

Adlandırılmış bir hedef tekrar kullanılır. target="help" olan her link aynı sekmede açılır, yani beş yardım linkine tıklayan bir okur beş değil, tek bir sekme alır. Bir <iframe> içinde bir linkin çerçeve yerine bütün sayfayı değiştirmesi gerektiğinde kullanılacak değer _top olur.

base elementi ile tüm linkleri yeni sekmede açmak

<head> içindeki <base target="_blank">, sayfadaki her link ve form için varsayılan hedefi belirler:

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

Bir linkin kendi target değeri <base> değerine üstün gelir. Bunu nadiren kullan: her linkin yeni sekmede açıldığı bir sayfayı kullanmak can sıkıcıdır.

JavaScript ile yeni sekme açmak

window.open(url, '_blank') bir script'ten sekme açar. rel özelliğiyle aynı korumayı almak için üçüncü argüman olarak 'noopener' ver. Bu durumda window.open yeni sekmeye bir referans yerine null döndürür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Tarayıcılar window.open çağrısını, bir tıklamaya ya da tuşa basmaya yanıt olarak çalışmıyorsa engeller; bu yüzden onu sayfa yüklenirken ya da bir zamanlayıcıdan sonra değil, bir olay dinleyicisinden çağır. Hedef, okurun önceden görebileceği bir URL ise target="_blank" olan bir link daha basittir ve JavaScript olmadan çalışır. Linkin kendisi HTML link verme sayfasında anlatılıyor.

Sık yapılan hatalar

Alt çizgisiz target="blank". Bu anahtar kelime değil, bir addır. İlk seferde yine yeni sekme açar, sonra aynı adı taşıyan diğer her link için o sekmeyi tekrar kullanır.
target="_new". Bu da sadece bir addır ve etkisi aynıdır: tekrar kullanılan tek bir sekme.
Her linke target koymak. Site içi linkler aynı sekmede açılmalı. Yeni sekme isteyen okurlar bunu nasıl yapacaklarını bilir.
Linkin yeni sekmede açıldığına dair hiçbir işaret olmaması. Bir ikon ve gizli metin ekle.
Ortaklık ya da affiliate linklerine noreferrer eklemek ve sonra ortağın neden hiç yönlendirme görmediğini merak etmek.

Sıkça Sorulan Sorular

HTML'de bir linki yeni sekmede nasıl açarım?

<a> etiketine target="_blank" ekle: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Tarayıcı sayfayı yeni bir sekmede açar ve geçerli sayfayı açık tutar.

target="_blank" ile hâlâ rel="noopener" gerekiyor mu?

Güncel Chrome, Firefox ve Safari target="_blank" linklerine noopener davranışını otomatik uygular, böylece yeni sayfa window.opener üzerinden seninkine ulaşamaz. rel="noopener" yazmanın bir maliyeti yoktur ve eski tarayıcılardaki ziyaretçileri korur, bu yüzden çoğu stil rehberi hâlâ bunu ister.

noopener ile noreferrer arasındaki fark nedir?

noopener iki sekme arasındaki bağı koparır (yeni sekmede window.opener değeri null olur). noreferrer bunu yapar ve ayrıca tarayıcının sayfanın URL'sini referrer olarak göndermesini engeller, böylece diğer sitenin analitiği ziyareti doğrudan gelmiş gibi görür.

HTML bir linkin sekme yerine yeni pencerede açılmasını zorlayabilir mi?

Hayır. target="_blank" yeni bir tarama bağlamı ister; bunun sekme mi pencere mi olacağına tarayıcı ve kullanıcının ayarları karar verir. Güncel tarayıcılar sekme açar.

Bir sayfadaki tüm linkleri yeni sekmede nasıl açarım?

<head> içine <base target="_blank"> koy. Kendi target değeri olmayan her link bu durumda yeni sekmede açılır. Formları da etkiler, bu yüzden yalnızca gerçekten bunu istediğin sayfalarda kullan.

İlgili kavramlar