تگ link در HTML

  /  فرانت اند   /  HTML   /  تگ link در HTML

با استفاده از تگ link در HTML میتوان یک پیوند بین سند و یک منبع خارجی ایجاد کرد.

مثال

در مثال زیر یک منبع فایل CSS را به سند اضافه کرده ایم که یکسری استایل ها برای یکسری تگ ها تعریف می کند:

<head>
<link rel="stylesheet" href="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/styles.css">
</head>


تعریف و کاربرد

همانطور که اشاره شد از تگ link در HTML برای پیوند دادن یک منبع خارجی به یک منبع داخلی استفاده می شود.

مثلاً شما میتوانید فایل های CSS که درون آن سبک ها و استایل های اختصاصی خود را نوشته اید از طریق تگ <link> به سند خود متصل کنید و تمامی آن سبک ها روی عناصر مشخص شده اعمال می شوند.

همچنین شما می توانید از تگ <link> در HTML به تعداد دفعات بالا استفاده کنید اما چند نکته را در نظر داشته باشید:

هرچی تعداد منابع خارجی که لینک می دهید به سند خود کمتر و سبک تر باشد باعث می شود که سرعت بارگیری صفحه افزایش پیدا کند و همین افزایش سرعت امتیاز خوبی برای سئو سایت شما محسوب می شود.

مثلاً اگر 4 تا فایل CSS دارید سعی کنید اول از همه اون ها رو minify فشرده کنید و همرو باهم در یک فایل ترکیب کنید.

تگ <link> به تنهایی چیزی از خود ندارد و از یکسری ویژگی تشکیل می شود.

توجه: تگ link در HTML همیشه درون عنصر <head> قرار میگیرد.

توجه: تگ <link> یک عنصر انفرادی می باشد و نیازی به بسته شدن آن نیست.


پشتیبانی مرورگر ها

عنصر
<link>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیح
crossoriginanonymous
use-credentials
مشخص می کند که چگونه این عنصر درخواست های متقابل را کنترل می کند
hrefURLمکان سند پیوند داده شده را مشخص می کند
hreflanglanguage_codeزبان متن را در سند پیوند داده شده مشخص می کند
mediamedia_queryمشخص می کند که سند پیوند داده شده در چه دستگاهی نمایش داده می شود
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
مشخص می کند که کدام ارجاع دهنده هنگام واکشی منبع استفاده شود
relalternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
رابطه بین سند فعلی و سند پیوند داده شده را مشخص میکند ( استفاده از این ضروری است )
sizesHeightxWidth
any
اندازه منبع پیوند داده شده را مشخص می کند. فقط برای rel = icon
typemedia_typeنوع رسانه سند پیوند داده شده را مشخص می کند

خواص عمومی

تگ link از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ link از رویداد های عمومی در HTML پشتیبانی میکند.

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

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

link {
  display: none;
}

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

ارسال یک نظر