HTML <head> Tag
The <head> tag contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.
The <head> includes the following elements:
- The
<title>tag defines the title of a web page (required). It may be confused with the<h1>tag, but they are different. The<h1>tag specifies the title of page content, whereas the<title>tag is metadata representing the title of the entire HTML content and not its content. - The
<style>tag contains CSS code that defines how HTML elements should be rendered in a browser. - The
<base>tag defines an absolute (base) URL for all relative URLs. - The
<link>tag defines the relationship between the current HTML document and the resource to which it refers, or contains a link to an external style sheet. It can have two attributes: rel="stylesheet" and href. - The
<meta>tag provides additional information (metadata) about an HTML document. The<head>of a page can include different kinds of<meta>elements that may contain name and content attributes. - The
<script>tag contains a script (generally JavaScript), or reference to an external file with scripts. This element can be included in<head>. Sometimes, it is better to put it at the bottom of<body>to improve page load performance. The<script>element may seem empty, but it's not. - The
<noscript>tag defines an alternate text, which is displayed, if the browser doesn’t support scripts or scripts are disabled by the user.
Syntax
The <head> tag comes in pairs. The content is written between the opening (<head>) and closing (</head>) tags.
Example of the HTML <head> tag used with the <title> and <style> tags:
Example of a HTML head tag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-color: #d3d3d3;
}
p{
color: #1c87c9;
}
a{
color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<a href="#">Link</a>
</body>
</html>In the given example, the <head> tag is used with the <title> and <style> tags. The <title> tag defines the title of the document, which is displayed in the browser window. In the <style> tag the style of the document is defined: the background of the document is light gray, the text in the paragraphs marked with the <p> tag is blue, and the links within the <a> tag are red.
Example of the HTML <head> tag used with the <link> tag:
The content of the page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Result
In this example, we have provided a link to the document style.css in the CSS folder.
Example of the HTML <head> tag used with the <meta> tag:
HTML <head> Tag
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML and CSS Books" />
<meta name="description" content="HTML and CSS Basics for Beginners" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>The <meta> tag contains metadata for search engines - meta title, meta description.
Attributes
In HTML5, the <head> tag does not have any specific attributes. It only supports Global Attributes and the Event Attributes.
Practice
Which of the following elements can be used within the HTML <head> tag?