Students Empire

Learn Something New
Home

resource link



The link element creates a relationship between an HTML document and an external resource, a CSS stylesheet or a Javascript file.


link element has local Attributes: href, rel, hreflang, media, type, sizes.


  • href - Specifies the URL of the resource that the link element refers to.
  • hreflang - Specifies the language of the linked resource.
  • media - Specifies the device that the linked content is intended for.
  • rel - Specifies the kind of relationship between the document and the linked resource.
  • sizes - Specifies the size of icons.
  • type - Specifies the MIME type of the linked resource, such as text/css or image/x-icon.

The sizes attribute has been added in HTML5 and the attributes charset, rev and target are obsolete in HTML5.


The rel attribute value determines how the browser deals with the link element. The following list shows common values for the rel attribute.


  • alternate - Links to an alternative version of the document, such as a translation to another language.
  • author - Links to the author of the document.
  • help - Links to help related to the current document.
  • icon - Specifies an icon resource.
  • license - Links to a license associated with the current document.
  • pingback - Specifies a pingback server, which allows a blog to be notified automatically when other web sites link to it.
  • prefetch - Preemptively fetches a resource.
  • sylesheet - Loads an external CSS stylesheet.

                  -------------- style.css -------------------------
                  a  {
                  background-color: grey;
                  color: red;
                  padding: 0.5em;
                  }

                  -------------- index.html ------------------
                  <!DOCTYPE HTML>
                  <html>
                  <head>
                    <link rel="stylesheet" type="text/css" href="styles.css" />
                  </head>
                  <body>
                    <a href="http://www.studentsempire.com">click</a>
                  </body>
                  </html>