FactorPad
Faster Learning Tutorials

HTML link tag

An important tag used to point to a CSS stylesheet, an RSS feed XML file or a favicon.ico website icon. We demonstrate all three here.
  1. About - Understand the purpose of the link tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
by Paul Alan Davis, December 20, 2018
Updated: December 20, 2018
Here we'll not only see how to create a link but also cover the purpose of CSS stylesheets, XML feeds and website favicon links.

Outline Back Next

~/ home  / tech  / html5  / reference  / html link tag


HTML link tag

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.

HTML Tags Reference

1. About the link tag

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.

2. Syntax for the link tag

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.

  • 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.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="style.css" /> </head> <body></body> </html>

The example above shows the common and basic placement of a link to a local CSS stylesheet with two attributes.

3. Settings for the link tag

As with all tags, Global Attributes can always be set.

Link tag attribues and values

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.
Default behaviors

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.

link { display: none; }

4. Examples of the link tag

Example 1 - Demonstrate links to a stylesheet and third-party font

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).

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" /> </head> <body></body> </html>

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.

Example 2 - Show a link to an RSS feed for a local XML news feed file

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="style.css" /> <link rel="alternate" type="application/rss+xml" href="feed.xml" /> </head> <body></body> </html>

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).

Example 3 - Demonstrate how to create link to a favicon.ico image

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head> <body></body> </html>

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).

Summary

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.


Other Related HTML Content

The <link> tag is paired with other essential tags that should be included in every HTML document.


What's Next?

Check out other free learning resources at our YouTube channel. Subscribe while you're here.

  • For the complete HTML tag list, click Outline.
  • To learn about the <html> tag, click Back.
  • To specify additional information about a web page <meta> tag, click Next.

Outline Back Next

~/ home  / tech  / html5  / reference  / html link tag



 
 
Keywords:
html link tag
html link element
html meta tags
html meta link
web page to css
basic html tags
html link tag attributes
html link tag examples
link to css
link to favicon
link to xml feed
link css to html
link stylesheet
link rel
external css
css stylesheet
link rel stylesheet
html link code
css code
add css to html
xml link
link css file to html
favicon html
favicon ico
site icon
favicon link to html
website favicon
add favicon html