الروابط في HTML: السمة href والعناوين المطلقة والنسبية والتبويبات الجديدة وروابط البريد والهاتف

العنصر a والسمة href

تحمل السمة href الوجهة، والمحتوى بين الوسمين هو ما ينقر عليه الناس، وقد يكون نصاً أو صورة. والعنصر <a> بدون href ليس رابطاً أصلاً، فلا يمكن الوصول إليه بلوحة المفاتيح، لذا ضعها دائماً.

يحتوي العنوان المطلق على كل شيء: البروتوكول (https://) والنطاق والمسار، مثل https://developer.mozilla.org/en-US/docs/Web/HTML. استخدمه لأي صفحة في موقع آخر. وإذا حذفت https:// وكتبت www.example.com، يعامله المتصفح كأنه ملف في موقعك فينكسر الرابط.

المسارات النسبية داخل موقعك

لصفحات الموقع نفسه، تكون العناوين النسبية أقصر وتبقى صالحة إذا تغيّر النطاق. فـ contact.html تعني "ملف بجانب هذه الصفحة"، وblog/first.html تدخل مجلداً، و../index.html تصعد مجلداً واحداً. والمسار الذي يبدأ بـ / مثل /about يبدأ من جذر الموقع أينما كانت الصفحة الحالية.

أضف # ومعرّفاً للقفز إلى جزء من الصفحة: <a href="#prices">Prices</a> يمرّر إلى العنصر الذي يحمل id="prices". ويمكنك الجمع بينهما: /services#prices يفتح صفحة الخدمات عند ذلك القسم. ويجب أن يكون المعرّف فريداً في الصفحة.

التبويبات الجديدة والبريد والهاتف والتنزيلات

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

تفتح روابط mailto: تطبيق البريد لدى الزائر: <a href="mailto:services@zkdigitals.com">Email us</a>. وتبدأ روابط tel: اتصالاً على الهواتف، فاكتب الرقم بالصيغة الدولية الكاملة دون مسافات، مثل tel:+97140000000، ليعمل من أي دولة. وتطلب السمة download من المتصفح حفظ الملف بدلاً من فتحه (للملفات الموجودة في موقعك).

نص الرابط الجيد يقول إلى أين يذهب الرابط. فعبارة "نزّل قائمة أسعار 2026 (PDF)" واضحة حتى عندما تقرؤها قارئة الشاشة وحدها ضمن قائمة الروابط، أما "انقر هنا" فليست كذلك. كما يساعد ذلك محركات البحث على فهم الصفحة التي تربط بها.

أخطاء شائعة

• نسيان https:// في الروابط الخارجية

  تُقرأ href="google.com" كأنها ملف اسمه google.com في موقعك. والروابط الخارجية تحتاج دائماً إلى البروتوكول: https://google.com.

• نص الرابط "انقر هنا"

  صفحة مليئة بروابط "انقر هنا" لا فائدة منها في قائمة الروابط لدى قارئة الشاشة. ضع الوجهة في نص الرابط نفسه.

• استخدام الرابط كأنه زر

  إذا كان النقر يفعل شيئاً في الصفحة (يفتح قائمة أو يرسل بيانات) ولا ينتقل إلى عنوان، فاستخدم <button>. فالروابط تنقل، والأزرار تنفّذ.

تمرين

أنشئ قسم تواصل صغيراً: رابط واحد إلى موقع خارجي بعنوان كامل يبدأ بـ https://، ورابط بريد، ورابط هاتف بالصيغة الدولية، ورابط قفز إلى عنصر يحمل id في الصفحة نفسها.

<h2>Contact us</h2>
<p>Visit <a href="https://needmytools.com">NeedMyTools</a>.</p>
<p><a href="mailto:services@zkdigitals.com">Email us</a> or <a href="tel:+97140000000">call +971 4 000 0000</a>.</p>
<p><a href="#address">See our address</a></p>

<h2 id="address">Our address</h2>
<p>Al Barsha, Dubai</p>

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: The a element
• MDN: Creating links
• Google Search Central: Qualify your outbound links
• W3C WCAG technique G201: Warn about new windows

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