The `<head>` Tags

The <head> tag in an HTML document contains metadata and resources used to configure and enrich the web page. These tags are not displayed directly on the page, but they play an essential role for SEO (Search Engine Optimization), accessibility, and the proper functioning of browsers.

<title> Defines the title of the page, appears in the browser tab, used by search engines;
<meta> Allows adding metadata about the page (character encoding, description, author, viewport...);
<base href="https://example.com/"> Defines the base URL for all relative URLs on the page;
<script> Allows adding JavaScript scripts (do not put it here, we will see why later);
<style> Allows adding CSS styles;
<link rel="icon" href="favicon.ico" type="image/x-icon"> Links an icon that appears with the browser tab title;
<link rel="stylesheet" src="path/to/file.css"> Links a CSS file;
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> Adds an external font.

In summary, the <head> tag is essential for:

Defining the title and metadata;
Adding stylesheets and scripts;
Improving SEO and accessibility;
Optimizing display on different devices.

Example:

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">

The <head> Tags ​

The `<head>` Tags