The <head> tag is an essential element of any HTML document. It contains metadata and important instructions that do not display directly on the user-visible page.
This metadata includes:
- titles;
- links to stylesheets;
- scripts;
- etc.
The <head> tag is located just after the <!DOCTYPE> declaration and the <html> tag, and before the <body> tag.
Structure and syntax of the <head> tag
Basic structure and syntax
The <head> tag is a paired tag with an opening tag and a closing tag.
Here is what it looks like in terms of structure:
<head>
...
</head>It is within these tags that we provide the metadata for our page.
Usage example
To make it more understandable, let's take a small example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to my site</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="scripts/main.js" defer></script>
</head>
<body>
<h1>Welcome to Believemy</h1>
</body>
</html>In this example:
- The
<meta>tags define the page encoding as well as the rules for responsive design. - The
<title>tag provides a title to display in the browser tab. - The
<link>tag connects two external resources: a stylesheet and a favicon. - The
<script>tag adds a JavaScript file.
These pieces of information are invisible to the user but exist for the browser to see.
What elements are allowed in <head>?
The <head> tag can contain the following elements:
| Element | Description |
|---|---|
<title> | To define the title of the page. |
<meta> | To provide metadata such as the page encoding or information like the description to display on search engines. |
<link> | Link to external resources like CSS styles or favicons. |
<style> | To add CSS elements directly to the page. |
<script> | To include JavaScript scripts. |
<base> | To define a base URL for relative links on the HTML page. |
<noscript> | To define something to display if JavaScript cannot be used. |
Browser compatibility
The <head> instruction is compatible with all browsers.
| Element | Google Chrome | Safari | Mozilla Firefox | Edge |
| <head> | Yes | Yes | Yes | Yes |