Login | Contact Us | Site Map | Resources

Introduction to HTML

Home > HTML Tutorial > HTML Head Elements

HTML Head Elements

We introduced the head tags <head> and </head> as the tags that enclose elements containing information about the HTML file. The fact that most of the elements in the head tags will function behind-the-scenes does not make them any less important.

Most head elements are not seen by the average user, but can be seen by viewing the page source and may also be useful sources of information for search engine spiders that come crawling around the web.

The Title Element

The title element is the only head element that does not function behind-the-scenes. Any text written between <title> and </title> will be displayed at the top of your browser for all to see. This element is an important method of identifying the page and stating its purpose.

<head>
  <title>My Page Name And Purpose</title>
</head>

Meta Tags

Meta tags are most often used to describe a webpage to browsers and search engines, although they have other uses. The two most commonly used meta tags are "description" and "keywords", although many more are available. Meta tags look like this:

<head>
  <meta name="description" content="Description Of Your Webpage Goes Here" />
  <meta name="keywords" content="comma, separated, keywords, go, here" />
  <meta name="copyright" content="Copyright (C) 2010 PHP For Kids.com" />
</head>

Link Tags

Link tags define relationships between the HTML file and an external resource. They are most commonly used to link to external cascading style sheets and favicons. Link tags are used in the following matter:

<head>
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" type="text/css" href="/Style.css" />
</head>

Script & Style Tags

Script tags are commonly used to add javascript or internal CSS to an webpage. They are inserted between the head tags in the following manner:

<head>
  <script type="text/javascript">
    document.write("What did the porcupine say to the cactus?")
    document.write("He Said: Are you my mother?")
  </script>
</head>

Style tags, used for internal CSS, are inserted in the same manner:

<head>
  <style type="text/css">
    p { border: 1px dotted #000000; }
  </style>
</head>