HTML <link>
query_builder | Christopher PisaniThe HTML element <link> appends stylesheet files to be included within the HTML document. The element should always be placed in the <head> section within the HTML document. The attribute rel, which means relationship, specifies what data is being included to the document.
The <link> element is used for more than just the stylesheets. In the following example, a favicon is added to a website. The favicon represents a small icon, which size is usually 16 x 16 pixels, is placed near the title tag in most browsers or used as an icon in the bookmarks or even a shortcut to the website. It serves as branding for a company or a website.
The media attribute can be used related to stylesheets with different screen sizes as shown in the following example. If the conditions of screen size are met, only the specified stylesheet is loaded to the website, thus reducing loading time to the website.
In the following example, the <link> element is used to preload a font to the page.
Available Attributes
| Attribute | Values | Functionality |
|---|---|---|
| crossorigin | anonymous use-credentials |
The way element handles cross-origin requests |
| href | url | Location of document |
| hreflang | language | Language of document |
| media | screen size | The device, the document will be displayed on |
| rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet |
The relationship to the href
|
| sizes | width & height | Specifies the size of the icon attached |
| type | media type | The media type of the document attached |