HTML Head Element

Monday, February 6, 2012

You will quickly notice that at the top of HTML documents (if you are following an HTML standard) there are elements that do not display on web pages via the browser. These elements are not seen by readers but they are very useful for the browser rendering the page and should always be included unless there is a specific reason not to.

The HTML <head> element is a container for other elements. Elements inside <head> can include <title>, <meta>, <script>, <style>, and <link>. Other elements that can be included in the <head> element are <base> and <noscript>. Let's take a look at a sample which contains the <head> element in more detail:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
    <title>Computers R Us</title>
    <meta name="description" content="Get Computers, servers and laptops on Sale!!!" />
    <meta name="keywords" content="computers,servers,laptops" />
    <link href="styles/master.css" rel="stylesheet" type="text/css" />
    <style type="text/css">table {border:0px solid black;}</style>
    <script type="text/javascript">..content..</script>
    <h1>Main heading</h1>

In this example, the title of the webpage is "Computer R Us". Note: the only element required in the <head> is the <title> element, assuming you are following the HTML 4.01 spefication. Other good reasons for including the <title> element as as follows:

  1. Search engines use the <title> element as a means of indexing sites. If your web page doesn’t have a descriptive title the search engines will give it a lower ranking than other pages. The title is displayed as the link text in search engine results.
  2. The tile displays at the top of the browser window or in the tab, describing the page in the browser.
  3. If someone bookmarks your site, the title is used in the bookmark. A good title is better than "untitled".

The next element, <meta> is used so that you can add meta data information about your web page such as description and keywords. Please note that keywords are no longer really used by the major search engines for indexing purposes. However, information found in the description can be used by search engines. They sometimes include this information in the search results.  You can include other information in this tag as needed.  For instance, some sites may ask you to include a specific name and content so that they can validate that you are the owner of the web page, since the owner would be the ony person able to update the pages. More information about the meta element is in the next article.

The <link> element can be used to include an external style sheet. Style sheets are useful when you want to format your document form a central file, rather than formatting the elements individually on each page. The advantage to using a style sheet is that you can apply a change to style and affect all of the web pages at one time. If you have a need to apply a unique style to a single page, you can do so by using the <style> element. Styles located within this element affect the target elements on the same page. Here is an example of how to use the link element.

     <link rel="stylesheet" type="text/css" href="mystyle.css" />

The <script> element can be used if you want to introduce client side scripting such as javascript. Client side scripts are very useful and can help you with additional formatting and client side controls. More detailed information in upcoming articles

The <base> element can be used to specify the base URL for all relative URLs in a document. Here is an example of its use:

     <base href="" />
     <base target="_blank" />

Finally, the <noscript> can be used if you want to display information to the user in the event that scripts are not supported by their browser.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor