العنصر `<a>`

يُنشِئ العنصر <a> (اسمه اختصار للكلمة anchor) رابطًا فائقًا (hyperlink) لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية أو لعناوين البريد الإلكتروني.

المثال الآتي فيه رابط إلى موقع خارجي:

<a href="http://www.hsoub.com/">
External Link
</a>

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي.
المحتوى المسموح	محتوى تنظيمي أو عادي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر باستنثاء عنصر `<a>` آخر.
واجهة DOM	`HTMLAnchorElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`download`

توجِّه هذه الخاصية المتصفح إلى تنزيل رابط URL بدلًا من الانتقال إليه، أي سيُطلَب من المستخدم حفظ الملف محليًا.

إذا حُدِّدَت قيمة لهذه الخاصية فستكون الاسم الافتراضي للملف الذي سيُنزَّل، لكن المستخدم يستطيع تغييره إن شاء؛ ولا توجد قيود على القيم المسموحة لهذه الخاصية، لكن سيُبدَّل المحرفان \ و / إلى شرطات سفلية _؛ ذلك لأنَّ أغلبية أنظمة التشغيل لا تسمح باستخدام بعض المحارف في أسماء الملفات مما يجعل المتصفح يُعدِّل اسم الملف وفقًا لذلك.

ملاحظات:

هذه الخاصية جديدة في HTML5 ولم تكن موجودةً قبلها.
هذه الخاصية تعمل مع روابط URL من نفس المصدر (same-origin).
يمكن استخدام هذه الخاصية مع blob: URLs و data: URLs لتنزيل المحتوى المولّد عبر JavaScript، مثل الصور المُنشَأة عبر تطبيق ويب.
إذا أعطت ترويسة HTTP المسماة Content-Disposition:‎ قيمةً لاسم الملف تختلف عن قيمة هذه الخاصية فالأولوية لترويسة HTTP.
إذا ضُبِطَت قيمة الترويسة Content-Disposition:‎ إلى inline فالأولوية للترويسة في متصفح Firefox، بينما الأولوية لخاصية download في متصفح Chrome.

مثال

مثال عن استخدام الخاصية download لتنزيل صورة بدلًا من الانتقال إليها داخل المتصفح:

<a href="logo.png" download>Download Logo</a>

`href`

تحتوي هذه الخاصية على رابط URL أو قطعة من رابط URL (أي URL fragment) الذي يُشير إليه العنصر.

القطعة من رابط URL هي اسم يُسبَق برمز المربع (#)، الذي يُحدِّد مكان الرابط الداخلي ضمن المستند الحالي (عبر خاصية id لأحد عناصر HTML).

أنواع روابط URL ليست محصورة بالويب (أي بروتوكول HTTP)، وإنما يمكن استخدما أي بروتوكول مدعوم من المتصفح مثل file:‎ و ftp:‎ و mailto:‎ التي تعمل في أغلبية المتصفحات.

يمكن حذف هذه الخاصية في HTML5 لإنشاء رابط شكلي يشابه بقية الروابط لكن الضغط عليه لا يؤدي إلى الانتقال إلى أيّ مكان.

يمكن استخدام الخاصية href="#top"‎ أو href="#"‎ للانتقال إلى أعلى الصفحة الحالية، وهذا السلوك مُعرَّف في HTML5.

أمثلة

المثال الآتي فيه رابط إلى موقع خارجي:

<a href="http://www.hsoub.com/">
External Link
</a>

المثال الآتي فيه رابط إلى عنصر آخر في الصفحة نفسها:

<a href="#attr-href">
Description of Same-Page Links
</a>

`hreflang`

تُشير هذه الخاصية إلى اللغة (البشرية) للرابط المُشار إليه في هذا العنصر، وهذه الخاصية لا وظيفة لها وإنما تستعمل للتنظيم. القيم المسموحة لهذه الخاصية مُعرَّفة في BCP47.

مثال

مثال عن استخدام الخاصية hreflang للإشارة إلى الموقع العربي والإنكليزي لشركة حسوب:

<a href="https://www.hsoub.com/en/" hreflang="en">Hsoub</a>
<a href="https://www.hsoub.com" hreflang="ar">حسوب</a>

`rel`

تُحدِّد هذه الخاصية ما هي علاقة الرابط المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي قيمة أو قيم صالحة لتحديد العلاقة.

مثال

مثال عن استخدام العلاقة next للإشارة إلى الفصل التالي في كتابٍ ما:

<a href="/chap-7.html" rel="next">Next Chapter</a>

`target`

كلمة محجوزة تشير إلى المكان الافتراضي لعرض الناتج عندما تُسبِّب الروابط أو عناصر النماذج بالانتقال إلى صفحةٍ أخرى وذلك إذا لم تُحدِّد تلك العناصر قيمةً خاصةً لهذه الخاصية.

الكلمات المحجوزة التالية لها معانٍ خاصة:

‎__self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تُحدَّد قيمةٌ أخرى.
‎__blank: عرض الصفحة في نافذة جديدة.
‎__parent: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.
‎__top: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.

مثال

المثال الآتي يسمح بالضغط على صورة للانتقال إلى رابط URL المُحدَّد وذلك في لسان أو نافذة تصفح جديدة:

<a href="academy.hsoub.com" target="_blank">
  <img src="https://www.hsoub.com/assets/images/milestones/academy-2015-03-04.png"
       alt="Hsoub Academy logo" />
</a>

`type`

تُحدِّد هذه الخاصية نوع MIME للمورد المُشار إليه عبر رابط URL، وهذه الخاصية تنظيمية وليس لها أي وظيفة.

خاصيات مهملة

charset: تُعرِّف هذه الخاصية ترميز المحارف للمورد المُشار إليه عبر رابط URL، لكن هذه الخاصية مهملة في HTML5 ويجب استخدام ترويسة HTTP المسماة Content-Type مع رابط URL المعني.
name: كانت هذه الخاصية مطلوبة لعناصر <a> التي تُشير إلى عنصرٍ آخر في المستند. هذه الخاصية أصبحت مهملة في HTML5.
rev: تُستخدم هذه الخاصية لتحديد رابط عكسي (reverse link) مع العلاقة inverse التابعة للخاصية rel. هذه الخاصية أُهملت لصعوبة فهمها ولإرباكها للمطورين.

ملاحظات

نصائح لتسهيل قابلية الوصول

يُساء استخدام الروابط عادةً عبر إضافة الحدث onclick لإنشاء أزرار لها القيم "#" أو "javascript:void(0)‎" لخاصية href لمنع الصفحة من التحديث.

هذه القيم تُسبِّب سلوكًا غير متوقع عند نسخ الروابط، أو فتحها في نوافذ جديدة أو ألسنة جديدة، أو إضافتها إلى المفضلة، أو عندما لا تكون شيفرات JavaScript قد اكتمل تحميلها، أو عند حدوث أخطاء في JavaScript أو إذا كانت مُعطَّلةً؛ أضف إلى ذلك أنَّ ذلك لا يؤدي إلى إنشاء عناصر مُنظَّمة تنظيمًا صحيحًا لتستعمل مع بعض البرمجيات (مثل قارئات الشاشة).

يُنصَح باستخدام العنصر <button> في الحالات السابقة، ويجب أن تستعمل العنصر <a> للإشارة إلى رابط URL سليم دومًا.

أمثلة

من الشائع إنشاء روابط تؤدي إلى فتح عميل البريد الإلكتروني لإرسال رسالة جديدة، وذلك عبر وضع mailto:‎ قبل عنوان البريد الإلكتروني. لمزيدٍ من المعلومات حول بنية روابط URL لإرسال البريد الإلكتروني (mailto) فانظر إلى RFC 6068.

<a href="mailto:info@hsoub.com">Send email to Hsoub</a>

توفير روابط إلى أرقام الهواتف سيُسهِّل عملية الاتصال للمستخدمين الذين يعرضون الصفحة على هواتفهم المحمولة أو حواسيبهم المتصلة بهاتف. لمزيدٍ من المعلومات حول بينة روابط tel فانظر إلى RFC 2806 و RFC 2396.

<a href="tel:+491570156">+49 157 0156</a>

إذا أردتَ السماح للمستخدمين بتنزيل محتوى أحد عناصر <canvas> كصورة، فيمكنك إنشاء رابط مع ضبط الخاصية download وإضافة رابط إلى بيانات العنصر canvas:

var link = document.createElement('a');
link.textContent = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.