HTML Basic

HTML “ < link > ” tag-load or define external resources

Kevin Li
by Kevin Li 10:34 PM

<link> can be used to load or define resources that will be used in a web page. The most common one is to load CSS external style sheets.

The <link> tag is placed inside the <head> tag.

The <link> tag can have these different purposes:


HTML <link href="" rel="stylesheet"> tag-load CSS stylesheet

The most common <link> tag is used to load external CSS stylesheets (stylesheet):

<link href="https://example.com/media/link-example.css" rel="stylesheet">

If the file is on the local side, the URL can also be omitted to write only the path:

<link href="/media/link-example.css" rel="stylesheet">

Specify a CSS style sheet for printing

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

Use CSS Media Query to selectively load for a specific screen size

<link href="mobile.css" rel="stylesheet" media="screen and max-width:640">

HTML <link rel="icon" href=""> tag (tag)-set web icon favicon

The <link> icon is used to set the webpage favicon (favorites icon). Favicon is the small icon that will appear on the browser tab or bookmark (favorites).

Usage example:

<link rel="icon" href="/favicon.ico">

HTML <link rel="preload" href="" as="" type=""> tag-preload resources or content

You can use <link> preload to specify which resources (resources) are automatically preloaded asynchronously after the page is loaded. This method allows the resources to be used directly without waiting for network download and transmission when needed later. Time to improve page rendering speed and user experience.

rel="preload"Basic use is with hrefand asattributes (attribute) to specify the address and type of resources to be preloaded.

What types of resources can be preloaded? The following resource types can be used in as:

  • audio: audio
  • document: HTML document to be embedded in frame or iframe
  • embed: to be embedded <embed> content
  • fetch: those resources that will be requested via fetch or XHR
  • font: font/font file
  • image: Picture
  • object: the file to be embedded in <embed>
  • script: JavaScript file
  • style: CSS style sheet
  • track: WebVTT file
  • worker: A JavaScript web worker or shared worker
  • video: video

An example of the use of preload:

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

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

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js"></script>
</body>

In the above example, we pre-loaded style.css and main.js, which can be used immediately wherever these files are needed later.

Another type=""attribute is used to prompt MIME types of resources, which can help browser (browser) determine not to download it unsupported resource type. E.g:

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

In addition, preload can be RWD responsive preload, which can be media=""selectively preloaded for a specific screen size through the Media Query property. E.g:

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

HTML <link rel="canonical" href=""> tag-declares the standard URL of the webpage canonical URL

<link> canonical is mainly for SEO (Search Engine Optimization) purposes, telling search engines what the standard web address (URL) of this webpage is.

You can mark all duplicate web pages (for example, although the parameters of the URL bar are different, these pages are actually the same page) the same canonical URL to prevent Google from mistakenly identifying them as different web pages.

Examples of use:

<link rel="canonical" href="https://example.com/post/id">

HTML <link rel="prev" href="">, <link rel="next" href=""> Tag-Declare pagination relationship

<link> prev and next are used when there is a multi-page pagination relationship, when declaring the relationship between the next and next pages, mainly for SEO to help search engines understand the relationship between pages.

To give an example of actual use, suppose your blog has a certain category page that will display all the articles under that category. For the tech category, there are a total of three pages. The URLs are as follows:

https://example.com/topic/tech/
https://example.com/topic/tech/page/2/
https://example.com/topic/tech/page/3/

On the first page https://example.com/topic/tech/ HTML you will need:

<link rel="canonical" href="https://example.com/topic/tech/">
<link rel="next" href="https://example.com/topic/tech/page/2/">

In the second page https://example.com/topic/tech/page/2/ HTML you will need:

<link rel="canonical" href="https://example.com/topic/tech/page/2/">
<link rel="prev" href="https://example.com/topic/tech/">
<link rel="next" href="https://example.com/topic/tech/page/3/">

In the second page https://example.com/topic/tech/page/3/ HTML you will need:

<link rel="canonical" href="https://example.com/topic/tech/page/3/">
<link rel="prev" href="https://example.com/topic/tech/page/2/">

If you pay special attention, you will find that there will be no rel="prev" on the first page, and no rel="next" on the last page.


Kevin Li

Posted by Kevin Li

Post a Comment

0 Comments