HTML link Tag

HTML link Tag – يحدد الوسم <link> العلاقة بين المستند الحالي ومصدر خارجي.

HTML link Tag

يتم استخدام الوسم<link> بشكل شائع للربط بأوراق الأنماط style sheets الخارجية.

مثال للتوضيح

ربط ملف CSS بإستخدام الوسم <link>:

This text styled from external stylesheet “style.css”.

<!DOCTYPE html>
<html>
    <head>
        <title>Link Example</title>
        <link rel="stylesheet" href="/assets/css/style.css">
    </head>
    <body>

        <p class="text_example">This text styled from external stylesheet "style.css".</p>

    </body>
</html>

This text styled from external stylesheet “style.css”.

لربط ورقة أنماط خارجية style sheet ، يجب تضمين الوسم <link> داخل الوسم <head>.

الوسم <link> هو عنصر فارغ (أى بدون قفلة وسم) ويحتوي على سمات فقط.

يمكنك إستخدم الوسم <link> أيضًا لإنشاء أيقونات الموقع (مثل أيقونات نمط الـ “favicon“):

<link rel="icon" href="favicon.ico">

السمات المحددة – Specific Attributes

يدعم الوسم <link> هذه السمات:

السمة	القيمة	الوصف
as	audio video track document embed fetch image font script style object worker	يحدد نوع المحتوى الذي يتم تحميله بواسطة <link>، لمطابقة الطلب. تُستخدم فقط مع “rel = “preload أو “rel = “preeletch.
crossorigin	anonymous use-credentials	يحدد كيفية معالجة العنصر لطلبات الـ cross-origin.
href	URL	يحدد عنوان URL للمصدر المرتبط، يمكن أن يكون العنوان absolute أو relative.
hreflang	language-code	يحدد لغة النص للمصدر المرتبط.
media	media_query	يحدد الوسائط التي ينطبق عليها المصدر المرتبط.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	يحدد المرجع الذي سيتم استخدامه عند جلب المصدر.
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	يحدد العلاقة بين المستند الحالية والمستند المرتبط.
sizes	HeightxWidth any	يحدد أحجام الرموز للوسائط المرئية الموجودة في المصدر. تستخدم فقط مع “rel = “icon.
title		عند استخدام هذه السمة فإنه يحدد ورقة أنماط stylesheet لـ preferred أو لـ alternate. قد يؤدي استخدام هذه السمة بشكل غير صحيح إلى تجاهل ورقة الأنماط stylesheet.
type	media_type	يحدد نوع الوسائط للمستند المرتبط.