The link tag
The link tag includes CSS files on the HTML page. In addition, link includes some other files, such as a favicon. (A favicon is a website shortcut that is visible in a browser tab. It can also be seen in some search engines when searching opposite websites, such as Yandex).
This tag has a lot of attributes and they can take on different values, but in real life they are almost never used. The most popular is connecting CSS and adding a favicon.
How to connect CSS:
<link rel="stylesheet" href="style.css">
How to connect a favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
The link tag does not require a closing tag.
Attributes
| Attribute | Description |
|---|---|
href |
Path to the included file. |
media |
The type of device to connect the file to. What this means is that you can include a CSS file only for large screens (value screen) or only for small screens: for mobile phones or tablets (value handheld).
Possible values: all, braille, handheld, print, screen, speech, projection, tty, tv. See below for details.
|
rel |
The type of file being included.
Possible values: stylesheet | alternate.
The value stylesheet indicates that a CSS file is being included, the value alternate is used, for example, to specify a link to a file in XML format for describing a news feed, article announcements.
|
charset |
Encoding of the included file. The current standard is utf-8.
|
type |
The data type of the included file. |
Values of the media attribute
In HTML5, media queries can be specified as values.
| Meaning | Description |
|---|---|
all |
All devices. |
screen |
Monitor screen. |
handheld |
Phones, smartphones, small screen devices. |
braille |
Braille-based devices are designed for blind people. |
speech |
Speech synthesizers, as well as programs for playing text out loud. This also includes speech browsers. |
print |
Printers. |
projection |
Projectors. |
tty |
Teletypes, terminals, portable devices with limited screen capabilities. Pixels should not be used as units of measurement for these devices. |
tty |
TVs that can open web pages (this happens too). |
Default value: all.
Example
Let's see what the structure of the simplest HTML page looks like, to which we will add the connection of CSS files and a favicon:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
