عنوان و هدف لینک در HTML

جلسهٔ Links عنصرهای a کارآمد با href واضح به شما داد. دو افزونهٔ رایج تجربه را عوض می‌کنند بدون این‌که جایگزین href شوند: ویژگی title برای اشارهٔ کوتاه هنگام hover، و target که می‌تواند مقصد را در زبانهٔ جدید باز کند. با دقت کمک می‌کنند. روی هر آیتم منو، آدم‌ها را کلافه می‌کنند و جای پای امنیتی می‌سازند.

این ویژگی‌ها چه می‌کنند؟

href هنوز تصمیم می‌گیرد لینک کجا برود. title، target و rel اشاره و چگونگی باز شدن مقصد را تنظیم می‌کنند. آن‌ها را ابزار اختیاری روی متن لینک محکم یاد بگیرید — نه جایگزین واژه‌گذاری توصیفی.

پاسخ مستقیم

• title="…" — متن راهنمای اختیاری tooltip هنگام hover (پشتیبانی و فایده فرق دارد؛ هرگز تنها به آن تکیه نکنید)
• target="_blank" — باز شدن در زبانه یا پنجرهٔ جدید
• با _blank، rel="noopener noreferrer" را هم بگذارید تا صفحهٔ جدید نتواند از راه window.opener کنترل کامل زبانهٔ اصلی شما را بگیرد (الگوی امن‌تر روزمره)
  ناوبری داخل سایت را پیش‌فرض در همان زبانه نگه دارید. _blank را برای مواردی نگه دارید که ماندن روی صفحهٔ شما واقعاً کمک می‌کند — اغلب ارجاع بیرونی یا دانلود.

title، target و rel در یک نگاه

یک title مفید برای tooltip

وقتی اشارهٔ کوتاه فراتر از متن قابل‌دید ارزش می‌افزاید از title استفاده کنید. همان جمله را در هر دو جا نچسبانید به امید وضوح دوبرابر — تجربهٔ خوانندهٔ صفحه و hover فرق دارد و تکرار خالی توجه را هدر می‌دهد.

خواندن نمونهٔ title

• متن قابل‌دید Beginner guide برچسب اصلی می‌ماند
• title در بسیاری مرورگرهای دسکتاپ رشتهٔ کوتاه راهنما روی hover می‌افزاید
• موبایل و فناوری کمکی ممکن است title را یکسان نشان ندهند — متن قابل‌دید را قوی نگه دارید
• href همچنان به guide.html می‌رود؛ title به‌تنهایی ناوبری نمی‌کند

زبانهٔ جدید با rel امن‌تر

باز کردن سایت بیرونی در زبانهٔ جدید می‌تواند درس شما را باز نگه دارد. _blank را با rel="noopener noreferrer" به‌عنوان عادت امن‌تر پیش‌فرض برای آن موارد جفت کنید.

چرا noopener و noreferrer

• noopener خطر دستکاری زبانهٔ اصلی توسط صفحهٔ جدید از راه window.opener را کم می‌کند
• noreferrer در بسیاری مرورگرها از فرستادن referrer هم پرهیز می‌کند (اثر حریم خصوصی؛ هنوز معمولاً با این الگو آموزش داده می‌شود)
  در این دوره به نظریهٔ عمیق امنیت مرورگر نیاز ندارید — جفت ویژگی را برای لینک بیرونی _blank حفظ کنید و جلو بروید.

همه را blank نکنید

زبانه‌های جدید زیاد می‌شوند. اگر هر لینک نوار کناری _blank باز کند، کاربران داستان سادهٔ Back را از دست می‌دهند و تودهٔ زبانه می‌گیرند. برای صفحات خودتان (about.html، درس بعد، خانه) لینک همان‌زبانه را ترجیح دهید. _blank را وقتی سایت را ترک می‌کنید یا نیاز محصول صریح می‌خواهد به کار ببرید.

title همان title صفحه نیست

<title> سند در head کل زبانه را برچسب می‌زند. ویژگی title روی a فقط اشاره روی همان لینک است. کار متفاوت، واژهٔ انگلیسی شبیه — قاطی‌شان نکنید.

تمرین در ویرایشگر

1. لینک محلی با متن قابل‌دید واضح و title مفیدی که یک جزئیات اضافه می‌دهد بگذارید.
2. لینک بیرونی با target="_blank" و rel="noopener noreferrer" اضافه کنید.
3. روی دسکتاپ hover کنید تا tooltip را ببینید؛ کلیک کنید تا زبانهٔ جدید را تأیید کنید.
4. لینک سوم داخل‌سایت بدون _blank نگه دارید و تأیید کنید زبانهٔ جاری را عادی عوض می‌کند.
5. هر titleای که فقط متن لینک را بدون اطلاعات جدید تکرار می‌کند بازنویسی کنید.

اشتباهات رایج

• استفاده از _blank روی هر آیتم منوی داخلی
• فراموش rel="noopener noreferrer" روی لینک بیرونی _blank
• نوشتن title بی‌فایده که فقط متن لینک را تکرار می‌کند
• فکر کردن که title یا target می‌توانند جای href گم را بگیرند
• قاطی کردن ویژگی title لینک با عنصر <title> سند

خلاصه

• title می‌تواند اشارهٔ کوتاه hover بدهد؛ متن قابل‌دید لینک اصلی می‌ماند
• target="_blank" زبانه یا پنجرهٔ جدید باز می‌کند
• _blank را با rel="noopener noreferrer" برای لینک بیرونی امن‌تر جفت کنید
• برای صفحات خودتان ناوبری همان‌زبانه را ترجیح دهید
• href مقصد می‌ماند؛ این ویژگی‌ها فقط تجربه را ظریف می‌کنند