تگ link در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ link در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

در مطلب آموزش تگ head در مورد اهمیت ویژه این تگ توضیح دادیم. در این پست می خواهیم تگی به نام link را به شما معرفی کنیم که کاربرد فراوانی در تنظیمات و نمایش وبسایت دارد.

تگ link چیست؟

تگ link یکی از تگ هایی است که درون تگ head قرار می گیرد و لینکی حاوی فایل CSS و فاوآیکون را فراخوانی می کند.

ساختار این تگ به صورت زیر است:

<link rel="stylesheet" href="style.css">

این تگ نیاز به بستن ندارد.

صفات تگ link

در این بخش با صفات تگ link آشنا خواهید شد.

صفت href

این صفت آدرس موقعیت فایل مورد نظر را مشخص می کند. مانند: فایل CSS یا فاوآیکون

<link href="URL">

صفت hreflang

این صفت زبان متن لینک مورد نظر را مشخص می کند. به عنوان مثال اگر زبان انگلیسی باشد مقدار آن باید en باشد.

<link hreflang="en">

صفت media

این صفت، صفحه را متناسب با دستگاه بهینه سازی می کند.

<link media="Value">

صفت referrerpolicy

مشخص می کند کدام اطلاعات ارجاع دهنده همراه با لینک ارسال شود.

<link referrerpolicy="no-referrer-when-downgrade|no-referrer|same-origin|strict-origin-when-cross-origin|origin|origin-when-cross-origin|unsafe-url">

no-referrer-when-downgrade

اطلاعات ارجاع دهنده را زمانی که مبدا HTTPS و مقصد HTTP است ارسال نخواهد کرد. اگر مبدا HTTP باشد ارسال اطلاعات انجام خواهد شد. (پیش فرض)

no-referrer

هیچ اطلاعاتی ارسال نمی شود.

same-origin

در صورتی که منبع یکسان باشد درخواست انجام می شود.

strict-origin-when-cross-origin

فقط برای درخواست هایی با منبع یکسان ارسال خواهد شد. اما در صورتی که مبدا HTTPS و مقصد HTTP باشد هیچ اطلاعاتی ارسال نمی شود.

origin

مبدا اصلی را ارسال می کند.

origin-when-cross-origin

فقط برای درخواست هایی با منبع یکسان ارسال خواهد شد. اما در صورتی که درخواست متقابل باشند مبدا اصلی را ارسال خواهد کرد.

unsafe-url

اطلاعات به صورت کامل ارسال خواهد شد.

صفت rel

رابطه صفحه جاری و صفحه مقصد را مشخص می کند.

<link rel="alternate|author|dns-prefetch|help|icon|license|next|pingback|preconnect|prefetch|preload|prerenderer|prev|search|stylesheet">

alternate

لینکی را به عنوان نمایش جایگزین معرفی می کند.

author

لینک نویسنده مقاله را معرفی می کند.

dns-prefetch

عملیات DNS را در پس زمینه انجام می دهد.

help

لینک راهنما را معرفی می کند.

icon

برای نمایش آیکون کاربرد دارد.

license

لینک لایسنس مربوط به سند فعلی را ارائه می کند.

next

لینک بعدی مربوط به مجموعه سند را معرفی می کند.

pingback

آدرس سرور پینگ بک را فراهم می کند.

preconnect

باعث اتصال سریع مرورگر می شود.

prefetch

مرورگر منابع را دریافت و ذخیره می کند تا در پیمایش بعدی استفاده شود.

preload

برای پیش بارگذاری صفحات استفاده می شود.

prev

لینک قبلی مربوط به مجموعه سند را معرفی می کند.

search

لینکی مربوط به جستجو برای سند را معرفی می کند.

stylesheet

برای افزودن فایل استایل استفاده می شود.

صفت sizes

این صفت زمانی کاربرد دارد که از صفت rel و مقدار icon استفاده شده باشد و سایز تصویر را مشخص می کند.

<link rel="icon" href="icon.png" type="image/png" sizes="32×32">

صفت type

نوع رسانه فایل را مشخص می کند.

<link type="text/css">

مثال های تگ link

مثال 1:

برای فراخوانی فایل های CSS از صفت rel با مقدار stylesheet استفاده می کنیم.

<link rel="stylesheet" href="style.css">

مثال 2:

ساختار کد نمایش آیکون سایت در مرورگر به این شکل است.

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ link در اکثر مرورگرها به صورت زیر است:

link {
  display: none;
}

سازگاری با مرورگرها

تگ link با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS