الروابط التشعبية: العنصر الذي جعل الويب نسيجًا

وصلتَ إلى هذه الصفحة على الأرجح بنقرةٍ على رابط. ذلك الرابط هو أبسط عنصرٍ في الويب وأعمقها أثرًا. بل إن «الويب» (Web)، أي «الشبكة العنكبوتية»، حمل هذا الاسم لأن الروابط تصل صفحاته المتناثرة بعضها ببعضٍ في كيانٍ واحدٍ متّصل. في المقالات السابقة عرفتَ الصفحة والموقع، ورأيتَ كيف يعرضهما المتصفّح؛ وفي هذا المقال يأتي دور العنصر الذي يربطها كلّها: الرابط التشعّبيّ.

يعرض هذا المقال كيف وُلدت فكرة الرابط وغيّرت العالم، وممّ يتكوّن الرابط في شيفرة HTML، وإلى أين يمكن أن يشير، وكيف تكتب رابطًا جيّدًا يخدم الإنسان والآلة معًا (خاصّةً ذوي الإعاقة)، وأنواعه واستعمالاته. هو عنصرٌ تظنّه بديهيًّا، لكنّ إتقانه فنٌّ يفرّق المواقع المتقنة عن المهملة.

الفكرة التي صنعت الويب

قبل الويب، كانت المستندات الرقمية جزرًا معزولة: لتنتقل من معلومةٍ إلى أخرى ذات صلة، تبحث عنها من جديد. حلم رجلٌ اسمه فانيفار بوش سنة 1945، في مقالٍ شهيرٍ بعنوان «As We May Think»، بآلةٍ تربط المعلومات بعضها ببعضٍ كما يربط الذهن البشريّ أفكاره.^[1] ثمّ صاغ تيد نلسون سنة 1965 مصطلح «النصّ التشعّبيّ» (Hypertext): كتابةٌ غير خطّيّة، يتنقّل فيها القارئ بروابط يختارها هو. وفي 1968 عرض دوغلاس إنغلبارت في تجربةٍ شهيرة (سُمّيت لاحقًا «أمّ العروض») روابط تشعّبيّةً تعمل فعلًا، مع الفأرة، قبل عقدين من الويب. فالفكرة اختمرت طويلًا قبل أن تتحقّق.

لكنّ من حوّل الفكرة إلى واقعٍ هو تيم بيرنرز لي. عبقريّته لم تكن في اختراع النصّ التشعّبيّ، بل في زواجه بالإنترنت: ربط المستندات لا داخل جهازٍ واحد، بل عبر شبكةٍ عالميّةٍ كاملة. ومن هذا الزواج وُلدت «الشبكة العنكبوتية العالمية» سنة 1989 في مختبر CERN (كما فصّلتُ في مقال تاريخ الإنترنت).^[5] فالرابط ليس ميزةً أُضيفت إلى الويب، بل هو الفكرة المؤسِّسة التي جعلته «ويبًا» أصلًا. كل بحثٍ تجريه، وكل تنقّلٍ بين صفحتين، أثرٌ مباشرٌ لتلك الفكرة.

تشريح الرابط في HTML

في شيفرة HTML، يُصنَع الرابط بعنصرٍ واحدٍ هو وسم «المرساة» (a).^[2] أبسط صوره:

<a href="https://example.com">زُر هذا الموقع</a>

وله جزآن أساسيّان. الأول سمة href (اختصار Hypertext REFerence)، وهي الوجهة: إلى أين ينقلك الرابط. والثاني «النصّ الظاهر» (Anchor Text)، وهو الكلمات التي تراها وتنقر عليها («زُر هذا الموقع» في المثال). فالـhref يحدّد الوجهة، والنصّ يصف للزائر ما ينتظره عندها. وعلى بساطة هذا العنصر، فإن كل تنقّلٍ على الويب يقوم عليه.

إلى أين يشير الرابط

قيمة الـhref ليست دائمًا عنوان موقعٍ كامل. فهي على أنواع. قد تكون «رابطًا مطلقًا» يحمل العنوان كاملًا (https://example.com/page) للانتقال إلى موقعٍ آخر. وقد تكون «رابطًا نسبيًّا» مختصرًا (/about) للتنقّل داخل موقعك نفسه، يكمله المتصفّح بالنطاق الحاليّ (وقد فصّلتُ الفرق في مقال معرّف الموارد الموحّد). وثمّة وجهاتٌ خاصّة: رابطٌ يبدأ بـ# يقفز إلى موضعٍ داخل الصفحة نفسها، ورابط mailto: يفتح برنامج البريد، ورابط tel: يبدأ اتصالًا على الهاتف. هكذا يخدم العنصر نفسه أغراضًا متعدّدة بتغيير وجهته فقط. وبسمة download يتحوّل الرابط من «انتقالٍ» إلى «تنزيلٍ»: ينقر الزائر فيُحفَظ الملفّ بدل أن يُفتَح في المتصفّح. وكثيرًا ما تحمل وجهة الرابط معلوماتٍ إضافيّةً في «معاملات الاستعلام» (بعد علامة الاستفهام)، تستعملها الحملات التسويقيّة لتتبّع مصدر الزائر (تُعرف بوسوم UTM)، فيعرف الموقع أنك جئت من منشورٍ بعينه. فالرابط قد يحمل، إلى جانب وجهته، رسالةً عن مَن عبره ومن أين. وهذه أنواع الوجهات مجموعةً في أمثلةٍ تراها بعينك:

<a href="https://example.com/page">رابط مطلق إلى موقع آخر</a>
<a href="/about">رابط نسبيّ داخل موقعك</a>
<a href="#section-2">قفزة إلى موضع في الصفحة</a>
<a href="mailto:[email protected]">افتح البريد</a>
<a href="tel:+9647700000000">اتصل</a>
<a href="cv.pdf" download>حمّل الملفّ</a>

سمات تضبط سلوك الرابط

إلى جانب الوجهة، تضبط سماتٌ إضافيّة كيف يعمل الرابط. سمة target تحدّد أين يُفتَح: في التبويب نفسه (الافتراضيّ)، أو في تبويبٍ جديدٍ بقيمة _blank. ومتى تفتح في تبويبٍ جديد؟ مسألةٌ مختلَفٌ فيها: الفتح القسريّ ينتزع من المستخدم قراره (وزرّ الرجوع)، فالأصل تركه يقرّر؛ ويُستثنى من ذلك ما يقطع عملًا جاريًا (نموذجٌ يملؤه)، وحينها يُنبَّه المستخدم أنه سيُفتَح في تبويبٍ جديد. ومتى فتحتَ في تبويبٍ جديد، أضِف noopener دائمًا. وسمة rel تصف علاقتك بالوجهة، ولها قيمٌ مهمّة:^[3]

• noopener: قيمةٌ أمنيّةٌ مهمّة عند فتح رابطٍ في تبويبٍ جديد، تمنع الصفحة الجديدة من التحكّم بصفحتك الأصلية. استعملها دائمًا مع الروابط الخارجية التي تفتحها في تبويبٍ جديد.
• noreferrer: تمنع تسريب معلومة أنك جئت من صفحتك إلى الموقع الهدف.
• nofollow: إشارةٌ لمحرّكات البحث ألّا تَعُدّ هذا الرابط «توصية»، تُستعمل للروابط التي لا تضمنها. وهذا بابٌ من أبواب السيو خارج الصفحة، مبسوطٌ في مقالاته.

فالنمط الموصى به لرابطٍ خارجيٍّ يُفتَح في تبويبٍ جديدٍ يجمع هذا كلّه:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  موقع خارجيّ
</a>

الرابط الجيّد: واضحٌ وصادق

أهمّ ما يميّز الرابط الجيّد نصُّه الظاهر. والقاعدة الذهبية: اجعل النصّ وصفيًّا يخبر القارئ بوجهته، وتجنّب «اضغط هنا» و«المزيد».^[4] فرابطٌ نصّه «دليل جافاسكربت للمبتدئين» يخبرك إلى أين يأخذك، أمّا «اضغط هنا» فلا يخبر بشيء. والسبب أعمق من الذوق: تجربة المستخدم تتحسّن حين يعرف القارئ وجهته قبل النقر، فلا يخلِف الرابط وعده.

والصدق ركنٌ ثانٍ: ينبغي أن يفي الرابط بما يَعِد به نصّه. فإن كتبتَ «حمّل الكتاب» فأخذ الزائر إلى صفحة اشتراكٍ بدل التحميل، خُنتَ توقّعه فأفقدته الثقة. ويفيد أن يكون الرابط في سياقه طبيعيًّا، منسوجًا في الجملة لا مقحمًا. هذه ليست تفاصيل تجميليّة، بل جوهر تجربةٍ يحترم فيها الموقعُ زائرَه.

ومن الحكمة ألّا تُفرِط في الروابط. صفحةٌ كلّ سطرٍ فيها رابطٌ تُربك القارئ وتُضعف قيمة كل رابطٍ على حدة، تمامًا كنصٍّ كلّه مظلّل. اربط حين يضيف الرابط قيمةً حقيقيّة، ودع النصّ يتنفّس. فالروابط توابلُ لا طعام.

واحترم أعراف الروابط البصريّة. فقد تعلّم الناس عبر عقودٍ أن النصّ المختلف لونًا والمسطّر رابطٌ يُنقَر. حين تجعل نصًّا عاديًّا يبدو كرابطٍ فتخدع الزائر، أو تجعل رابطًا يبدو كنصٍّ عاديٍّ فلا يكتشفه، تكسر هذا العرف فتربكه. ويفيد أن يميّز الرابط الخارجيّ بأيقونةٍ صغيرةٍ تنبّه أنه يغادر موقعك. الوضوح هنا احترامٌ لخبرة المستخدم المتراكمة، لا قيدٌ على إبداعك.

الروابط وإتاحة الوصول: لماذا «اضغط هنا» خطأ

هنا يتّضح السبب الأعمق لقاعدة النصّ الوصفيّ، وهو ما يغفله أكثر الكتّاب. الكفيف يتصفّح بـ«قارئ شاشة»، وكثيرًا ما يتنقّل في الصفحة بالقفز من رابطٍ إلى رابط، فيسمع نصوص الروابط مجرّدةً عن سياقها.^[4] تخيّل أن تسمع قائمةً تقول: «اضغط هنا، اضغط هنا، اضغط هنا». بلا معنًى. أمّا لو سمع «دليل جافاسكربت، تحميل الكتاب، صفحة التواصل»، لعرف وجهة كلّ رابطٍ وحده.

فالنصّ الوصفيّ ليس تحسينًا للأصحّاء فقط، بل شرطُ استعمالٍ للكفيف. والقاعدة الجامعة: ينبغي أن يكون نصّ الرابط مفهومًا بمعزلٍ عن الجملة التي حوله. وحين يضطرّ التصميم إلى نصٍّ مقتضبٍ كزرّ «اقرأ المزيد»، تُضاف سمةٌ خفيّة (مثل aria-label) تمنح قارئ الشاشة وصفًا كاملًا لا يراه المبصر. هكذا يُكتَب الرابط للجميع، لا لمن يشبهك وحدك.

ويتّصل بهذا تمييزٌ يخطئ فيه كثيرٌ من المبتدئين: الفرق بين الرابط والزرّ. الرابط (a) للانتقال إلى مكان، والزرّ (button) لتنفيذ فعلٍ في المكان نفسه (إرسال نموذج، فتح قائمة). استعمالُ أحدهما مكان الآخر يكسر أمورًا كثيرة: المتصفّح يتيح للرابط ما لا يتيحه للزرّ (الفتح في تبويبٍ جديد، النسخ)، وقارئ الشاشة يعلن «رابط» أو «زرّ» فيتوقّع المستخدم سلوكًا بعينه. فاختيار العنصر الصحيح ليس شكليًّا، بل جزءٌ من صحّة الصفحة ومعناها.

وللروابط «حالاتٌ» بصريّة يضبطها CSS وتخدم المستخدم: لونٌ للرابط غير المزور، وآخر للمزور (فيعرف الزائر أين ذهب من قبل)، وتغيّرٌ عند المرور بالفأرة. وأهمّها لمن لا يستعمل الفأرة «حالة التركيز»: إطارٌ يحيط بالرابط المحدّد حين يتنقّل المستخدم بمفتاح Tab، ليرى أين هو. فالكثيرون يتصفّحون بلوحة المفاتيح وحدها (تنقّلًا بـTab، وتفعيلًا بـEnter)، وحذفُ مؤشّر التركيز «لأنه قبيح» خطأٌ يعمي هؤلاء عن موضعهم في الصفحة.

وتُضبَط هذه الحالات في CSS بـ«أصنافٍ زائفة» تستهدف كل حالةٍ على حدة، فتتحكّم في مظهر الرابط في كلٍّ منها:

a:link    { color: #1a5; }              /* رابط لم يُزَر بعد */
a:visited { color: #818; }              /* رابط زاره المستخدم */
a:hover   { text-decoration: underline; } /* عند المرور بالفأرة */
a:focus   { outline: 2px solid #1a5; }  /* عند التركيز بلوحة المفاتيح */

لاحظ أن :focus يضع إطارًا واضحًا بدل أن يحذفه؛ هذا هو الفرق العمليّ بين موقعٍ يحترم متصفّح لوحة المفاتيح وموقعٍ يتركه تائهًا.

عائلتا الروابط: داخليّة وخارجيّة

تنقسم الروابط بحسب وجهتها قسمين. «الروابط الداخلية» تصل بين صفحات موقعك نفسه، وهي شبكته العصبيّة: ترشد الزائر في تنقّله، وتساعده على اكتشاف محتواك، وتوضّح بنية الموقع. و«الروابط الخارجية» تصل من موقعك إلى مواقع أخرى («صادرة»)، أو من مواقع أخرى إليك («واردة»). وهذه الأخيرة، حين تأتيك من موقعٍ موثوق، شهادة ثقةٍ في محتواك.

وللروابط الداخلية وظيفةٌ يغفلها كثيرون: ألّا تترك «صفحةً يتيمة». فالصفحة التي لا يصل إليها رابطٌ من موقعك تكاد تكون غير موجودة: لا يجدها الزائر متنقّلًا، ولا تكتشفها زواحف البحث التي تتبع الروابط. القاعدة: كل صفحةٍ مهمّة ينبغي أن يصلها رابطٌ واحدٌ على الأقلّ من صفحةٍ أخرى. بنية روابطك الداخلية هي التي تحدّد ما يُكتَشَف من موقعك فعلًا.

وحين تجتمع روابط داخلية في مجموعةٍ تنقّل، تُوضَع في عنصر HTML خاصٍّ هو «شريط التنقّل» (nav)، الذي يخبر المتصفّح وقارئ الشاشة أن هذه مجموعة تنقّلٍ رئيسة لا مجرّد روابط متناثرة. وحسن تنظيم هذه القائمة (وضوح تسمياتها، وترتيبها المنطقيّ، وعدم تضخّمها) جزءٌ من تجربة الموقع، لأنها أوّل ما يستعمله الزائر ليجد طريقه. فالتنقّل الجيّد لا يُلاحَظ، والسيّئ يُشعِر الزائر بالتيه فيغادر.

ومن أنماط الروابط الداخلية المفيدة «مسار التنقّل» (Breadcrumbs): سلسلة روابطٍ صغيرةٍ أعلى الصفحة تبيّن للزائر موضعه في بنية الموقع (مثل «الرئيسية ← تطوير الويب ← هذا المقال»)، فينقر أيّ مستوًى ليصعد إليه. وهو يخدم أمرين معًا: يريح الزائر فيعرف أين هو وكيف يرجع، ويوضّح لمحرّكات البحث هرميّة موقعك. وهو مثالٌ بديعٌ على أن ترتيب الروابط نفسه رسالةٌ عن بنية المحتوى، لا مجرّد وسيلة تنقّل.

ولهذه الروابط بُعدٌ كبيرٌ في تحسين محرّكات البحث: فمحرّكات البحث تقرأ الروابط لتفهم بنية موقعك وتقدّر قيمة صفحاته، وتعدّ الروابط الواردة من غيرك مؤشّر ثقة. لكنّ هذا عالمٌ قائمٌ بذاته، تجده مبسوطًا في سلسلة السيو (في مقالات السيو الداخليّ والخارجيّ وكيف تعمل محرّكات البحث)، فلا حاجة إلى إطالته هنا. يكفي أن تعرف أن طريقة ربطك صفحاتِك ليست تفصيلًا، بل رسالةٌ تقرؤها محرّكات البحث.

أبعد من النصّ: روابط الصور والقفز

الرابط لا يقتصر على النصّ. يمكن أن تكون الصورة نفسها رابطًا (بوضع وسم الصورة داخل وسم المرساة)، وهو ما تراه في الشعارات التي تعيدك إلى الصفحة الرئيسة. وحين تجعل صورةً رابطًا، يبقى «النصّ البديل» للصورة هو ما يقرؤه قارئ الشاشة بدل النصّ الظاهر، فاحرص أن يصف الوجهة. وثمّة «روابط القفز» التي تشير بـ# إلى موضعٍ في الصفحة نفسها، تُستعمل في فهارس المقالات الطويلة وفي زرّ «العودة إلى الأعلى»، فتنقلك فورًا دون تحميل صفحةٍ جديدة. ومن أهمّ تطبيقاتها لإتاحة الوصول «رابط التخطّي»: رابطٌ مخفيٌّ في رأس الصفحة يقول «تخطَّ إلى المحتوى»، يتيح لمن يتصفّح بلوحة المفاتيح أن يقفز قائمة التنقّل الطويلة إلى صلب المحتوى مباشرةً، بدل أن يمرّ على عشرات الروابط في كل صفحة.

الرابط في الويب الحديث

في تطبيقات الويب الحديثة (تطبيقات الصفحة الواحدة التي مرّت بك)، قد لا ينقلك النقر إلى صفحةٍ جديدةٍ من الخادم، بل يحدّث المحتوى داخل الصفحة فورًا عبر «توجيهٍ» في المتصفّح. ومع ذلك يبقى مفهوم الرابط والعنوان قائمًا تحت السطح: لكل «شاشةٍ» عنوانها الذي يمكن نسخه ومشاركته والعودة إليه. فمهما تطوّرت التقنية، تبقى الفكرة الأصلية (عنوانٌ تصل إليه برابط) أساس الويب. ومن يتجاهلها فيبني تطبيقًا بلا عناوين حقيقيّة يكسر أبسط توقّعات المستخدم: أن يحفظ رابطًا ويعود إليه. وهنا يظهر «الربط العميق»: رابطٌ يأخذك مباشرةً إلى محتوًى بعينه في عمق الموقع أو التطبيق، لا إلى صفحته الرئيسة. كل رابطٍ تشاركه لمقالٍ أو منتجٍ بعينه ربطٌ عميق، وهو ما يجعل محتوى الويب قابلًا للمشاركة والعودة إليه بدقّة، لا مجرّد «افتح الموقع وابحث بنفسك».

وماذا يحدث تقنيًّا حين تنقر رابطًا؟ يعترض المتصفّح النقرة، ويقرأ قيمة href، ثمّ يشرع في طلب الصفحة الجديدة (أو يحدّث المحتوى داخليًّا في تطبيقات الصفحة الواحدة). ويسجّل الوجهة في سجلّ التصفّح، فيتيح لك زرّ الرجوع العودة. هذا التناغم بين الرابط وسجلّ المتصفّح هو ما يجعل التنقّل في الويب سلسًا وقابلًا للتراجع.

وللروابط عمرٌ، وكثيرٌ منها يموت. «تعفّن الروابط» (Link Rot) ظاهرةٌ حقيقية: مع الزمن تختفي مواقع وتتغيّر عناوين، فتنكسر الروابط الصادرة إلى صفحة «404 غير موجود». وهذا يضرّ الزائر الذي يصطدم بطريقٍ مسدود، ويضرّ سمعة موقعك ومحرّكات البحث تلاحظ ذلك. ولهذا تُراجَع الروابط دوريًّا في المواقع الجادّة، وتُصلَح أو تُحدَّث المكسورة. الموقع المهمَل تتراكم فيه الروابط الميتة كأعشابٍ ضارّة.

وحين تشارك رابطًا في محادثةٍ أو منصّةٍ اجتماعية، فيظهر بعنوانٍ وصورةٍ ووصفٍ بدل نصٍّ أصمّ، فذلك بفضل «معاينة الرابط»: تجلب المنصّةُ الصفحةَ وتقرأ وسومًا خاصّةً فيها (تُعرف بـOpen Graph) صمّمها صاحب الموقع لتحديد كيف يظهر رابطه. فضبط هذه الوسوم جزءٌ من إتقان الروابط، إذ يقرّر الانطباع الأوّل الذي يراه الناس قبل أن ينقروا.

من فهم الويب إلى بنائه

هذا هو الرابط التشعّبيّ: عنصرٌ من سطرٍ واحدٍ في HTML، لكنه الفكرة التي جعلت المستندات المعزولة «ويبًا»، وهو ما يربط صفحاتك ويرشد زوّارك ويتحدّث إلى محرّكات البحث، ويُكتَب جيّدًا حين يكون واضحًا صادقًا متاحًا للجميع. بفهمه تكتمل صورتك عمّا يتكوّن منه الويب. ولعلّ أعمق ما في الرابط أنه يجسّد روح الويب الأصلية: أن يستطيع أيّ أحدٍ أن يربط أيّ شيءٍ بأيّ شيء، دون إذنٍ من أحد. هذه الحرّية البسيطة في الربط هي ما بنى أكبر مستودع معرفةٍ في التاريخ، بنته ملايين الأيدي رابطًا رابطًا.

وبهذا تكتمل صورة الويب عندك: ما الصفحة والموقع، وكيف يعرضهما المتصفّح، وكيف يربطهما الرابط. بقي أن تتحوّل من الفهم إلى البناء، وأوّل خطوةٍ تجهيز الأدوات التي تبني بها. وهذا موضوع المقال التالي: «تجهيز بيئة العمل لمطوّر الويب».

المصادر

1. Wikipedia: تاريخ النصّ التشعّبيّ. من ميمكس بوش إلى مصطلح نلسون إلى ويب بيرنرز لي.
2. MDN: عنصر المرساة (a). بناء الرابط وسمة href.
3. MDN: سمة rel. قيم noopener وnoreferrer وnofollow.
4. WebAIM/Section508: نصّ الرابط الوصفيّ وإتاحة الوصول. لماذا «اضغط هنا» خطأ لقارئات الشاشة.
5. CERN: ميلاد الويب. كيف ربط بيرنرز لي النصّ التشعّبيّ بالإنترنت.