آموزش جامع HTML
یکی از مهمترین عناصری که به بخش پیکربندی صفحه تعلق دارد، عنصر link است. نقش این عنصر، ایجاد ارجاع به یک سند یا فایل خارجی و در واقع، لینک کردن آن فایل به صفحه است. مهمترین کاربرد عنصر link، افزودن یا لینک کردن یک استایل‌شیت خارجی به صفحه است که در درس قبل تحت عنوان روش خارجی یا external برای اعمال کدهای CSS روی صفحه به آن اشاره کردیم. اما علاوه بر استایل‌شیت‌ها، انواع دیگری از فایل‌ها را نیز می‌توان با اهداف متفاوت به یک صفحه‌ی وب لینک کرد که در این درس با آنها آشنا می‌شویم.
عنصر link برای لینک کردن یک منبع خارجی به صفحه‌ی وب جاری کاربرد دارد. نوع منبع خارجیِ لینک‌شده از روی مقدار صفت rel مشخص می‌شود و صفت href نیز حاوی آدرس منبع مورد نظر است. جدول زیر، لیست کاملی از صفت‌های عنصر link را به همراه مقدار یا مقادیر ممکن برای هر صفت و توضیحی کوتاه راجع به هر یک ارائه می‌دهد.
| نام صفت | مقدار صفت | توضیح |
|---|---|---|
| href | URL | از این صفت برای تعیین آدرس منبع لینک‌شده استفاده می‌شود. |
| rel | icon | stylesheet | alternate | author | canonoical | dns-prefetch | help | license | next | prev | preconnect | prefetch | preload | prerender | pingback | search | این صفت، رابطه‌ی بین سند جاری و منبع لینک‌شده را مشخص می‌کند. |
| hreflang | Language code | از این صفت برای اعلام زبان سند لینک‌شده استفاده می‌شود. |
| type | MIME type | این صفت، نوع مدیای منبع لینک‌شده یا MIME Type را تعیین می‌کند. |
| sizes | Size | این صفت، اندازه‌ی آیکون لینک‌شده را تعیین می‌کند و فقط در صورتی که مقدار صفت rel برابر با icon باشد، قابل استفاده است. |
| imagesizes | این صفت تنها زمانی قابل استفاده است که مقدار صفت rel برابر با preload و صفت as برابر با image باشد. در این شرایط، این صفت می‌تواند برای بارگذاری صحیح با استفاده از یک عنصر img مورد استفاده قرار بگیرد. | |
| media | Media query | دستگاه‌های مورد نظر برای نمایش سند لینک‌شده را تعیین می‌کند. |
| as | audio | document | embed | fetch | font | image | object | script | style | track | video | worker | این صفت تنها زمانی که مقدار صفت rel برابر با preload یا prefetch باشد، قابل استفاده است و کاربرد آن در تعیین نوع محتوایی است که باید توسط عنصر link لود شود. |
| crossorigin | anonymous | use-credentials | این صفت برای مدیریت درخواستهای cross-origin کاربرد دارد. |
| disabled | disabled | این صفت تنها زمانی که مقدار صفت rel برابر با stylesheet باشد، قابل استفاده است. کاربرد این صفت در غیرفعال کردن استایل‌شیت خارجی و ممانعت از اعمال آن روی صفحه است تا زمانی که مقدار این صفت به false تغییر کند. |
| referrerpolicy | این صفت برای تنظیم یک HTTP header با نام referer کاربرد دارد. |
در ادامه، با انواع منابع قابل ارجاع توسط عنصر link که همانطور که گفته شد، با استفاده از صفت rel تعیین می‌شود، آشنا می‌شویم.
صفت rel بیانگر رابطه‌ی بین صفحه و منبع خارجی مورد نظر است. مثلاً اگر بخواهیم یک استایل‌شیت را به صفحه لینک کنیم، باید مقدار صفت rel را برابر با stylesheet قرار دهیم. همانطور که در جدول بالا هم می‌بینید، براي صفت rel چندین مقدار مختلف قابل تعیین است که در ادامه مهمترین این مقادیر را بررسی می‌کنیم.
یکی از کارهای متداولی که صاحبان وبسایت‌ها انجام می‌دهند، نمایش یک favicon در نوار آدرس مرورگر است. قرار دادن یک لوگو به صورت favicon در صفحه می‌تواند به فرایند برندسازی تصویری یا visual branding کمک کند. این کار با استفاده از عنصر link و تنظیم مقدار icon براي صفت rel این عنصر صورت می‌گیرد. در ضمن، یک صفت href نیز براي تعیین آدرس فایل آیکون مورد نظر لازم است.
HTML
<link rel="icon" href="images/my-icon.ico">یادآوری می‌کنم که یک روش برای اعمال کدهای CSS روی صفحات وب این است که استایل‌ها را در یک فایل با پسوند .css بنویسیم و سپس، آن فایل را با استفاده از یک عنصر link به صفحه متصل کنیم. در این صورت، باید از مقدار stylesheet برای صفت rel مربوط به عنصر link استفاده کنیم. برای مثال، اگر استایل‌ها را در فایلی با نام style.css بنویسیم و آن را در پوشه‌ی یکسانی با فایل HTML قرار دهیم، می‌توانیم به شکل زیر، آن را به صفحه لینک کنیم.
HTML
<link rel="stylesheet" href="style.css">مرورگرهای مدرن از انواع تکنیک‌ها برای افزایش کارایی (performance) وبسایت ما استفاده می‌کنند؛ از اولویت‌بندی منابع و بارگذاری زودهنگام منابع مهم‌تر تا حدس زدن صفحه‌ی بعدی که کاربر بازدید خواهد کرد. با این حال، این مرورگرها هر چقدر هم که پیشرفته باشند، الزاماً قادر به گرفتن بهترین تصمیم در اینگونه موارد نیستند. بلکه این شما هستید که به عنوان مالک وبسایت، می‌دانید که کدام منابع مهم‌ترند و مسیر بازدید کاربر از وبسایت شما چگونه است. بنابراین، بهتر است که از این دانش خود استفاده کنید تا به مرورگرها کمک کنید تصمیمات صحیح‌تری بگیرند و Resource Hints مکانیزمی است که این امکان را برای شما فراهم می‌کند.
یک resource hit همانطور که از نامش پیداست، یک توصیه یا راهنمایی (hint) در مورد نحوه‌ی مدیریت منابع وب است که به ما امکان می‌دهد به مرورگر در تعیین منابعی که باید زودتر بارگذاری و تفسیر شوند، کمک کنیم. این کار با استفاده از مقادیر خاصی که به صفت rel مربوط به عنصر link تخصیص داده می‌شود، به انجام می‌رسد. این مقادیر عبارتند از:
نقش preload مشابه نقش مقادیری مانند prefetch و prerender است اما یک تفاوت کلیدی هم با آنها دارد و به همین دلیل است که preload را در یک بخش مجزا بررسی می‌کنیم. بر خلاف مقادیر بالا که برای مرورگر جنبه‌ی پیشنهادی دارند، preload جنبه‌ی دستوری دارد و مرورگر باید از آن پیروی کند.
با تخصیص مقدار preload به صفت rel، به مرورگر دستور داده می‌شود که منبع مشخصی را زودتر از موعد و قبل از ارسال درخواست برای ان منبع، بارگذاری کند. فونت‌ها، استایل‌شیت‌ها و اسکریپت‌ها از مهمترین منابعی هستند که برای آنها از مقدار preload استفاده می‌شود.
تفاوت دیگری که preload با سایر مقادیر معرفی‌شده در بالا دارد، این است که علاوه برای استفاده از ان، علاوه بر src و rel به یک صفت دیگر با نام as هم نیاز است.
HTML
<link rel="preload" href="logo.svg" as="image">جدول زیر نشان می‌دهد که برای هر نوع منبع باید از چه مقداری برای صفت as استفغاده کرد.
| مقدار صفت as | نوع منبع |
|---|---|
| audio | فایل‌های صوتی |
| video | فایل‌های ویدیویی |
| track | فایل های زیرنویس Web VTT |
| script | اسکریپت‌ها |
| style | استایل‌شیت‌ها |
| font | فونت‌های وب |
| image | تصاویر |
| fetch | درخواستهای XHP و Fetch API |
| worker | Web Workers |
| embed | درخواستهای embed |
| object | درخواستهای object |
| document | اسناد وب |