يُعرِّف العنصر <area> منطقةً في خريطة لصورة، ويمكن أن ترتبط تلك المنطقة (اختياريًا) مع رابط فائق. لا يمكن استخدام هذا العنصر إلا ضمن عنصر <map>.
لمشاهدة مثال متكامل عن استخدام العنصر <area>، راجع صفحة العنصر <map>.
| تصنيفات المحتوى | عنصر تنظيمي أو عنصر عادي. |
|---|---|
| المحتوى المسموح | لا يوجد، فهو عنصرٌ فارغ. |
| الوسم المختصر | يجب أن يكون وسم البداية موجودًا، ويجب أن يُحذَف وسم النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى العادي؛ لكن يجب أن يكون العنصر <area> متواجدًا ضمن عنصر <map> لكن لا يُشترَط أن يكون الأب المباشر له. |
| واجهة DOM | HTMLAreaElement |
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
يمكن استخدام الخاصيات العامة في هذا العنصر.
altالنص البديل الذي سيظهر في المتصفحات التي لا تتمكن من عرض الصور. يجب أن يكون النص كافيًا لكي يمثِّل خيارًا واضحًا للمستخدم كما لو أنَّ الصورة معروضة.
كانت هذه الخاصية مطلوبةً في HTML 4 لكن يمكن أن تكون قيمتها فارغةً ("")؛ لكن في HTML5 أصبحت هذه الخاصية مطلوبة إذا اُستخدمت الخاصية href.
مثال عن استخدام الخاصية alt مع العنصر <area>:
<area shape="rect" coords="0,0,100,100" href="sun.html" alt="Sun">
coordsمجموعة من القيم التي تُحدِّد إحداثيات المنطقة.
عدد ومعنى القيم المذكورة في هذه الخاصية تختلف تبعًا لقيمة الخاصية shape:
shape تساوي rect (أي مستطيل rectangle)، فقيمة الخاصية coords يجب أن تكون زوجين من إحداثيات x, y. أوّل زوج من الإحداثيات هو لتمثيل الزاوية العلوية اليسرى، بينما الزوج الثاني للزاوية السفلية اليمنى.shape تساوي circle (أي دائرة)، فقيمة الخاصية coords يجب أن تكون على شكل x, y, r، حيث تكون x, y هي إحداثيات مركز الدائرة، و r هو نصف قطرها.shape تساوي poly (أي مضلع polygon)، فقيمة الخاصية coords يجب أن تكون سلسلة من أزواج الإحداثيات x, y مثل x1, y2, x2, y2, x3, y3 وهلّم جرًا.كان يُسمَح في HTML 4 أن تكون القيم بواحدة البكسل أو نسبة مئوية (%)؛ لكن أصبحت القيم في HTML5 بالبكسل دومًا.
مثال عن عنصر <area> على شكل مستطيل ودائرة:
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
downloadتُشير هذه الخاصية -إن وجدت- أنَّ المطوِّر قد وضع الرابط لتنزيل مورد ما. يرجى الرجوع إلى صفحة العنصر لشرحٍ تفصيلي عن الخاصية download.
hrefتُحدِّد هذه الخاصية ما هو رابط URL الهدف، ويجب أن تكون القيمة هي رابط URL صحيح.
كان يجب أن تتوافر هذه الخاصية أو خاصية nohref في HTML 4، لكن هذا الأمر تغيّر في HTML5 وأصبح من الممكن حذف هذه الخاصية إن لم يكن يُمثِّل العنصر <area> رابطًا فائقًا.
hreflangتُشير هذه الخاصية إلى اللغة (البشرية) للرابط المُشار إليه في هذا العنصر، وهذه الخاصية لا وظيفة لها وإنما تستعمل للتنظيم. القيم المسموحة لهذه الخاصية مُعرَّفة في BCP47.
لا تستعمل هذه الخاصية إلا إذا كانت الخاصية href متوافرة.
nameتعريف اسم للمنطقة المُعرَّفة من العنصر <area>، هذه الخاصية موجودة في HTML 4 وأصبحت مهملة.
mediaتعطي هذه الخاصية فكرةً عن كيفية تصميم المورد المُشار إليه، فيمكن أن يكون print (أي موجهًا للطباعة) أو screen (أي موجهًا للشاشات الإلكترونية)؛ وإذا لم تُحدَّد قيمة لهذه الخاصية فقيمتها الافتراضية هي all.
لا تستعمل هذه الخاصية إلا إذا كانت الخاصية href موجودة.
هذه الخاصية جديدة في HTML5 ولم تكن موجودةً من قبل.
nohrefتستعمل هذه الخاصية لكي تُشير إلى أنَّ المنطقة المُعرَّفة عبر العنصر <area> لا تمثل رابطًا فائقًا. لا يجوز الجمع بين هذه الخاصية والخاصية href.
ملاحظة: هذه الخاصية أصبحت مهملةً في HTML5، وكل ما يلزم للتصريح أنَّ العنصر لا يمثِّل رابطًا فائقًا هو حذف الخاصية href.
relأضيفت هذه الخاصية في HTML5، وتُحدِّد الخاصية ما هي علاقة الرابط المشار إليه مع المستند الحالي، وتأخذ هذه الخاصية أي قيمة أو قيم صالحة لتحديد العلاقة.
لا توجد علاقة افتراضية إن لم تُحدَّد علاقة عبر هذه الخاصية، ولا يجوز استخدام هذه الخاصية إن لم تُستعمَل الخاصية href.
shapeتُحدَّد هذه الخاصية ما هو الشكل المرتبط بالعنصر <area>.
مواصفة HTML5 تسمح باستخدام القيم الآتية:
rect، لتعريف مستطيل (rectangle)circle، لتعريف دائرةpoly, لتعريف مضلّع (polygon)default، للإشارة إلى كامل الخريطة.لكن تدعم العديد من المتصفحات استخدام الكلمات المحجوزة circ و polygon و rectangle مع هذه الخاصية.
targetكلمة محجوزة تشير إلى المكان الافتراضي لعرض المورد الهدف عندما تُسبِّب الروابط بالانتقال إلى صفحةٍ أخرى.
الكلمات المحجوزة التالية لها معانٍ خاصة:
__self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تُحدَّد قيمةٌ أخرى.__blank: عرض الصفحة في نافذة جديدة.__parent: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة __self نفسه.__top: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة __self نفسه.typeهذه القيمة تُحدَّد ما هو نوع MIME للرابط الهدف، وهذه القيمة تُوفَّر لإعطاء المتصفح فكرة عن المحتوى. هذه الخاصية مهملة في HTML5.
تخفي أغلبية المتصفحات العنصر <area> بضبط الخاصية display إلى none:
area {
display: none;
}
