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