Chapter 12. Resource Linking

8 Views

Attribute Breakdown:

Attribute	Description
charset	Identifies the character encoding of the linked document.
crossorigin	Determines how the element handles requests from different origins.
href	Specifies the location of the linked document.
hreglang	Indicates the language used in the linked document’s text.
media	Specifies the device on which the linked document will be displayed, commonly used with style sheet selection based on device characteristics.
rel	Essential. Describes the relationship between the current document and the linked one.
rev	Describes the relationship between the linked document and the current one.
sizes	Specifies the dimensions of the linked resource, applicable only when rel=”icon”.
target	Specifies where to load the linked document.
type	Identifies the media type of the linked document.
integrity	Provides a base64 encoded hash (sha256, sha384, or sha512) of the linked resource, allowing the browser to verify its authenticity.

Although scripts, icons, and stylesheets can be directly embedded into HTML markup, it is considered a best practice for efficiency and organization to include these resources in separate files and link them to your document. This section focuses on linking external resources such as stylesheets and scripts to an HTML document.

JavaScript Loading Methods
Synchronous Loading:

<script src="jspath/to.js"></script>

Conventionally, JavaScript <script> tags are positioned just before the closing </body> tag. This practice enhances the rapid display of your website’s visuals and prevents potential issues where JavaScript attempts to interact with elements before they are fully loaded.

Asynchronous Loading:

<script src="jspath/to.js" asynchronous></script>

An alternative approach is asynchronous loading, suitable when the JavaScript code isn’t essential for page initialization. By utilizing async, the browser loads the script content in parallel with other page resources. Once fully downloaded, it interrupts HTML parsing to execute the JavaScript file.

Deferred Loading:

<script src="jspath/to.js" deferred></script>

Deferred scripts operate similarly to asynchronous ones, but they postpone parsing until after the HTML is fully parsed. Unlike asynchronous scripts, deferred scripts ensure loading in the order of declaration, akin to synchronous scripts.

<noscript> Element:

<noscript>JavaScript is disabled</noscript>

The <noscript> element provides content to display if the user disables scripts or if the browser doesn’t support script usage. It can be positioned within either the <head> or the <body> section of the document.

Incorporating External CSS Stylesheets

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

Conventionally, CSS <link> tags are positioned within the <head> tag at the outset of your HTML document. This arrangement ensures that CSS styles are loaded first, allowing them to apply to your page progressively. Thus, your page avoids displaying unstyled HTML content while waiting for the CSS to load. The type attribute is generally redundant in HTML5, as HTML5 inherently supports CSS.

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

Both of these <link> tags achieve the same result in HTML5, with or without the type attribute.

Alternatively, a less common practice involves using the @import statement within direct CSS:

<style type="text/css"> @import("jspath/to.css") </style> <style> @import("jspath/to.css") </style>

Managing Favicon

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

For favicon management, specify image/png for PNG files and image/x-icon for icon (*.ico) files. The presence of a file named favicon.ico at the root of your website typically results in automatic loading and application without the need for a <link> tag. However, it’s worth noting that browsers may be sluggish and resistant to updating their cache if this file undergoes changes.

Implementing Alternative CSS Stylesheets

<link rel="alternate stylesheet" href="csspath/to/style.css" title="Title">

Certain browsers offer support for alternate style sheets if they are provided. By default, these alternate stylesheets remain inactive but can be activated through browser settings:

Firefox allows users to select the stylesheet via the View > Page Style submenu.
Internet Explorer supports this feature from version 8, accessible through View > Page Style (as of IE 11).
Chrome requires an extension to utilize this feature (as of version 48). Alternatively, the webpage itself can offer a user interface to enable users to switch between styles.
(Source: the MDN Docs)

Utilizing Resource Hinting Attributes

 <link rel="preconnect" href="URL">  <link rel="dns-prefetch" href="URL">  <link rel="prefetch" href="URL">  <link rel="prerender" href="URL">

These attributes serve different purposes:

Preconnect resolves DNS and initiates a TCP handshake and optional TLS negotiation.
DNS-Prefetch instructs browsers to resolve the DNS for a URL, enhancing the loading speed of assets from that URL.
Prefetch advises browsers to prefetch a specified resource for quicker loading.
Prerender prompts browsers to fetch and render the URL in the background, allowing for instantaneous delivery to the user upon navigation to that URL. Note that Prerender is an experimental feature.

Managing the Link ‘media’ Attribute

<link rel="stylesheet" href="file.css" media="print">

The media attribute specifies which style sheet should be applied for a specific type of media. Setting the value to “print” ensures that the style sheet is only applied when printing pages. The attribute can accept various media type values, akin to a CSS media query.

Implementing Prev and Next Links

 <link rel="prev" href="<http://abc.com/page1>"> <link rel="next" href="<http://abc.com/page2>">

In cases where a page forms part of a series of articles, the prev and next attributes can be used to link to preceding and succeeding pages.

Enabling Web Feed Discovery

  <link rel="alternate" type="application/atom+xml" href="<http://abc.com/feed.xml>" /> <link rel="alternate" type="application/rss+xml" href="<http://abc.com/feed.xml>" />

These <link> tags enable the discovery of Atom/RSS feeds, providing alternative feed formats for the website.