الفرق بين المراجعتين لصفحة: «HTML/a»

المراجعة الحالية بتاريخ 07:03، 31 أغسطس 2022

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

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

<a href="http://www.hsoub.com/">
شركة حسوب
</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>تنزيل الشعار</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`

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

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

<a href="/chap-7.html" rel="next">الفصل القادم من الكتاب</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:wiki@hsoub.com">إرسال رسالة بريدية إلى موسوعة حسوب</a>

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

<a href="tel:+963215260000">+963 21 5260000</a>

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

var link = document.createElement('a');
link.textContent = 'تنزيل الصورة';

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

document.body.appendChild(link);

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <a> بوضع خط تحته عبر ضبط الخاصية text-decoration إلى underline، وتغيير المؤشر ولون النص لكن القيمة المستعملة تعتمد على المتصفح ونظام التشغيل.

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:العنصر <code><a></code>}}</noinclude>
-يُنشِئ العنصر <code><a></code> (اسمه اختصار للكلمة ''anchor'') رابطًا فائقًا (hyperlink) لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية أو لعناوين البريد الإلكتروني.
+يُنشِئ العنصر <code><a></code> (اسمه اختصار للكلمة ''anchor'' ويدعى بالمِربَط) رابطًا فائقًا (hyperlink) لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية أو لعناوين البريد الإلكتروني.
 المثال الآتي فيه رابط إلى موقع خارجي:<syntaxhighlight lang="html">
 <a href="http://www.hsoub.com/">
-External Link
+شركة حسوب
 </a>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 52: / سطر 54: @@
 * إذا أعطت ترويسة HTTP المسماة <code>Content-Disposition:‎</code> قيمةً لاسم الملف تختلف عن قيمة هذه الخاصية فالأولوية لترويسة HTTP.
 * إذا ضُبِطَت قيمة الترويسة <code>Content-Disposition:‎</code> إلى <code>inline</code> فالأولوية للترويسة في متصفح Firefox، بينما الأولوية لخاصية <code>download</code> في متصفح Chrome.
-==== مثال ====
 مثال عن استخدام الخاصية <code>download</code> لتنزيل صورة بدلًا من الانتقال إليها داخل المتصفح:<syntaxhighlight lang="html">
-<a href="logo.png" download>Download Logo</a>
+<a href="logo.png" download>تنزيل الشعار</a>
 </syntaxhighlight>
@@ سطر 64: / سطر 64: @@
 القطعة من رابط URL هي اسم يُسبَق برمز المربع (<code>#</code>)، الذي يُحدِّد مكان الرابط الداخلي ضمن المستند الحالي (عبر خاصية id لأحد عناصر HTML).
-أنواع روابط URL ليست محصورة بالويب (أي بروتوكول HTTP)، وإنما يمكن استخدما أي بروتوكول مدعوم من المتصفح مثل <code>file:‎</code> و <code>ftp:‎</code> و <code><nowiki>mailto:‎</nowiki></code> التي تعمل في أغلبية المتصفحات.
+أنواع روابط URL ليست محصورة بالويب (أي بروتوكول HTTP)، وإنما يمكن استخدام أي بروتوكول مدعوم من المتصفح مثل <code>file:‎</code> و <code>ftp:‎</code> و <code><nowiki>mailto:‎</nowiki></code> التي تعمل في أغلبية المتصفحات.
 يمكن حذف هذه الخاصية في HTML5 لإنشاء رابط شكلي يشابه بقية الروابط لكن الضغط عليه لا يؤدي إلى الانتقال إلى أيّ مكان.
@@ سطر 70: / سطر 70: @@
 يمكن استخدام الخاصية <code>href="#top"‎</code> أو <code>href="#"‎</code> للانتقال إلى أعلى الصفحة الحالية، وهذا [https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid السلوك مُعرَّف في HTML5].
-==== أمثلة ====
 المثال الآتي فيه رابط إلى موقع خارجي:<syntaxhighlight lang="html">
 <a href="http://www.hsoub.com/">
@@ سطر 80: / سطر 79: @@
 </a>
 </syntaxhighlight>
 === <code>hreflang</code> ===
 تُشير هذه الخاصية إلى اللغة (البشرية) للرابط المُشار إليه في هذا العنصر، وهذه الخاصية لا وظيفة لها وإنما تستعمل للتنظيم. القيم المسموحة لهذه الخاصية مُعرَّفة في [https://www.ietf.org/rfc/bcp/bcp47.txt BCP47].
-==== مثال ====
 مثال عن استخدام الخاصية <code>hreflang</code> للإشارة إلى الموقع العربي والإنكليزي لشركة حسوب:<syntaxhighlight lang="html">
 <a href="https://www.hsoub.com/en/" hreflang="en">Hsoub</a>
@@ سطر 90: / سطر 89: @@
 === <code>rel</code> ===
-تُحدِّد هذه الخاصية ما هي علاقة الرابط المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي قيمة أو قيم صالحة لتحديد العلاقة.
+تُحدِّد هذه الخاصية ما هي علاقة الرابط المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي قيمة أو قيم صالحة لتحديد العلاقة. انظر إلى صفحة «<nowiki/>[[HTML/Link Types|أنواع الروابط في HTML]]» لتفاصيل عن مختلف أنواع الروابط المسموحة كقيمة لهذه الخاصية.
-==== مثال ====
 مثال عن استخدام العلاقة <code>next</code> للإشارة إلى الفصل التالي في كتابٍ ما:<syntaxhighlight lang="html">
-<a href="/chap-7.html" rel="next">Next Chapter</a>
+<a href="/chap-7.html" rel="next">الفصل القادم من الكتاب</a>
 </syntaxhighlight>
@@ سطر 105: / سطر 103: @@
 * ‎<code>__parent</code>: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎<code>__self</code> نفسه.
 * <code>‎__top</code>: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎<code>__self</code> نفسه.
-==== مثال ====
 المثال الآتي يسمح بالضغط على صورة للانتقال إلى رابط URL المُحدَّد وذلك في لسان أو نافذة تصفح جديدة:<syntaxhighlight lang="html">
 <a href="academy.hsoub.com" target="_blank">
@@ سطر 132: / سطر 128: @@
 == أمثلة ==
 من الشائع إنشاء روابط تؤدي إلى فتح عميل البريد الإلكتروني لإرسال رسالة جديدة، وذلك عبر وضع <code><nowiki>mailto:‎</nowiki></code> قبل عنوان البريد الإلكتروني. لمزيدٍ من المعلومات حول بنية روابط URL لإرسال البريد الإلكتروني (<code>mailto</code>) فانظر إلى [http://tools.ietf.org/html/6068 RFC 6068].<syntaxhighlight lang="html">
-<a href="mailto:info@hsoub.com">Send email to Hsoub</a>
+<a href="mailto:wiki@hsoub.com">إرسال رسالة بريدية إلى موسوعة حسوب</a>
 </syntaxhighlight>
 توفير روابط إلى أرقام الهواتف سيُسهِّل عملية الاتصال للمستخدمين الذين يعرضون الصفحة على هواتفهم المحمولة أو حواسيبهم المتصلة بهاتف. لمزيدٍ من المعلومات حول بينة روابط <code>tel</code> فانظر إلى [http://tools.ietf.org/html/2806 RFC 2806] و [http://tools.ietf.org/html/2396 RFC 2396].<syntaxhighlight lang="html">
-<a href="tel:+491570156">+49 157 0156</a>
+<a href="tel:+963215260000">+963 21 5260000</a>
 </syntaxhighlight>
 إذا أردتَ السماح للمستخدمين بتنزيل محتوى أحد عناصر <code>[[HTML/canvas|<canvas>]]</code> كصورة، فيمكنك إنشاء رابط مع ضبط الخاصية <code>[[#download|download]]</code> وإضافة رابط إلى بيانات العنصر <code>canvas</code>:<syntaxhighlight lang="javascript">
 var link = document.createElement('a');
-link.textContent = 'download image';
+link.textContent = 'تنزيل الصورة';
 link.addEventListener('click', function(ev) {
@@ سطر 149: / سطر 145: @@
 </syntaxhighlight>
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><a></code> بوضع خط تحته عبر ضبط الخاصية <code>[[CSS/text-decoration|text-decoration]]</code> إلى <code>underline</code>، وتغيير المؤشر ولون النص لكن القيمة المستعملة تعتمد على المتصفح ونظام التشغيل.
 ==مصادر ومواصفات==
@@ سطر 156: / سطر 155: @@
 [[تصنيف:HTML|{{SUBPAGENAME}}]]
 [[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:Inline text semantics|{{SUBPAGENAME}}]]
+[[تصنيف:HTML Inline text semantics|{{SUBPAGENAME}}]]