Build a Better Process
Build a Better Process
/ factorpad.com / tech / html5 / reference / html-link-tag.html
An ad-free and cookie-free website.
Beginner
The <link> tag is one of
several important tags the developer likely places in every HTML
document.
The beginner can focus on 3 of the 15 possible attributes here, as most of the rest are for advanced uses.
The <link> tag sits inside the
<head> element, so it is not
visible to the user.
Its primary purposes is to link related files, with a CSS stylesheet being the most commonly linked file type.
Second, the <link> tag links
RSS feed documents that are in XML format. An example is provided
below.
Third, the <link> element is
used to point to a favicon.ico image. This image shows
up in the browser tab next to the page title. It is also what the user
sees if they save a bookmark in their browser.
Other common applications of the
<link> element beyond our scope
here include canonical links, alternative CSS files for different
media types, and for supplying information about a series of web pages.
The <link> element for HTML5
requires only one tag, so it is self-closing. For the more strictly
conforming XHTML standard it needs to be closed with
/> as our examples demonstrate.
There can be multiple <link>
elements in any document and they must sit within the
<head> element.
Nearly every <link>
element includes the first two attributes, but sometimes the third is
required.
by rel - A required attribute
specifying the type of link.href - The attribute that passes
the URL of the linked document.type - The MIME file type of the
linked resource.
A full list of <link>
attributes is provided in the next section. For those that are beyond
our scope here, see the official HTML documentation at whatwg.org and
w3.org.
The example above shows the common and basic placement of a link to a local CSS stylesheet with two attributes.
As with all tags, Global Attributes can always be set.
Below is a series of attributes and values that can be set in the
<link> element. Those marked as
High in the Priority column indicate
where most beginners start.
| Attribute | Priority | Purpose |
|---|---|---|
as |
Low | Used in conjunction with rel="preload" and
rel="prefetch" for content security and
prioritization. (Low browser adoption) |
crossorigin |
Low | Security settings to allow the webpage to access resources from
a different domain. A value of anonymous sets
no credential requirement between servers but lists of approved
servers are still required. A value of
use-credentials requires credentials like
SSL certificates as well. (Low browser adoption) |
disabled |
Low | Used in scripts to turn off the use of the linked resource. (Low browser adoption) |
href(highly recommended) |
High | The relative or absolute URL of the linked document supplied as case-sensitive text, as in href="style.css" for a relative link to a CSS file in the same directory as the HTML file. An absolute link might look like href="https://example.com/style.css". |
hreflang |
Low | Specifies the language of the linked resource. It is advisory
and only applies when the href
attribute is supplied. |
importance |
Low | Used in conjunction with the
rel attribute and values
preload and prefetch.
Values include auto, high,
and low.(Low browser adoption) |
integrity |
Low | Includes a security hash for the resource. (Low browser adoption) |
media |
Mid | Settings for media queries commonly used for multiple CSS stylesheets depending on the size of the browser device. |
methods |
Low | Provides information to the browser about programmed objects.
(Low browser adoption) |
prefetch |
Low | Instructs the browser to download the specified resource to
speed up access should the user access it. (Mixed browser adoption) |
referrerpolicy |
Low | Indications for which referrer to use when accessing the
resource. The default is
no-referrer-when-downgrade and other choices
include no-referrer, origin,
origin-when-cross-origin and
unsafe-url. (Mixed browser adoption) |
rel(required) |
High | One of 20 types the linked resource represents, including: alternate, author, canonical, dns-prefetch, help, icon, import, license, manifest, modulepreload, next, pingback, preconnect, prefetch, preload, prerender, prev, search, shortlink, stylesheet. Multiple types may be supplied as space-separated values. |
sizes |
Low | Size can be supplied as any for example if it
is a scalable SVG format, or wxh format where
w and h are width and height
in pixels, respectively. Used to supply different sized
favicons. (Low browser adoption) |
title |
Low | Within the <link>
attribute and used in conjunction with the
rel=alternate setting, it refers to and selects
an alternative stylesheet with this attribute supplied. |
target |
Low | Sets the window for the linked resource. (Likely deprecated) |
type |
High | To specify the MIME media file type, of the linked document (ie, text/css, image/x-icon). Because the rel="stylesheet" for CSS defaults to text/css it isn't necessary for CSS files. However, for the other file types noted it is supplied. See MIME types for a list of possible values. |
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
styles the <link> element using
the following specifications.
Web publishers often use third-party icons and fonts provided as CSS documents. Here we link to two stylesheets. First is a link to a stylesheet stored in the same directory as the HTML file (relative). Second is a link to a third-party font file stored at a remote URL (absolute).
While attributes can be supplied in any order, you may find it easier
to read and organize multiple links by starting with the required
rel="" attribute, as shown here.
For news or blog sites it is common to publish a news feed in XML
format. RSS feed readers employ web crawlers to scan
<head> elements looking for
links to feeds. The second link here points to a
feed.xml file located in the same directory as the
HTML page.
To learn more about how to create RSS feed documents, normally named feed.xml, see the Wikipedia article called RSS (opens in a new window).
The icon in the browser tab next to the page title is often placed in the root directory in a file called favicon.ico. Here we create a relative link to that file.
To learn more about how to create website branding images, normally named favicon.ico, see the Wikipedia article called Favicon (opens in a new window).
As examples demonstrate, the
<link> tag can be easily learned
if your needs are basic. However, when pointing to files used in a
scripting environment, especially when security comes into play,
complexity increases quickly. In that case, the official documentation
is your friend, but for most of us, what's covered here is sufficient.
The <link> tag is paired
with other essential tags that should be included in every HTML
document.
Check out other free learning resources at our YouTube Channel. Subscribe and follow @factorpad on Twitter for updates.
<html>
tag, click Back.<meta> tag, click Next./ factorpad.com / tech / html5 / reference / html-link-tag.html
A newly-updated free resource. Connect and refer a friend today.