جاري التحميل...

الإشارات المرجعية في HTML

غيّرت عناوين الروابط والأهداف كيف يُفتح الرابط. أما الإشارات المرجعية (روابط الأجزاء) فتغيّر أين تهبط في الصفحة. الدروس الطويلة وأسئلة شائعة والوثائق تحتاج غالباً قفزاً إلى «الأسعار» أو «الأسئلة الشائعة» أو «العودة للأعلى» دون تحميل مستند جديد. هذا النمط يقرن id فريداً على الوجهة مع href يبدأ بـ #.

ما هي الإشارة المرجعية داخل الصفحة

معرّف الجزء هو ما يأتي في عنوان URL بعد #. في HTML تنشئ نقطة الهبوط بإعطاء عنصر قيمة id. ثم أي رابط يكون href فيه #that-id يطلب من المتصفح التمرير إلى أول id مطابق في الصفحة (أو في الصفحة المذكورة قبل # إذا أضفت مساراً).

إجابة مباشرة

أعطِ الوجهة id، مثل <h2 id="pricing">.
اربط بـ href="#pricing".
تعني # «ابحث عن هذا id». يجب أن تكون قيم id فريدة في الصفحة. فضّل أسماء قصيرة بلا مسافات: pricing، وليس Our Pricing!!.

فهرس محتويات داخل الصفحة

قائمة تنقل صغيرة أعلى صفحة طويلة هي العرض الكلاسيكي للمبتدئين: روابط أجزاء في الأعلى، وid مطابقة على العناوين أدناه، مع رابط للعودة.

إشارات مرجعية داخل الصفحة

html

HTML Code

<nav>
<a href="#intro">Intro</a> |
<a href="#pricing">Pricing</a>
</nav>

<h2 id="intro">Intro</h2>
<p>Welcome to the guide.</p>

<h2 id="pricing">Pricing</h2>
<p>Simple plans for learners.</p>

<p><a href="#intro">Back to intro</a></p>

قراءة عيّنة الصفحة الواحدة

#intro و#pricing روابط أجزاء، وليست ملفات منفصلة
يجب أن يطابق id كل عنوان الجزء بعد #
يمكن وضع التنقل في أي مكان؛ فهارس أعلى الصفحة شائعة للمحتوى الطويل
«العودة إلى المقدمة» تُظهر أن الإشارات تعمل للأسفل وللأعلى في نفس المستند

الربط بقسم في صفحة أخرى

يمكنك دمج مسار نسبي (أو مطلق) مع جزء. يحمّل المتصفح الصفحة ثم يقفز إلى الـ id إن وُجد.

مسار مع جزء

html

HTML Code

<p>
<a href="guide.html#pricing">Open pricing in the guide</a>
</p>

متى تستخدم path#id

قفزات نفس الصفحة: #pricing يكفي
ملف HTML آخر في مشروعك: guide.html#pricing
وثائق خارجية تثق بها: عنوان URL كامل ينتهي بـ #section-name عندما يعرض ذلك الموقع معرفات ثابتة
إذا كان الـ id غائباً في صفحة الوجهة، يفتح المتصفح عادة الصفحة من الأعلى ويتجاهل الجزء غير المعروف.

عادات تسمية الـ id

قيمة id واحدة لكل صفحة — لا تكرّر أبداً
ابدأ بحرف متى أمكن؛ تجنّب المسافات وعلامات الترقيم الغريبة
استخدم شرطات للأسماء متعددة الكلمات: getting-started
أبقِ الأسماء مستقرة إذا ستربط صفحات أخرى بها بعمق
الـ id للآلات وعناوين URL؛ نص العنوان الظاهر يمكن أن يبقى ودّياً ومختلفاً عن سلسلة الـ id.

الإشارات المرجعية مقابل «إشارات» المتصفح

يقول الناس أيضاً «إشارة مرجعية» لحفظ صفحة في قائمة المفضّلات بالمتصفح. هذا الدرس يعني روابط الأجزاء داخل الصفحة. مفضّلات المتصفح تستخدم عنوان المستند (وأحياناً جزءاً إذا نسخته). نفس الكلمة، ومهام يومية مختلفة — أبقِ معنى HTML واضحاً عندما تعلّم الآخرين.

ملاحظات إمكانية الوصول وتجربة الاستخدام

روابط القفز تساعد مستخدمي لوحة المفاتيح وقارئات الشاشة على التنقل في الصفحات الطويلة عندما تكون الوجهات معالم حقيقية (عناوين، أقسام). لا تُكثر عشرات الـ id الفارغة. تأكد أن الهدف ظاهر بعد القفز — الرؤوس اللاصقة قد تغطي العناوين لاحقاً عند تعلّم CSS؛ الآن تحقّق أن القسم الصحيح يظهر.

تمرّن في محرّرك

أنشئ عنوانين بقيم id مختلفة.
فوقهما أضف روابط أجزاء باستخدام href="#…".
انقر كل رابط وتأكد أن الصفحة تقفز إلى العنوان المطابق.
أضف رابط «العودة للأعلى» يشير إلى id على أول عنوان أو معلم أعلى الصفحة.
من ملف ثانٍ اربط بـ other.html#intro وتأكد من القفز بين الصفحات.
كرّر مؤقتاً قيمة id، راقب الارتباك، ثم أصلح التفرّد.

أخطاء سهلة

استخدام نفس id مرتين في صفحة واحدة
نسيان # في href فيبحث المتصفح عن اسم ملف بدل ذلك
وضع مسافات أو رموز غريبة في قيم id
الربط إلى id غير موجود
الخلط بين إشارات الأجزاء وtarget="_blank" (مهام مختلفة)
توقّع أن #pricing وحده يفتح ملفاً آخر دون مسار

ملخص

إشارات نفس الصفحة تستخدم id مع href="#id"
يجب أن تكون قيم id فريدة وقصيرة وخالية من المسافات
ممتازة للصفحات الطويلة وفهارس المحتويات الصغيرة
استخدم page.html#id للقفز إلى قسم في صفحة أخرى
الأجزاء المفقودة تفشل عادة بهدوء بالبقاء في أعلى الصفحة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة