عناوين وأهداف الروابط في HTML

جلسة الروابط منحتك عناصر a تعمل مع قيم href واضحة. إضافتان شائعتان تغيّران التجربة دون استبدال href: سمة title لتلميح قصير عند التمرير، وtarget يمكنه فتح الوجهة في تبويب متصفح جديد. بحذر تفيدان. على كل عنصر قائمة تزعجان الناس وتصنعان فخاخ أمان.

ماذا تفعل هذه السمات

href ما زال يحدد أين يذهب الرابط. title وtarget وrel تضبط التلميحات وكيفية فتح المتصفح لتلك الوجهة. تعلّمها أدوات اختيارية فوق نص رابط متين — لا بدائل عن صياغة وصفية واضحة.

إجابة مباشرة

• title="…" — نص تلميح استشاري اختياري عند التمرير (الدعم والفائدة يختلفان؛ لا تعتمد عليه وحده أبداً)
• target="_blank" — فتح في تبويب أو نافذة جديدة
• مع _blank، عيّن أيضاً rel="noopener noreferrer" حتى لا تسيطر الصفحة الجديدة بالكامل على تبويبك الأصلي عبر window.opener (نمط يومي أكثر أماناً)
  أبقِ التنقل داخل الموقع في نفس التبويب افتراضياً. خصّص _blank للحالات التي يبقى فيها بقاؤك على صفحتك مفيداً فعلاً — غالباً مراجع خارجية أو تنزيلات.

title وtarget وrel بنظرة سريعة

تلميح title مفيد

استخدم title عندما يضيف تلميح قصير قيمة تتجاوز نص الرابط المرئي. لا تلصق الجملة نفسها في الموضعين أملاً في وضوح مضاعف — تجربة قارئ الشاشة والتمرير تختلفان، والتكرار الفارغ يهدر الانتباه.

قراءة عينة title

• النص المرئي Beginner guide يبقى التسمية الأساسية
• title يضيف سلسلة استشارية قصيرة عند التمرير في كثير من متصفحات سطح المكتب
• الجوال والتقنيات المساعدة قد لا تعرض title بالطريقة نفسها — أبقِ النص المرئي قوياً
• href ما زال يشير إلى guide.html؛ title لا ينقّل بمفرده

تبويب جديد مع rel أكثر أماناً

فتح موقع خارجي في تبويب جديد يمكن أن يبقي درسك مفتوحاً. اقرن _blank مع rel="noopener noreferrer" كعادة أكثر أماناً افتراضياً لتلك الحالات.

لماذا noopener وnoreferrer

• noopener يقلل خطر أن تتلاعب الصفحة الجديدة بتبويبك الأصلي عبر window.opener
• noreferrer يتجنب أيضاً إرسال referrer في كثير من المتصفحات (أثر خصوصية؛ ما زال يُدرَّس غالباً مع هذا النمط)
  لا تحتاج نظرية أمان متصفح عميقة في هذه الدورة — احفظ السمتين المقترنتين لروابط _blank الخارجية وانتقل قدماً.

لا تجعل كل شيء blank

التبويبات الجديدة تتضاعف. إذا فتح كل رابط شريط جانبي _blank، يفقد المستخدمون قصة زر الرجوع البسيطة وينتهون بكومة تبويبات. فضّل روابط نفس التبويب لصفحاتك (about.html، الدرس التالي، الرئيسية). استخدم _blank عند مغادرة موقعك أو عندما يطلب متطلب المنتج ذلك بوضوح.

title ليس عنوان الصفحة

عنصر المستند <title> في head يسمّي التبويب كله. سمة title على a مجرد تلميح على ذلك الرابط. مهمتان مختلفتان، كلمة إنجليزية متشابهة — لا تخلط بينهما.

تمرين في محررك

1. أضف رابطاً محلياً بنص مرئي واضح وtitle مفيد يضيف تفصيلاً واحداً إضافياً.
2. أضف رابطاً خارجياً مع target="_blank" وrel="noopener noreferrer".
3. مرّر (على سطح المكتب) لترى التلميح؛ انقر لتأكيد تبويب جديد.
4. أبقِ رابطاً ثالثاً داخل الموقع بلا _blank وتأكد أنه يستبدل التبويب الحالي بشكل عادي.
5. أعد كتابة أي title يكرر فقط نص الرابط بلا معلومة جديدة.

أخطاء سهلة

• استخدام _blank على كل عنصر قائمة داخلي
• نسيان rel="noopener noreferrer" على روابط _blank الخارجية
• كتابة title عديم الفائدة يكرّر فقط نص الرابط
• الاعتقاد أن title أو target يمكنهما استبدال href مفقود
• الخلط بين سمة title للرابط وعنصر <title> للمستند

ملخص

• title يمكنه إضافة تلميح تمرير قصير؛ نص الرابط المرئي يبقى أساسياً
• target="_blank" يفتح تبويباً أو نافذة جديدة
• اقرن _blank مع rel="noopener noreferrer" لروابط خارجية أكثر أماناً
• فضّل التنقل في نفس التبويب لصفحاتك
• href يبقى الوجهة؛ هذه السمات تصقل التجربة فقط