شرح الروابط في HTML بالعربي — وسم وأنواع الروابط

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

وسم الرابط <a> — الأساسيات

<a> اختصار لكلمة Anchor (مرساة). يستخدم لإنشاء أي نوع من الروابط. أهم خاصية فيه هي href التي تحدد إلى أين يذهب الرابط.

<!-- الصيغة الأساسية -->
<a href="رابط-الوجهة">النص الذي يراه الزائر</a>

<!-- مثال حقيقي -->
<a href="https://www.devarabi.com">زيارة موقع DevArabi</a>

النص الذي تضعه بين وسمَي الرابط هو ما يراه الزائر ويضغط عليه. المتصفح يُظهره باللون الأزرق مع خط تحته افتراضياً (يمكن تغيير هذا بـ CSS).

خاصية href — أنواع الروابط

1. الروابط الخارجية — إلى مواقع أخرى

تشير إلى موقع آخر على الإنترنت. يجب أن تبدأ بـ https:// أو http://.

<a href="https://www.google.com">البحث على جوجل</a>
<a href="https://www.youtube.com">مشاهدة يوتيوب</a>
<a href="https://www.devarabi.com">DevArabi — تعلم البرمجة</a>

2. الروابط الداخلية — داخل نفس الموقع

تشير إلى صفحات أخرى في نفس موقعك. لا تحتاج عنوان URL كامل — فقط المسار النسبي.

<!-- رابط لصفحة في نفس المجلد -->
<a href="about.html">من نحن</a>

<!-- رابط لصفحة في مجلد فرعي -->
<a href="courses/html/intro.php">دورة HTML</a>

<!-- رابط لصفحة من جذر الموقع -->
<a href="/contact.php">تواصل معنا</a>

3. روابط البريد الإلكتروني — mailto:

عند الضغط عليها، يفتح تطبيق البريد الإلكتروني للمستخدم مع عنوان المرسَل إليه جاهزاً.

<a href="mailto:contact@devarabi.com">راسلنا عبر البريد</a>

<!-- يمكن إضافة موضوع الرسالة أيضاً -->
<a href="mailto:contact@devarabi.com?subject=استفسار عن الكورس">
    أرسل استفساراً
</a>

4. روابط الهاتف — tel:

على الموبايل، عند الضغط عليها يفتح تطبيق الهاتف مباشرة.

<a href="tel:+212600000000">اتصل بنا: 0600-000-000</a>

5. روابط الأقسام (Anchor Links) — داخل نفس الصفحة

تنتقل إلى قسم معين في نفس الصفحة. مفيدة جداً في الصفحات الطويلة. تعمل بربط href="#id-القسم" بخاصية id على العنصر المستهدف.

<!-- رابط للانتقال -->
<a href="#section-faq">اذهب إلى الأسئلة الشائعة</a>

<!-- ...محتوى كثير... -->

<!-- القسم المستهدف -->
<h2 id="section-faq">الأسئلة الشائعة</h2>
<p>هنا تجد إجابات أسئلتك...</p>

خاصية target — أين يفتح الرابط؟

بدون target، يفتح الرابط في نفس نافذة المتصفح (يُغادر صفحتك). يمكنك التحكم في هذا السلوك:

<!-- رابط خارجي يفتح في تبويب جديد -->
<a href="https://www.google.com" target="_blank">جوجل (تبويب جديد)</a>

<!-- رابط داخلي يبقى في نفس الصفحة -->
<a href="about.php" target="_self">من نحن</a>

الصورة كرابط — صورة قابلة للنقر

يمكنك جعل أي صورة رابطاً بوضع <img> داخل <a>:

<!-- الضغط على الشعار يعود للصفحة الرئيسية -->
<a href="/index.php">
    <img src="/assets/images/logo.png" alt="العودة للرئيسية">
</a>

الروابط وSEO — نصائح مهمة لجوجل

نص الرابط (Anchor Text) مهم جداً لمحركات البحث. جوجل يقرأ نص الرابط ليفهم ما في الصفحة المُرتبط بها.

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

ما الفرق بين الرابط المطلق والرابط النسبي؟

المطلق (Absolute): يحتوي على العنوان الكامل مثل https://devarabi.com/about.php — يعمل من أي مكان. النسبي (Relative): مسار مختصر مثل about.php أو ../images/logo.png — يعمل اعتماداً على موقع الملف الحالي.

كيف أجعل الرابط بدون تسطير أسفله؟

هذا عمل CSS، ليس HTML: a { text-decoration: none; } يمكنك أيضاً تغيير لون الرابط والحالات المختلفة (عند التحويم، بعد الزيارة...).

هل يمكن لأي عنصر HTML أن يكون رابطاً؟

نعم، يمكنك وضع أي عنصر داخل <a> — نص، صورة، زر، حتى <div> كامل. مثلاً بطاقة (card) كاملة يمكن جعلها رابطاً.

ماذا يحدث عند كتابة href="#" فقط؟

يبقى في نفس الصفحة لكن يعود إلى أعلاها (يُعيد تحميل الصفحة أو الانتقال للأعلى). يستخدم كـ placeholder مؤقت لروابط لم تُكتب بعد. يمكنك منع السلوك الافتراضي بـ JavaScript.