تگ 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> | بله | بله | بله | بله | بله |
خواص
| خاصیت | مقدار | توضیح |
|---|---|---|
| crossorigin | anonymous use-credentials | مشخص می کند که چگونه این عنصر درخواست های متقابل را کنترل می کند |
| href | URL | مکان سند پیوند داده شده را مشخص می کند |
| 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 |
| type | media_type | نوع رسانه سند پیوند داده شده را مشخص می کند |
خواص عمومی
تگ link از خواص عمومی در HTML پشتیبانی میکند.
رویداد های عمومی
تگ link از رویداد های عمومی در HTML پشتیبانی میکند.
تنظیمات پیش فرض CSS
اکثر مرورگر ها عنصر link در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:
link {
display: none;
}آیا این مطلب برای شما مفید بود ؟
ارزش پرهيزگارى
و درود خدا بر او، فرمود: تقوا در رأس همه ارزش هاى اخلاقى است.
حکمت 410 نهج البلاغه
