<link>

The HTML <link> element defines the connection between the current document and external resources, often used to link stylesheets, icons, and other files within the <head> section.

`<link>` Tag

The <link> HTML element specifies the relationship between the current document and an external resource. It is primarily used to link stylesheets but also serves other purposes, such as defining site icons like favicons and mobile app icons.

`<link>` Demo

index.html

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

Attributes

Attribute	Value	Description
`crossorigin`	anonymous, use-credentials	Determines how cross-origin requests are handled
`href`	URL	Specifies the location of the linked document
`hreflang`	language_code	Defines the language of the linked document
`media`	media_query	Specifies the media type for the linked document
`referrerpolicy`	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url	Controls the referrer information sent with requests
`rel`	alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet	Required. Defines the relationship between the current document and the linked document
`sizes`	HeightxWidth, any	Specifies the size of the linked resource (only applicable for `rel="icon"`)
`title`	-	Defines a preferred or alternate stylesheet
`type`	media_type	Specifies the media type of the linked document

Definition and Usage

The <link> tag establishes a connection between the current document and an external resource.
It is commonly used to link external stylesheets or set a favicon for the website.
The <link> element is self-closing and only includes attributes.

Key Points

Placement: Inside the <head> element.

The <link> element should be placed within the <head> section and can be used multiple times to link various resources.

Default CSS Settings

In most web browsers, the <link> element is typically rendered using these default settings:

style.css

link {
  display: none;
}

Conclusion

The <link> tag is used to link external resources, such as stylesheets and favicons, to a webpage. Placed within the <head> section, it helps define the relationship between the current document and the linked resource using attributes like href, rel, and type. This tag is essential for improving web page styling, design, and overall functionality.

<meta>

The <meta> element provides metadata such as character encoding, author info, and viewport settings, typically found in the <head> section for document processing and SEO.

The <applet> tag allowed the inclusion of Java applets in web documents, but it's no longer supported in HTML5 because of security concerns.