<a>
وسم الروابط <a>
وسم a ينشئ رابطًا تشعبيًّا إلى صفحة أخرى أو قسم داخل الصفحة أو بريد أو ملف — أهم وسوم الويب على الإطلاق.
الرابط هو جوهر فكرة الويب نفسها: نص أو عنصر يضغط عليه الزائر فينتقل إلى وجهة يحددها الحقل href. يمكن أن تكون الوجهة صفحة خارجية كاملة، أو صفحة داخل موقعك، أو قسمًا محددًا في نفس الصفحة عبر #id، أو حتى بريدًا إلكترونيًّا عبر mailto:.
نص الرابط نفسه مهم للسيو ولذوي الاحتياجات: اجعله وصفيًّا («حمّل الدليل الكامل») لا عامًّا («اضغط هنا»).
الصياغة
<a href="https://example.com">نص الرابط</a>
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
🎨 محرّر HTML/CSS
<a href="https://thecodefix.net">زُر The Code Fix</a> <br><br> <a href="mailto:info@example.com">راسلنا بالبريد</a> <br><br> <a href="https://example.com" target="_blank" rel="noopener">يفتح بتبويب جديد</a>
النتيجة المباشرة:
أهم الخصائص
| الخاصية | الوظيفة |
|---|---|
| href | وجهة الرابط: URL كامل، مسار داخلي، #id لقسم بالصفحة، أو mailto: للبريد |
| target="_blank" | يفتح الوجهة في تبويب جديد — أرفقه دائمًا بـ rel="noopener" |
| rel | علاقة الرابط بالصفحة: noopener للأمان مع _blank، وnofollow لعدم تمرير ثقة SEO |
| download | يجعل الرابط يحمّل الملف بدل فتحه |
💡 نصائح عملية
- نص الرابط الوصفي يخدم SEO والوصولية معًا — تجنّب «اضغط هنا»
- للرابط داخل نفس الصفحة: href="#section-id" مع وضع id على العنصر الهدف
- الروابط الخارجية مع target="_blank" تحتاج rel="noopener" للأمان
⚠️ أخطاء شائعة
- نسيان href نهائيًّا — الرابط بلا href لا يُعامل كرابط (لا يظهر بالتاب ولا يُفهرس)
- وضع أزرار أفعال (حذف/إرسال) كروابط — الأفعال تستخدم <button> والتنقل يستخدم <a>
- تداخل رابط داخل رابط — ممنوع في HTML وينتج سلوكًا غير متوقع
وسوم ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs