What Is the HEAD Element for on a Web Page?

The First Elements in an HTML Document

Business people admiring new large computer and throwing away old obsolete equipment
Business people admiring new large computer and throwing away old obsolete equipment. PW Illustration/Getty Images

Every HTML document on the Web is made up of various elements. Many of the elements are quite common and are found on nearly every, like paragraphs, headings, images, and links. As common as these elements are, however, there are optional. You don't technically need them on a webpage - although any page missing these elements is probably going to be pretty sparse! 

In addition to these optional HTML elements, there are others that are actually required of a page.

Most of these elements are found in the <head> area of the HTML page.  These <head> elements are ones that do not display on web pages (for the most part). The elements are hidden from human visitors to your site, but they are still very useful as they convey information to the web browser, as well as search engines, about that page.

Technically, there is only one tag that is required to be at the top of all HTML documents: the <html> element. This tag pair starts and ends your webpage and it lets the browser know that everything between those two tags is HTML content.  The only thing you often see before the <html> opening tag is the pages doctype. That would be written like this:

<!doctype html>

After the <html> tag is that aforementioned <head> tag pair. Inside of that tag pair is where you will add a number of other important elements, including the <title> and <meta> tags. 

The TITLE Element

You should always include a <title> your web page.

There are a number of reasons for this, including:

  1. Search engines use the TITLE as the primary means of cataloging sites. If your web page doesn’t have a descriptive title the search engines will give it a lower ranking than other pages. This is also what displays as the link text in the search engine results page (also known as the SERP). 
     
  1. It displays at the top of the browser window or in the tab, describing the page in the browser.
     
  2. It is what is written when someone bookmarks your site. If people bookmark your site, you want them to remember it was your site and not “Untitled Document", which is the default page title used in many web development software platforms.

Since the <title> tag is meant to display an overview of what that page is about, every page of your site should have a unique <title>, since every page of your site includes unique content. Try to keep the content of this tag to under 60 character or less. You can include more, but search engines will truncate the content if it gets over that number.

Meta Information or Meta Data

Meta information is data contained in the <head> of your HTML document that provides additional information about your web page to the web browser and other devices. You can include information like the author’s name, the program that was used to create the page, the date the page should expire, and, perhaps most importantly, descriptions and keywords that are relevant to the page itself.

The most important META tag you should include on your web documents is actually the character set, or charset.

This is important for the security of your web pages

The character set should always be the first line in your HEAD so that hackers cannot break in. In context, along the rest of the tags we have covered, it would like like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>This is the title content</title>
</head>
</html>

Learn More About Meta Tags

Meta tags are very important to get good ranking in search engines, but if you only have time to write either a good, descriptive title or meta tags, write the title. The title of your document will go further for search engine placement than meta tags.

    Other Elements

    In addition to the elements we have already covered, other important things you will find in the <head> of a page are links to a site's CSS files Javascript, either as links to JS files or as inline Javascript code.

    Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/21/17