Home : Tutorial Three : Next Tutorial

Tutorial Three: The Document Head

Document Structure
Head Content
The Page Title
Meta Tags
Scripts
Style Sheet Links
Base Href Tag

Document Structure

HTML documents have a basic structure that includes three sections - the html declaration which tells the browser where the document begins and ends and that it is actually an HTML page, the head and the body. Specific content belongs in each, but the main bulk resides within the body. The head content, apart from the page title, is not displayed in the browser.

<!--doctype html public "-//w3c//dtd html 4.0//en">
< html>
<head></head>

<body>
Here resides the content of your page
</body>

</html>

Forgetting to insert a doctype declaration will not cause your page to fail, but it is recommended by the W3C as a necessary inclusion. "Every conforming HTML 4.0 document must start with the declaration that is needed to distinguish HTML 4.0 documents from other versions of HTML". It has been said that this statement may be required by future software versions in order to distinguish certain types of HTML.

Head Content

Head content acts as a flag to the Web Server about the document itself. Head content is also considered important by browsers, which read and run any instructions from the head before looking at the body. What goes between the head tags is usually one of five things

  • page title
  • meta tags
  • script
  • style sheet links
  • base href

The Page Title

Creating a page title is extremely important and often overlooked. The title is displayed on the top 'title' bar of a browser window, and therefore provides some information to site visitors.

Exercise: Check the title on this page. Visit your favorite websites and note how they have (or haven't!) used the title tag.

Every page within a site can have a seperate title, however this is counteracted if the site uses frames. Framed sites are controlled by one particular file called a frameset - it is the frameset's title that will be constantly displayed no matter which page is in the viewed frame window, unless a particular page is loaded outside the parent frameset which is always a possibility. (Frames will be covered in the next course.) The page title is also important for two other reasons.

Exercise: Bookmark this page (right-click, select Add To Favorites or select Favorites > Add to Favorites in IE, or right-click Add Bookmark or select Bookmarks > Add Bookmark in NN). What description appears as the Bookmark name?

If you followed the exercise above, you would have discovered that the Bookmark name is grabbed by the browser from the page title. Therefore it is of greater use to your visitors to provide a meaningful title and not simply homepage or index. 'The homepage of Bob Smith, Physics Professor at Monash University' might be more advantageous. Although there is no limit to the number of title characters it is logical to keep to a length that will fit on a browser title bar .

The second reason the title is important centres on the capacity of major search engines to include title content as part of their indexing. To find out more about Search Engines visit the invaluable resource searchenginewatch.com. Some of the best known engines are AltaVista, HotBot, Google and Infoseek, which require you to submit your web address, which is then 'crawled' by automated programs (bots, or robots) designed to crawl or spider the web, checking your pages and updating their massive databases. There are many more and all operate slightly differently - some like Yahoo and LookSmart are actually databases driven by a process of site submission and human review. This page lists what the engines will do if no title is found. When searching for Monash using AltaVista the result lists this page first:

Law Faculty - Monash University
Monash University. Faculty of Law. 1999 Stream and Tutorial Enrolment. Faculty Overview. News & Events. Admission Info. Undergraduate Info. Staff Profiles.
URL: www.law.monash.edu.au/ Last modified 30-Mar-99 - page size 9K - in English

Looking at the Title on this actual page we can see :

<title>Law Faculty - Monash University</title>

Whereas this Monash page lists in Alta Vista as:

No Title
No ...
URL: www.csse.monash.edu.au/hons/intro/ Last modified 19-Feb-99 - page size 2K - in English

Not much information at all!

The rest of the information is gathered from page body content or the Meta tags (covered below). If a web site consists of many pages, creative and accurate page titles can prove invaluable and avoids a non-communicative 'No Title' description in Search Engine Listings. Search Engines grab around the first 60-70 characters of a title, therefore you may wish to adjust the length.

Exercise: Try using a few different search engines to look up a topic you are interested in. Do they all give the same results? Why not?

Meta Tags

These tags supply non-HTML information about the page to browsers and search engines. Meta is a greek word meaning with or after or over - denoting position or changed conditions.

Meta tags give you some control over what information you can pass on to the engines and people.

  • Who wrote the page
  • A description of the page content
  • Keywords that help people to 'find' your page via engines
  • What software (generator) you may have used to create the page
  • An Expiry date for the page - useful for content that is available for a certain period only or to force browsers to update their 'cached' copy of the page
  • Refresh the page content after a specified time - useful for a page that has some form of constantly updating information, ie stock prices. More likely used to redirect a browser to a new page if the website has moved to a new URL. The page will automatically reload a new page after a specified time
  • A copyright statement
  • Tell bots not to index a page (it may be restricted information - not always a reliable method however and there are other ways to accomplish this)

    <html>
    <head>
    <title>Professor Bob Smith's Physics Page</title>

    <meta name="author" content="Professor Bob Smith, Monash Unversity">
    <meta name="description" content="Professor Smith's Fun with Physics Page">
    <meta name="keywords" content="professor bob smith, monash university, physics, fun">
    <meta name="generator" content="whatever software was used - many programs add this automatically">
    <meta http-equiv="Expires" content="fri 31 dec 1999 23:59:00 GMT">
    <meta http-equiv="refresh" content="5; url=http://www.monash.edu.au/smith">
    <meta name="copyright" content="copyright © 1999 Professor Bob Smith">
    <meta name="robots" content="noindex">

It is not necessary to use all of these elements, however it is recommended to insert author, content and description as a minimum. You may like to prepare a 'template' html page which contains the basic head content you will be using throughout your website. Simply open this each time you wish to start a new page and save it as a different name. Engines are becoming smarter as they are programmed to ignore multiples of the same word and other such meta 'tricks'. Be careful what you do use in these tags. In the US meta tag use has been the subject of legal battles - where seeding with words that a web page builder knows are popularly searched, such as 'Monica Lewinsky' or 'free money' has been disputed. A recent case centred on the use of the word 'Playboy' in meta tags belonging to an ex-playboy bunny's site. Playboy lost the case, but meta tags are likely to come under closer inspection in future.

Scripts

Remember that browsers seek information in the head tags to check whether there is something that should be read or run before looking at body content? This is imperative with scripts such as Javascript - commonly used to create imageflips or rollovers, as well as many other functions. By utilising the head tags, any scripts required to trigger an event within the body of the page have already been grabbed by the browser and are ready to run particular functions. Javascript is a topic in its own right and will not be covered in this course. There are many good beginners references available on the web such as www.htmlgoodies.com or www.webreference.com.

Style Sheet Links

Cascading Style sheets are a recent HTML convention and will be covered in the next course. They are fully supported by the W3C and are intended to make other older tags redundant: unfortunately they are not supported by older browsers and many recent browsers produce differing results. Their basic function, however, is to introduce a style that controls all instances of certain formatting across an entire webpage, or indeed an entire website. Styles can be defined inside a page, or the style may reside in a text document that is linked to each page from inside the head tags.

Base Href

This draws on our previously-gained knowledge of relative URL's. The base href tag instructs the Web Server to find any link listed as relative - bob_studyguide.html for instance starting from a particular base URL. This tag is not necessary in order for pages to function and is not always widely used.

<base href="http://www.monash.edu.au">

What actually happens is that the browser looks for http://www.monash.edu.au/bob_studyguide.html and not merely bob_studyguide.html

Home : Next Tutorial

This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it