What Is the HEAD Element for on a Web Page?

The first elements in an HTML document

HEAD Elements (also written as <head> elements) are ones that don't appear on web pages, and are hidden from human visitors to your site. That said, they're still very useful, as they convey information to the web browser, as well as search engines, about that page.

How HTML Elements Work

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 page, like paragraphs, headings, images, and links. As common as these elements are, however, they 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.

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 doctype of the page. 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>, any <meta> tags, as well as CSS and Javascript links.

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

  2. It displays at the top of the browser window or in the tab, describing the page in the browser.

  3. It is what is written when someone bookmarks your site. If a user bookmarks your site, you want them to remember it. If you don't use a Title tag, then your site will display “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 characters. 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, description, 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>
<meta charset="utf-8">
<title>This is the title content</title>

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. For additional information on meta tags:

  • Magic with Meta Tags — Use meta tags to getbetter search engine placement
  • More Meta Tags — Go beyond keywords and descriptions to get the most out of your metadata.
  • Meta Tag Links — Additional links for meta tag help

Other Elements

In addition, 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.

Was this page helpful?