Build a Better Process

HTML head Tag Reference and Examples

Within the opening and closing head tags sit pointers to CSS, JavaScript or image files, plus information for third parties like search engines.
  1. About - Understand the purpose of the head tag.
  2. Syntax - Describe how it is used.
  3. Settings - View required and optional attributes plus default behaviors.
  4. Examples - Review common examples.
face pic by Paul Alan Davis, CFA
Updated: February 23, 2021
That's how we'll learn what goes in the head tag. Let's get started.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-head-tag.html

An ad-free and cookie-free website.

Understanding the HTML head Tag with Examples


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:

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

Related HTML Content

The <head> tag is paired with other essential tags that should be included in every HTML document.

What's Next?

Our YouTube Channel is designed for smart people like you. To be made aware of new content follow @factorpad on Twitter.

Outline Back Tip Next

/ factorpad.com / tech / html5 / reference / html-head-tag.html

html header
html header tag
examples of the html head element
head tag
html meta
meta tags
html5 header
html title
what goes in the html head element
html link
html script
html meta name
html head examples
html metadata
html description
how does html head tag work
html charset
html head defaults
html head attributes

A newly-updated free resource. Connect and refer a friend today.