حتى HTML5 تم إصداره ، تطلبت العلامة واحدة ينسب: href. لكن HTML5 تجعل هذه السمة اختيارية. عندما تكتب العلامة بدون أي سمات ، فإنها تسمى ارتباط عنصر نائب.
يبدو ارتباط العنصر النائب كالتالي:
سابق
استخدام روابط العناصر النائبة أثناء التطوير
قام كل مصمم ويب تقريبًا بإنشاء روابط عناصر نائبة في وقت أو آخر تصميم وبناء موقع على شبكة الإنترنت. قبل HTML5 ، كان المبرمج يكتب ما يلي كعنصر نائب:
نص الارتباط
مشكلة استخدام ملف رابطة هاشتاق (#) كرابط عنصر نائب هو أن الرابط قابل للنقر ، وهذا يمكن أن يسبب ارتباكًا لعملائك. وإذا نسي المطور تحديثها بعناوين URL الصحيحة ، فستعرض هذه الروابط ببساطة الصفحة نفسها التي يتصفحها المستخدم عند النقر عليها.
بدلاً من ذلك ، يجب أن تبدأ في استخدام العلامات بدون أي سمات. يمكنك تصميمها لتبدو مثل أي رابط آخر في صفحتك ، لكنها لن تكون قابلة للنقر لأنها مجرد عناصر نائبة.
استخدام روابط العناصر النائبة في المواقع الحية
روابط العناصر النائبة لها مكان في تصميم الويب لأكثر من مجرد تطوير. أحد الأماكن التي يمكن أن يتألق رابط العنصر النائب فيها هو العناصر الملاحية. في كثير من الحالات ، يكون لقوائم التنقل في مواقع الويب طريقة ما للإشارة إلى الصفحة التي تتصفحها. غالبًا ما تسمى هذه مؤشرات "أنت هنا".
تعتمد معظم المواقع على سمات معرف على العنصر الذي يحتاج إلى علامة "أنت هنا" ، لكن البعض يستخدم خاصية class أيضًا. ومع ذلك ، مهما كانت السمة التي تستخدمها ، فأنت بحاجة إلى القيام بالكثير من العمل الإضافي لكل صفحة تحتوي على التنقل فيها ، وإضافة السمة وإزالتها من العناصر الصحيحة.
باستخدام رابط العنصر النائب ، يمكنك كتابة التنقل بالطريقة التي تريدها ، ثم قم ببساطة بإزالة سمة href من الرابط المناسب عند إضافة التنقل إلى الصفحة. للتطوير ، هناك نصيحة سريعة للمساعدة وهي تخزين قائمة التنقل بأكملها كمقتطف رمز في المحرر الخاص بك ، لذلك فهي مجرد نسخ ولصق سريع. يمكنك بعد ذلك ببساطة حذف href. يمكنك أيضًا جعل نظام إدارة المحتوى الخاص بك (CMS) يقوم بنفس الشيء.
تصميم روابط العناصر النائبة
يسهل تصميم روابط العناصر النائبة وتصميمها بشكل مختلف عن الروابط الأخرى الموجودة على صفحة الويب الخاصة بك. ما عليك سوى التأكد من تصميم كل من العلامة وعلامة الرابط: على سبيل المثال:
أ {
لون احمر؛
وزن الخط: عريض ؛
زخرفة النص: لا شيء ؛
}
رابط {
لون أزرق؛
وزن الخط: عادي ؛
زخرفة النص: تسطير ؛
}
هذا CSS سيجعل روابط العناصر النائبة غامقة وحمراء ، بدون تسطير. على الرغم من ذلك ، ستكون الروابط العادية ذات وزن طبيعي ، باللون الأزرق ، ومسطرة.
تذكر إعادة تعيين أي الأنماط لا تريد أن يتم ترحيلك من العلامة. على سبيل المثال ، يتم تعيين وزن الخط إلى غامق لروابط العناصر النائبة ، لذلك بالنسبة للروابط القياسية ، سيتعين عليك تعيينه على:
وزن الخط: عادي ؛
نفس الشيء صحيح مع زخرفة النص. بإزالته باستخدام المحدد ، كان من الممكن إزالته لمُحدد الارتباط إذا لم نعده مرة أخرى.