Full-stack Web Technologies

CHAPTER 2
Document Metadata

The <head> tag contains metadata, which describes things that are not directly shown on the page itself.

The title

The <title> tag gives a title to the page, which usually is displayed in the browser's tab. If that page is saved, the title is also used for the file.

<title>A simple title</title>

Links

Links are relationships between the document we are describing and other resources. These links can be of different types depending on the "relationship", abbreviated rel as an attribute. The <link> is a self-closing tag.

Stylesheets: rel="stylesheet", to attach a CSS style-sheet to the page (can be used many times).
```
<link rel="stylesheet" href="/styles.css" />
```

Stylesheets for specific media: adding media="..." we can choose for what media is the stylesheet.

<link rel="stylesheet" media="print" href="/print.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="/mobile.css" />

Favicon: rel="icon", to describe what the icon of the page should be.
```
<link rel="icon" href="favicon.ico" />
```
Preload: To indicate files to preload, otherwise they are loaded on-demand, and preloading them can speed-up things quite a bit.
```
<link rel="preload" href="/fonts/my-font.woff2" as="font" />
```

Styles

You can write styles inside the <head> element with a <style> tag, using CSS directly embedded in the html.

<html>
  <head>
    <style>
      body {
        font-size: 20pt;
      }
    </style>
  </head>
  <body>
    This text will be large!
  </body>
</html>

Scripts

You can also include scripts in the <head> with the <script> tag. Using both <style> and <script> allows you to send a self-contained web document.

Metainformation

With the <meta> tag you can attach metainformation of various kinds to the document. The <meta> tag is an empty tag.

Examples:

Setting the encoding:
```
<meta charset="utf-8" />
```

Description of the website (good for SEO):

<meta name="description" content="A brief description of my website" />

Setting some keywords for your site (good for SEO):

<meta name="keywords" content="educational, course, programming" />

Redirect to another site after a certain number of seconds:

<meta http-equiv="refresh" content="3;https://www.upc.edu" />