HTML Old School

To add some external resources to our HTML document we will use LINK tag.

Most common external resources are CSS stylesheet file or favicon.

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="http://example.com/myicon.png">
 
<link rel="author" href="https://plus.google.com/..."/> - connection with Google+

 

Link tag attributes

All atributes are at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link but here I will explain only basic attributes

 

1. rel="stylesheet | icon"

Defines if the file is css or favicon.

 

2. type="text/html | text/css | image/x-icon | image|png"

Defines mime type.

 

3. href="URI | URL"

Path to the resource (file).

 

4. sizes="16x16"

Define favicon size.

 

5. disabled

This attribute breaks connectio to the resource (file). It can be used dynamicaly with JS or jQuery.

 

6. media="all | aural | handheld | print | screen | tty | tv"

Defines device which will use the resource.

For example if we want our printer to use some specific CSS then we will write:

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="printer.css" media="print">