HTML head Tag - Set Metadata in the Head Element | HTML Tags List

Understanding the HTML head Tag with Examples

Beginner

The <head> tag is one of several important tags the developer places near the beginning of an HTML document.

HTML Tags Reference

1. About the head tag

The <head> tag is the part of the document reserved for metadata, or information about the document itself. Text typed here does not show up in the main browser window, so styling the <head> element is not necessary. Instead it is most commonly used as a container for other tags.

You can think of tags within the <head> as pointers to files required to render and interact with the HTML document, and for the exchange of other third party information about the document.

Examples of metadata include:

Links to CSS and JavaScript files
Informational fields for Search Engines
Settings for document encodings and mobile-responsive designs
Links to external documents found at content delivery networks
Pointers to image files, including favicons
Comments including legal information and developer notes

Metadata is fairly standardized and the number of elements developers put within in their <head> tags depends on personal choice, or standards within an organization. It isn't uncommon to see 15-30 of these informational elements kept in the <head>.

For non-interactive or static public content in informational websites, many webmasters use Content Management Systems (CMS), like WordPress. A CMS helps the user set up appropriate HTML tags including those specific to the knowledge graph method of indexing and pointers to helper applications.

Our focus here is for those seeking a deeper understanding of the HTML elements to add website interactivity.

2. Syntax for the head tag

The <head> tag is optional in a test HTML document but imperative in a production environment. In fact, behind the scenes, modern browsers create a <head> element on the fly if one is not provided.

While a closing <head> tag is not required, it should be used. Also, the <head> element must be the first element within the <html> root tag. So it typically starts at the third line of an HTML document.

It is also typical to see the <title> tag as a required child of the <head> tag. So the minimum document that includes the <head> tag will look like this.

<!DOCTYPE html> <html> <head> <title> </title> </head> <body></body> </html>

3. Settings for the head tag

As with all tags, Global Attributes can always be set.

Tags within the <head> element may include as many as 8 elements. The Priority column is provided as a starting point for beginners.

Tag	Priority	Purpose
`<title>` (Required)	High	The title of the document shows up in the browser tab and in query results on Search Engines.
`<base>`	Low	Sets the root directory for relative references within the HTML document structure.
`<link>`	High	References to internal documents for the rendering of the page, including stylesheets, fonts and images.
`<meta>`	High	Examples of meta variables include those passed to search engines like description, keywords, author, and viewport.
`<style>`	Mid	Style sheets can be included inline, or within the `<head>` tag. But it is more common to see a `<link>` tag used that points to an external file.
`<script>`	Mid	JavaScript code can be written right in the `<head>` tag but it is more common to see this tag point to an external file with a .js extension.
`<noscript>`	Low	This can be specified to point browsers to pages that function without JavaScript turned on.
`<template>`	Low	This stores data used by JavaScript code.

Normally, you only see the first two included once, <title> and <base>. The rest may be used multiple times.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <head> element using the following specifications.

head { display: none; }

4. Examples of the head tag

Example 1 - Point to an internal CSS file

The following code links an HTML file written in English to an internal CSS file for document styling using the <link> tag. Notice how this is a one-line tag and is closed with the / at the end.

<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <link rel="stylesheet" href="/styles/main.css" /> </head> <body></body> </html>

Example 2 - Add a page title and description

The page title and description fields show up in Search Engine results so it is important for the webmaster to include them at a minimum for every public-facing web page. The description is set up with a <meta> tag.

<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta name="description" content="Page Description" /> </head> <body></body> </html>

Example 3 - Include a favicon image

A favicon is a square image that shows up in the browser on each open tab. It is common to put this file in the root of the web server. This offers another customization for organization branding. This is accomplished with a <link> tag.

<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> </head> <body></body> </html>

Example 4 - Specify the file MIME type and character encoding

It is a good practice to specify the MIME type which is sent with data transmissions across the Internet. At the same time communicating a file's character set is helpful. This is accomplished in one line using a <meta> tag.

<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> </head> <body></body> </html>

HTML head Tag Reference and Examples