target: کجا لینک باز بشه؟
تو درس ۴-۲ یه اشارهی کوتاه به target="_blank" داشتیم. حالا وقتشه کامل بریم سراغ این ویژگی و ببینیم چه مقادیر مختلفی داره، هرکدوم دقیقاً چیکار میکنن، و کجا باید ازشون استفاده کرد.
ویژگی target چیه؟
ویژگی target مشخص میکنه صفحهی مقصدِ یه لینک، کجا باز بشه؛ یعنی تو همون تب فعلی، یه تب جدید، یا حتی داخل یه قاب (Frame) مشخص از صفحه. این ویژگی داخل تگ a نوشته میشه:
<a href="https://example.com" target="_blank">بازکردن در تب جدید</a>مقدار پیشفرض: _self
<a href="page2.html">صفحه بعدی</a>
<a href="page2.html" target="_self">صفحه بعدی</a>این دو خط کد دقیقاً یه نتیجه دارن، چون _self مقدار پیشفرض ویژگی target هست؛ یعنی اگه اصلاً target رو ننویسی، مرورگر همین رفتار رو در نظر میگیره. با _self، لینک تو همون تب و همون پنجرهی فعلی باز میشه و صفحهی قبلی جایگزین میشه.
مقدار _blank: باز کردن در تب جدید
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
مشاهده در تب جدید
</a>همونطور که تو درس قبل دیدیم، _blank باعث میشه لینک تو یه تب کاملاً جدید مرورگر باز بشه، در حالی که تب فعلی همچنان با صفحهی قبلی باز میمونه. این مقدار پرکاربردترین گزینه بعد از _self هست، مخصوصاً برای لینکهای خارجی.
مقادیر _parent و _top: کاربرد در ساختارهای تودرتو
این دو مقدار کمتر رایج هستن و مخصوص صفحاتی هستن که از تگ iframe (قابهای تودرتو) استفاده میکنن؛ چیزی که تو درسهای بعدی این دوره باهاش آشنا میشیم:
<a href="page.html" target="_parent">باز کردن در فریم والد</a>
<a href="page.html" target="_top">باز کردن در کل پنجره</a>_parent: لینک رو تو فریم والدِ فریم فعلی باز میکنه (اگه صفحه داخل یه iframe تعبیه شده باشه)._top: لینک رو تو کل پنجرهی مرورگر باز میکنه، حتی اگه صفحهی فعلی چند لایه تو در تو از iframe باشه؛ یعنی همهی این لایهها رو کنار میذاره و کل پنجره رو با صفحهی جدید پر میکنه.
این دو مقدار تو پروژههای معمولی امروزی خیلی کم استفاده میشن، چون iframe هم دیگه بهاندازهی گذشته رایج نیست.
چه زمانی از _self (یا حذف کامل target) استفاده کنیم؟
برای اکثر لینکهای داخلی سایت، بهتره از رفتار پیشفرض (یعنی همون تب فعلی) استفاده کنی و اصلاً نیازی به نوشتن target نیست:
<a href="/services">خدمات ما</a>دلیلش اینه که وقتی کاربر داره تو یه سایت میگرده، معمولاً انتظار داره با کلیک روی هر لینک داخلی، همون تب بهروزرسانی بشه، نه اینکه هر بار یه تب جدید باز بشه و بهسرعت تعداد زیادی تب باز روی مرورگرش جمع بشه.
چه زمانی از _blank استفاده کنیم؟
استفاده از _blank معمولاً برای این موقعیتها منطقیتره:
- لینک به یه سایت کاملاً خارجی (مثل یه منبع یا مرجع).
- لینک به یه فایل قابلدانلود که نمیخوای کاربر صفحهی فعلی رو از دست بده.
- لینکهایی که تو یه فرم پر شده و میخوای کاربر بدون از دست دادن اطلاعات فرم، یه لینک کمکی رو تو تب جدید ببینه (مثلاً «مشاهدهی قوانین حریم خصوصی»).
یه اشتباه رایج: استفادهی افراطی از target="_blank"
<!-- توصیهنشده -->
<nav>
<a href="/" target="_blank">خانه</a>
<a href="/about" target="_blank">درباره ما</a>
<a href="/contact" target="_blank">تماس با ما</a>
</nav>این کد از نظر فنی مشکلی نداره، اما از نظر تجربهی کاربری اشتباهه؛ چون با کلیک روی هر آیتم منو، یه تب جدید باز میشه و کاربر خیلی سریع با کلی تب باز از همون سایت مواجه میشه که هم گیجکنندهست، هم مدیریتش سخته.
یه نمونهی درست و متعادل
<nav>
<a href="/">خانه</a>
<a href="/about">درباره ما</a>
<a href="/contact">تماس با ما</a>
</nav>
<p>
برای مطالعهی مستندات رسمی HTML5، به
<a href="https://html.spec.whatwg.org" target="_blank" rel="noopener noreferrer">این آدرس</a>
مراجعه کنید.
</p>تو این مثال، لینکهای منو (که داخلی هستن) بدون target نوشته شدن، اما لینک به مستندات خارجی HTML5 با target="_blank" و rel امنشده اومده.
جدول جمعبندی مقادیر target
| مقدار | رفتار | کاربرد رایج |
|---|---|---|
| _self (پیشفرض) | باز شدن در همان تب فعلی | لینکهای داخلی سایت |
| _blank | باز شدن در تب جدید | لینکهای خارجی، فایلهای دانلودی |
| _parent | باز شدن در فریم والد | صفحات دارای iframe |
| _top | باز شدن در کل پنجرهی مرورگر | صفحات با iframe های تودرتو |
چند اشتباه رایج
- استفادهی افراطی از target="_blank" برای تمام لینکها، حتی لینکهای داخلی سایت.
- فراموشکردن rel="noopener noreferrer" هنگام استفاده از target="_blank".
- استفاده از _parent یا _top بدون داشتن هیچ ساختار iframe ای، که در این حالت هیچ تفاوتی با _self نخواهد داشت.
بهترین روشها
- برای لینکهای داخلی، به رفتار پیشفرض (_self) اعتماد کن و نیازی به نوشتن target نیست.
- برای لینکهای خارجی یا فایلهای دانلودی، از target="_blank" همراه با rel="noopener noreferrer" استفاده کن.
- _parent و _top رو فقط وقتی استفاده کن که واقعاً با ساختار iframe کار میکنی.
نکتهی سئو
ویژگی target بهتنهایی تأثیر مستقیمی روی رتبهبندی سئو ندارد، اما تجربهی کاربری بهتر (مثل باز نشدن بیشازحد تبهای جدید) میتواند بهطور غیرمستقیم روی معیارهایی مثل مدت زمان حضور کاربر در سایت اثر بگذارد.
نکتهی دسترسیپذیری
باز شدن ناگهانی یک تب جدید بدون هشدار قبلی میتواند برای کاربران صفحهخوان یا کاربرانی که با صفحهکلید کار میکنند گیجکننده باشد؛ توصیه میشود در چنین مواردی، از طریق یک متن کمکی یا نشانهی بصری (مثل یک آیکون کوچک) به کاربر اطلاع داده شود که این لینک در تب جدید باز خواهد شد.
جمعبندی
ویژگی target مشخص میکند یک لینک کجا باز شود؛ مقدار پیشفرض _self لینک را در همان تب باز میکند، _blank آن را در تب جدید باز میکند، و _parent و _top مخصوص ساختارهای مبتنی بر iframe هستند. انتخاب درست بین این مقادیر، بهخصوص تفکیک بین لینکهای داخلی و خارجی، تأثیر مستقیمی روی تجربهی کاربری دارد.