HTML Element: link

The HTML <link> element defines a relationship between the current document and other resources, such as stylesheets or scripts. You’ll find at least one on almost every webpage you ever come across!

Example

Syntax

1
 
<!DOCTYPE html>

2
 
<html lang="en">

3
 
<head>

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

5
 
</head>

6
 
</html>

Browser Support

The <link> element is supported in all modern browsers. Read more on caniuse.com.

Attributes

A link element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

A link element must have either a rel attribute or an itemprop attribute, but not both.

There are a number of additional attributes supported:

  • href: Address of the hyperlink
  • crossorigin: How the element handles crossorigin requests.
  • rel: Relationship between the document containing the hyperlink and the destination resource being fetched.
  • media: Applicable media.
  • integrity: Integrity metadata used in Subresource Integrity checks.
  • hreflang: Language of the linked resource.
  • type: Hint for the type of referenced resource.
  • referrerpolicy: Referrer policy for fetches initiated by the element.
  • sizes: Sizes of icons for rel="icon".
  • imagesrcset: Images to use in different situations for screen resolutions.
  • imagesizes: Image sizes for different page layouts.
  • as: Potential destination for a preload request (for rel="preload" and rel="modulepreload").
  • blocking: Whether the element is potentially render-blocking.
  • color: Color to use when customizing a site’s icon (for rel="mask-icon")
  • disabled: Whether the link is disabled.

Attribute Example

Here’s an example of how a <link> uses the rel="" and hreflang="" attributes to establish a relationship between the current document and versions in other languages:

1
 
<link rel="alternate" href="/en/page.html" hreflang="en" type="text/html">

2
 
<link rel="alternate" href="/fr/page.html" hreflang="fr" type="text/html">

3
 
<link rel="alternate" href="/es/page.html" hreflang="es" type="text/html">

Content

The link element supports no content model which means you can’t pass it any type of content.

Related HTML Elements

  • Whilst the <link> element is a type of hyperlink, it shouldn’t be confused with the <a> (anchor) element; the hyperlinks by which we navigate HTML documents and files.

Learn More

HTML Elements


This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz

The HTML <link> element defines a relationship between the current document and other resources, such as stylesheets or scripts. You’ll find at least one on almost every webpage you ever come across!

Example

Syntax

1
 
<!DOCTYPE html>

2
 
<html lang="en">

3
 
<head>

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

5
 
</head>

6
 
</html>

Browser Support

The <link> element is supported in all modern browsers. Read more on caniuse.com.

Attributes

A link element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

A link element must have either a rel attribute or an itemprop attribute, but not both.

There are a number of additional attributes supported:

  • href: Address of the hyperlink
  • crossorigin: How the element handles crossorigin requests.
  • rel: Relationship between the document containing the hyperlink and the destination resource being fetched.
  • media: Applicable media.
  • integrity: Integrity metadata used in Subresource Integrity checks.
  • hreflang: Language of the linked resource.
  • type: Hint for the type of referenced resource.
  • referrerpolicy: Referrer policy for fetches initiated by the element.
  • sizes: Sizes of icons for rel="icon".
  • imagesrcset: Images to use in different situations for screen resolutions.
  • imagesizes: Image sizes for different page layouts.
  • as: Potential destination for a preload request (for rel="preload" and rel="modulepreload").
  • blocking: Whether the element is potentially render-blocking.
  • color: Color to use when customizing a site's icon (for rel="mask-icon")
  • disabled: Whether the link is disabled.

Attribute Example

Here’s an example of how a <link> uses the rel="" and hreflang="" attributes to establish a relationship between the current document and versions in other languages:

1
 
<link rel="alternate" href="/en/page.html" hreflang="en" type="text/html">

2
 
<link rel="alternate" href="/fr/page.html" hreflang="fr" type="text/html">

3
 
<link rel="alternate" href="/es/page.html" hreflang="es" type="text/html">

Content

The link element supports no content model which means you can’t pass it any type of content.

  • Whilst the <link> element is a type of hyperlink, it shouldn’t be confused with the <a> (anchor) element; the hyperlinks by which we navigate HTML documents and files.

Learn More

HTML Elements


This content originally appeared on Envato Tuts+ Tutorials and was authored by Andy Leverenz


Print Share Comment Cite Upload Translate Updates
APA

Andy Leverenz | Sciencx (2023-02-28T13:35:46+00:00) HTML Element: link. Retrieved from https://www.scien.cx/2023/02/28/html-element-link/

MLA
" » HTML Element: link." Andy Leverenz | Sciencx - Tuesday February 28, 2023, https://www.scien.cx/2023/02/28/html-element-link/
HARVARD
Andy Leverenz | Sciencx Tuesday February 28, 2023 » HTML Element: link., viewed ,<https://www.scien.cx/2023/02/28/html-element-link/>
VANCOUVER
Andy Leverenz | Sciencx - » HTML Element: link. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/28/html-element-link/
CHICAGO
" » HTML Element: link." Andy Leverenz | Sciencx - Accessed . https://www.scien.cx/2023/02/28/html-element-link/
IEEE
" » HTML Element: link." Andy Leverenz | Sciencx [Online]. Available: https://www.scien.cx/2023/02/28/html-element-link/. [Accessed: ]
rf:citation
» HTML Element: link | Andy Leverenz | Sciencx | https://www.scien.cx/2023/02/28/html-element-link/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts