وثائق HTML قابلة للتشغيل: فتح رابط في تبويب جديد

Q: كيف أجعل الرابط يُفتح في تبويب جديد في HTML؟

أضف target="blank" إلى الوسم : Example . يفتح المتصفح الصفحة في تبويب جديد ويُبقي الصفحة الحالية مفتوحة.

Q: هل ما زلت أحتاج rel="noopener" مع target="_blank"؟

تطبّق الإصدارات الحالية من Chrome وFirefox وSafari القيمة noopener على روابط target="_blank" تلقائيًا، فلا تستطيع الصفحة الجديدة الوصول إلى صفحتك عبر window.opener. كتابة rel="noopener" لا تكلف شيئًا وتحمي الزوار على المتصفحات القديمة، لذلك ما زالت معظم أدلة الأسلوب تطلبها.

Q: ما الفرق بين noopener وnoreferrer؟

noopener يقطع الصلة بين التبويبين (window.opener تساوي null في التبويب الجديد). وnoreferrer يفعل ذلك ويمنع المتصفح أيضًا من إرسال عنوان صفحتك كمُحيل، فترى تحليلات الموقع الآخر الزيارة كزيارة مباشرة.

Q: هل يستطيع HTML إجبار الرابط على الفتح في نافذة جديدة بدل تبويب؟

لا. target="_blank" تطلب سياق تصفح جديدًا، والمتصفح وإعدادات المستخدم هي التي تقرر إن كان تبويبًا أم نافذة. المتصفحات الحالية تفتح تبويبًا.

Q: كيف أجعل كل روابط الصفحة تُفتح في تبويب جديد؟

ضع داخل . عندها يُفتح كل رابط لا يحمل target خاصًا به في تبويب جديد. وهذا يؤثر في النماذج أيضًا، فلا تستخدمه إلا في الصفحات التي تريد فيها ذلك فعلًا.

افتح الرابط في تبويب جديد بـ target="_blank"

أضف target="_blank" إلى الرابط. يفتح المتصفح الوجهة في تبويب جديد ويترك صفحتك كما هي.

<!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>

هذه هي التقنية كلها: target="_blank" على <a>، مع rel="noopener" الذي نشرحه بعد قليل. يستطيع القراء أيضًا فتح أي رابط في تبويب جديد بأنفسهم بـ Ctrl+نقرة (Cmd+نقرة في Mac) أو بالنقر بالزر الأوسط، لذلك استخدم target="_blank" فقط حين يكلفهم مغادرة الصفحة شيئًا، مثل نموذج نصف مملوء أو فيديو قيد التشغيل.

المعاينات في هذه الصفحة تفتح كل رابط خارجي في تبويب جديد، بوجود target أو بدونها، لأن إطار المثال يجب ألا ينتقل إلى صفحة أخرى أبدًا. لترى الفرق الذي تصنعه target، احفظ المثال كملف وافتحه في متصفحك.

rel="noopener" وrel="noreferrer"

الصفحة المفتوحة بـ target="_blank" كانت تحصل على مرجع إلى صفحتك في window.opener، ويمكنها استخدامه لتوجيه تبويبك إلى عنوان آخر (مثل صفحة تسجيل دخول مزيفة). rel="noopener" يزيل ذلك المرجع.

قيمة `rel`	`window.opener` في التبويب الجديد	هل يُرسَل المُحيل إلى الموقع الجديد
بلا قيمة (المتصفحات القديمة)	صفحتك	نعم
بلا قيمة (المتصفحات الحالية)	`null`	نعم
`noopener`	`null`	نعم
`noreferrer`	`null`	لا
`opener`	صفحتك	نعم

الإصدارات الحالية من Chrome وFirefox وSafari تعامل كل رابط target="_blank" كأنه noopener ما لم تكتب rel="opener". ومع ذلك فكتابة rel="noopener" تحمي الزوار على المتصفحات القديمة وتُظهر النية بوضوح في الشيفرة.

noreferrer يمنع المتصفح أيضًا من إرسال المُحيل، فلا يعرف الموقع الذي تربط إليه من أي صفحة جاء الزائر. هذا خيار للخصوصية، لا للأمان: استخدمه حين يجب أن يبقى عنوانك خاصًا، واتركه مع الشركاء الذين يحتاجون إلى رؤية الزيارات القادمة منك.

<!-- 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 عدة قيم مفصولة بمسافات، لذلك يمكن جمع noopener مع قيم تحسين محركات البحث: rel="noopener sponsored" لرابط مدفوع، وrel="noopener nofollow" لرابط لا تزكّيه.

أخبر المستخدمين أن الرابط يفتح تبويبًا جديدًا

التبويب الجديد الذي يُفتح بلا تنبيه مربك، خاصة لمستخدمي قارئات الشاشة الذين قد لا يلاحظون أن الصفحة تغيرت. قل ذلك في الرابط. أيقونة صغيرة تُظهره للمبصرين، ونص مخفي يقوله لمستخدمي قارئات الشاشة:

<!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"] يضيف السهم إلى كل رابط يفتح تبويبًا جديدًا تلقائيًا، فلا تنسى أيًّا منها. ويُقرأ الـ span المخفي كجزء من اسم الرابط، «accessibility guidelines (opens in a new tab)»، لكنه لا يشغل أي مساحة على الشاشة.

ميّز كل الروابط الخارجية تلقائيًا

محددات السمات تستطيع تنسيق الروابط بحسب href. هنا يحصل كل رابط يبدأ بـ http على السهم، بينما لا تحصل عليه الروابط الداخلية:

<!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>

^= تعني «يبدأ بـ». المحدد ينسّق الروابط فقط: السمتان target وrel يجب أن تبقيا في HTML.

قيم target

target تحدد أين يُفتح الرابط. هناك أربع كلمات محجوزة، وأي قيمة أخرى تُعد اسمًا:

`target`	يفتح الرابط في
`_self`	التبويب أو الإطار نفسه. وهي القيمة الافتراضية.
`_blank`	تبويب جديد بلا اسم
`_parent`	الإطار الأب للإطار الحالي (مثل `_self` خارج الإطارات)
`_top`	التبويب كله، خارج كل الإطارات
أي اسم، مثل `help`	التبويب أو الإطار الذي يحمل هذا الاسم، ويُنشأ إن لم يكن موجودًا

الهدف المسمّى يُعاد استخدامه. كل رابط يحمل target="help" يُفتح في التبويب نفسه، فالقارئ الذي ينقر خمسة روابط مساعدة يحصل على تبويب واحد لا خمسة. و_top هي القيمة المناسبة داخل <iframe> عندما يجب أن يحل الرابط محل الصفحة كلها لا الإطار وحده.

افتح كل الروابط في تبويب جديد بالعنصر base

<base target="_blank"> داخل <head> يحدد الهدف الافتراضي لكل رابط ونموذج في الصفحة:

<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>

target الخاصة بالرابط تتغلب على <base>. استخدم هذا نادرًا: الصفحة التي يفتح كل رابط فيها تبويبًا جديدًا مزعجة في الاستخدام.

فتح تبويب جديد من JavaScript

window.open(url, '_blank') تفتح تبويبًا من سكربت. مرّر 'noopener' كمعامل ثالث للحصول على الحماية نفسها التي تقدمها السمة rel. ومعه تُرجع window.open القيمة null بدلًا من مرجع إلى التبويب الجديد:

<!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>

تحظر المتصفحات window.open ما لم تُنفَّذ استجابةً لنقرة أو ضغطة مفتاح، لذلك استدعها من مستمع حدث، لا عند تحميل الصفحة أو بعد مؤقت. وإذا كانت الوجهة عنوانًا يمكن للقارئ رؤيته مسبقًا، فالرابط مع target="_blank" أبسط ويعمل من دون JavaScript. الرابط نفسه مشروح في الروابط في HTML.

أخطاء شائعة

target="blank" بلا الشرطة السفلية. هذا اسم وليس الكلمة المحجوزة. يفتح تبويبًا جديدًا في المرة الأولى، ثم يعيد استخدام ذلك التبويب لكل رابط آخر يحمل الاسم نفسه.
target="_new". هذا أيضًا مجرد اسم، وله الأثر نفسه: تبويب واحد يُعاد استخدامه.
وضع target على كل رابط. الروابط الداخلية يجب أن تُفتح في التبويب نفسه. القراء الذين يريدون تبويبًا جديدًا يعرفون كيف يحصلون عليه.
غياب ما يدل على أن الرابط يفتح تبويبًا جديدًا. أضف أيقونة ونصًا مخفيًا.
إضافة noreferrer إلى روابط الشركاء أو التسويق بالعمولة، ثم التساؤل لماذا لا يرى الشريك أي إحالات.

الأسئلة الشائعة

كيف أجعل الرابط يُفتح في تبويب جديد في HTML؟

أضف target="_blank" إلى الوسم <a>: <a href="https://example.com" target="_blank" rel="noopener">Example</a>. يفتح المتصفح الصفحة في تبويب جديد ويُبقي الصفحة الحالية مفتوحة.

هل ما زلت أحتاج rel="noopener" مع target="_blank"؟

تطبّق الإصدارات الحالية من Chrome وFirefox وSafari القيمة noopener على روابط target="_blank" تلقائيًا، فلا تستطيع الصفحة الجديدة الوصول إلى صفحتك عبر window.opener. كتابة rel="noopener" لا تكلف شيئًا وتحمي الزوار على المتصفحات القديمة، لذلك ما زالت معظم أدلة الأسلوب تطلبها.

ما الفرق بين noopener وnoreferrer؟

noopener يقطع الصلة بين التبويبين (window.opener تساوي null في التبويب الجديد). وnoreferrer يفعل ذلك ويمنع المتصفح أيضًا من إرسال عنوان صفحتك كمُحيل، فترى تحليلات الموقع الآخر الزيارة كزيارة مباشرة.

هل يستطيع HTML إجبار الرابط على الفتح في نافذة جديدة بدل تبويب؟

لا. target="_blank" تطلب سياق تصفح جديدًا، والمتصفح وإعدادات المستخدم هي التي تقرر إن كان تبويبًا أم نافذة. المتصفحات الحالية تفتح تبويبًا.

كيف أجعل كل روابط الصفحة تُفتح في تبويب جديد؟

ضع <base target="_blank"> داخل <head>. عندها يُفتح كل رابط لا يحمل target خاصًا به في تبويب جديد. وهذا يؤثر في النماذج أيضًا، فلا تستخدمه إلا في الصفحات التي تريد فيها ذلك فعلًا.

مفاهيم ذات صلة

فتح الرابط في تبويب جديد في HTML (target _blank)