تگ link در html

تگ link از نوع void element است که برای ایجاد ارتباط با فایل‌هایی مانند فایل‌های استایل، فونت، فایل‌های آیکون و… استفاده می‌شود. به طور کلی تگ <link> رابطه‌ای بین سند جاری منبع خارجی(external) را تعریف می‌کند.

نحوه استفاده از تگ <link>
attribute یا ویژگی‌های قابل استفاده در تگ‌های <link>
ویژگی‌های ظاهری پیشفرض در تگ <link>

نحوه استفاده از تگ `<link>`

↑

تگ link از نوع void element بوده و فقط دارای ویژگی است، این تگ می‌تواند برای لینک کردن فایل‌های استایل (CSS) به صفحات HTML استفاده شود.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

attribute یا ویژگی‌های قابل استفاده در تگ‌های `<link>`

↑

تگ link می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

href

↑

ویژگی href آدرس صفحه یا فایل را مشخص می کند. استفاده این ویژگی برای تگ <link> ضروری است. توجه داشته باشید که برای آدرس دهی هم می توانید از Absolute URL (پیوند مطلق href="http://www.example.com/theme.css" ) و هم از Relative URL (پیوند نسبی href="/themes/theme.css") استفاده کنید.

<link rel="stylesheet" type="text/css" href="theme.css">

hreflang

↑

ویژگی hreflang زبان صفحه یا فایل پیوند شده را مشخص می کند. این ویژگی فقط در صورتی استفاده می شود که ویژگی href تنظیم شده باشد. مقادیر قابل استفاده در این ویژگی کد دو حرفی زبان است برای مثال fa، en.

<link href="https://hamgamweb.com" hreflang="fa">

crossorigin

↑

ویژگی crossorigin به مرورگر اعلام می‌کند، صفحه‌ای که به وسیله آن لینک داده شده است، از منبع متفاوتی در حال بارگذاری است. با استفاده از این ویژگی، می‌توان اجازه داد که منابع از دامنه‌های دیگری بارگذاری شوند و به عنوان یک “منبع خارجی” (external resource) تشخیص داده شوند.

در صورتی که فایل از دامنه دیگری بارگذاری شود، مرورگر به صورت پیش‌فرض تلاش می‌کند از کوکی‌های دامنه‌ی منبع (دامنه دیگر) استفاده کند. استفاده از ویژگی crossorigin مانع این عملکرد خواهد شد و مرورگر به جای استفاده از کوکی‌های دامنه منبع، درخواست جدیدی برای منبع دامنه‌ی منبع می‌فرستد.

در مواردی که از فایل‌های CSS و فونت استفاده می‌کنید که از دامنه‌ی دیگری بارگذاری می‌شوند، استفاده از ویژگی crossorigin ضروری است. همچنین، اگر از CDN برای بارگذاری فایل‌های جاوا اسکریپت خارجی استفاده می‌کنید، استفاده از این ویژگی برای اعلام آن‌که فایل‌ها از یک منبع خارجی بارگذاری شده‌اند، توصیه می‌شود.

استفاده از

در این مثال، فایل style.css با استفاده از ویژگی crossorigin="anonymous" اعلام شده‌است که از یک منبع خارجی بارگذاری شده است.

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

در این مثال، فایل style.css با استفاده از ویژگی crossorigin="use-credentials" اعلام شده‌است که نیازمند احراز هویت مرورگر برای بارگیری منبع است. برای مثال، فرض کنید می‌خواهید یک فایل جاوااسکریپت با ویژگی use-credentials از یک CDN بارگیری کنید که برای دسترسی به منابعش نیاز به اعتبارسنجی دارد.

<script src="https://cdn.example.com/myscript.js" crossorigin="use-credentials"></script>

media

↑

ویژگی media مشخص می کند که URL هدف برای چه دستگاهی مناسب و یا بهینه شده است. این ویژگی بیشتر برای فایلهای CSS استفاده می شود.

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

referrerpolicy

↑

ویژگی ReferrerPolicy مشخص می کند که وقتی کاربر روی لینک کلیک می کند، چه اطلاعاتی از سمت ارجاع دهنده (شما) ارسال شود، این رویکردها به دلیل حفظ حریم خصوصی کاربران برای درخواست‌های cross-origin استفاده می‌شود. این ویژگی دارای چندین مقدار است که در لیست زیر هریک از مقادیر توضیح داده شده است.

no-referrer: هیچ اطلاعات ارجاعی ارسال نمی شود.
origin: مبدا (scheme، host و port) سند را ارسال می کند.
origin-when-cross-origin: این مقدار origin، path و query string را برای درخواست همان مبدا ارسال می کند. اطلاعات کامل referrer (شما، ارجاع دهنده) برای درخواست‌هایی که از دامنه‌های مشابه صورت می‌گیرند ارسال می‌شود، در غیر این صورت اطلاعات referrer تنها شامل دامنه مبدا است.
same-origin: در این حالت، اگر یک درخواست از یک منبع با دامنه مشابه (same-origin) صورت گیرد، اطلاعات کامل referrer به صورت پیشفرض به درخواست مورد نظر اضافه خواهد شد. در غیر این صورت درخواست بدون هیچگونه اطلاعات اضافی ارسال می‌شود.
no-referrer-when-downgrade: پیش فرض اگر سطح امنیتی پروتکل یکسان و یا بالاتر باشد، مبدا، مسیر، و یا رشته پرس و جو را ارسال می کند، http-to-http, https-to-https و http-to-https ارسال می‌شود اما https-to-http ارسال نخواهد شد چرا که سطح امنیتی پروتکل پایین تر است.
strict-origin-when-cross-origin: این مقدار مشابه no-referrer-when-downgrade بوده با این تفاوت که no-referrer-when-downgrade برای سایت‌هایی که هم از HTTP و HTTPS استفاده می‌کنند مناسب است اما این مقدار برای سایت‌هایی که از دامنه‌های مختلف استفاده می‌کنند، مناسب است.
unsafe-url: این مقدار تمامی اطلاعات (origin، path و query string) را بدون در نظر گرفتن امنیت و سطح پروتکل ارسال می‌کند. از این مقدار با دقت استفاده کنید!

 <link href="https://hamgamweb.com" referrerpolicy="origin">

rel

↑

ویژگی rel در تگ link رابطه بین سند یا صفحه جاری و URL یا همان مقدار href را مشخص می کند. این ویژگی فقط در صورتی استفاده می شود که ویژگی href تنظیم شده باشد. موتورهای جستجو می توانند از این ویژگی برای دریافت اطلاعات بیشتر در مورد یک لینک استفاده کنند.

stylesheet: پیوند به یک شیوه‌نامه یا فایل css.

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

alternate: پیوند به یک صفحه جایگزین از صفحه فعلی (مثال صفحه چاپ، صفحه ترجمه ترجمه).

<link rel="alternate" 
type="application/rss+xml" 
title="Hamgamweb Feed" href="https://hamgamweb.com/feed/" />

author: پیوند را به نویسنده صفحه.
help: پیوند به یک سند راهنما در خصوص صفحه.

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

next: پیوند به document بعدی موضوع.
prev: پیوند به document قبلی موضوع.
search: پیوند به ابزار جستجو برای سند.
license: پیوند به اطلاعات مجوز برای صفحه.
ویژگی dns-prefetch در تگ link به مرورگر این امکان را می‌دهد که پیش از بارگیری صفحه، نام دامنه‌هایی که برای بارگیری منابع مورد استفاده هستند، را پیش‌فرض کند و DNS Lookup را انجام دهد.
dns-prefetch: با استفاده از این ویژگی، مرورگر قبل از اینکه منابع مورد نیاز صفحه را بارگیری کند، می‌تواند نام دامنه‌های مربوط به آن‌ها را DNS Lookup کند و زمان بارگیری صفحه را کاهش دهد. در این مثال، مرورگر قبل از بارگیری https://example.com/image.jpg دی ان اس دامنه example.com را در حافظه کش می‌کند. سپس با استفاده از تگ img، تصویر مورد نظر از دامنه example.com بارگیری می‌شود و مرورگر برای دسترسی به این دامنه دیگر نیازی به انجام DNS Lookup ندارد، بلکه از حافظه کش خود استفاده می‌کند

<link rel="dns-prefetch" href="//example.com">
<img src="https://example.com/image.jpg" alt="An image from example.com">

pingback: با استفاده از pingback می‌توانید یک آدرس ارجاعی (referral URL) برای صفحه‌ی فعلی تعریف کنید.
preconnect: کمک می‌کند تا ارتباطاتی را که برای بارگیری صفحه لازم است، پیش از شروع بارگیری برقرار کنند و از تاخیر در بارگیری صفحه جلوگیری کنند. برای مثال برای بارگیری فایل‌های CSS و JS، به دو دامنه دیگر احتیاج دارید. در این صورت، با استفاده از ویژگی preconnect، می‌توانید پیش از شروع بارگیری صفحه، ارتباط با این دو دامنه را برقرار کنید تا بارگیری فایل‌های CSS و JS بدون تاخیر صورت گیرد.

<link rel="preconnect" href="https://example.com">

prefetch: به مرورگرها اجازه می‌دهد که منابعی را که برای بارگیری بعدی مورد نیاز هستند، پیشاپیش بارگیری کنند. این عملیات، سرعت بارگیری صفحات را افزایش می‌دهد و تجربه کاربر را بهبود می‌بخشد.

<link rel="prefetch" href="styles.css">

preload: به مرورگرها اجازه می‌دهد که منابعی را که برای بارگیری بعدی مورد نیاز هستند، قبل از بارگیری صفحه بارگیری کنند، برای مثال در صفحه‌ی وب خود، از یک فایل CSS برای ظاهر کردن اجزای سایت استفاده می‌کنید و می‌خواهید این فایل را قبل از بارگیری صفحه بارگیری کنید.

<link rel="preload" href="styles.css" as="style">

prerender: مشخص می‌کند که مرورگر باید صفحه وب مشخص‌شده را در پس‌زمینه پیشاپیش بارگیری کند. بنابراین، اگر کاربر به این صفحه روی لینک صفحه کلیک کند، سرعت بارگذاری صفحه را افزایش می دهد چرا که صفحه قبلا بارگذاری شده است.

sizes

↑

ویژگی sizes مشخص می‌کند که اندازه تصویر یا فایل مربوطه در چه حالت‌هایی قابل نمایش است، مقادیر قابل استفاده در این ویژگی heightxwidth و any است. این ویژگی فقط در صورتی استفاده می شود که تگ link دارای ویژگی rel="icon" باشد، این ویژگی در برخی از مرورگرها پشتیبانی نمی‌شود.

<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="any">

title

↑

عنوان لینک را مشخص می‌کند.

type

↑

ویژگی type در تگ <a> برای تعیین نوع یا فرمت محتوایی که در لینک وجود دارد، استفاده می‌شود، برای مثال فایل‌های PDF، تصاویر، ویدئوها و غیره. اگرچه استفاده از این ویژگی برای تگ a به صورت اختیاری است، اما این اطلاعات به مرورگرها کمک می‌کنند تا بتوانند با استفاده از نرم‌افزار مناسب هر فایل، آن فایل را باز کنند. برای فهرست کامل انواع رسانه های استاندارد به صفحه IANA Media Types مراجعه کنید.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Global Attributes

↑

تگ <link> از Global Attributes در HTML پشتیبانی می کند.

Event Attributes

↑

تگ <link> از Event Attributes in HTML در HTML پشتیبانی می کند.

ویژگی‌های ظاهری پیشفرض در تگ `<link>`

↑

اکثر مرورگرها تگ <link> را با مقادیر پیش فرض زیر نمایش می دهند:

link {
  display: none;
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس

ثبت نام تعرفه آموزش خصوصی

HTML Html Links Tags