<link>

وسم ربط الموارد <link>

وسم link يربط الصفحة بموارد خارجية من داخل head — ملفات CSS أولًا، ثم الأيقونات وcanonical والخطوط.

لا تخلطه بوسم الروابط a: هذا وسم بنيوي صامت في head يخبر المتصفح «هذه الصفحة تعتمد على المورد الفلاني». استخدامه الأشهر إطلاقًا ربط ملفات الأنماط rel="stylesheet"، يليه أيقونة التبويب rel="icon"، وإشارة SEO المهمة rel="canonical" التي تحدد النسخة الأصلية للصفحة.

ذاتي الإغلاق، وقيمة rel هي التي تحدد نوع العلاقة بالكامل.

الصياغة

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<p style="background:#ede9fe; padding:12px; border-radius:8px">
  وسم link يعيش في &lt;head&gt; — به يُربط ملف الـ CSS الذي لوّن هذا الصندوق،
  وأيقونة التبويب أعلاه، ورابط canonical الذي يحمي ترتيبك في Google.
</p>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
rel	نوع العلاقة: stylesheet، icon، canonical، preload…
href	مسار المورد المربوط
as (مع preload)	نوع المورد المسبق تحميله: font، image، style…

💡 نصائح عملية

canonical على كل صفحة يحمي من مشاكل المحتوى المكرر في SEO
خط رئيسي بطيء الظهور؟ preload له مع crossorigin

⚠️ أخطاء شائعة

الخلط بين link (موارد، في head) وa (روابط تنقل، في body)
تكديس عشرات ملفات CSS المنفصلة — كل واحد طلب شبكة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs