The Illinois of Art, Chicago
Web Scripting
Instructor: Lindsay Grace

 

Head Content

The head element is used by the web browser to understand the content of the web page. Some search engines also read and use the head element’s content to organize and match HTML pages when searching. Head content is easy to ignore, because it does not have a readily apparent effect. However, it is important for a quality, commercial site to completely list this information.

Accessibility: Head content is also designed to help browsers understand how to translate web pages for people with disabilities. Some browsers for the blind, for example, will read head element content to the user.

Required: Title Element <title> </title>
At its simplest, the title element specifies what the browser will place in the window or tab. If the title element reads “Best Page Ever” popular, browsers like Internet Explorer and FireFox will use that title in their program’s window.

<title>LGrace.com</title>

Title elements are also used in google and yahoo search to describe the page. Popular HTML authoring tools, like Dreamweaver set the title to “Untitled Document”, so be careful.

Optional: Metadata Elements <meta />
There are more metadata elements in use than the W3 has specified. These metadata elements help international browsers, search engines, robots, and other software understand the content of a page.

Metadata is information about other information (i.e. meta-data = middle-date). Metadata is supposed to be short, succinct information about the page. Because the developer provides metadata, it is not perfect data. Good search tools use more than metadata to determine the content of a web page.

All web browsers or search tools do not support the metadata elements listed below.

Here is a sample of the various type of metadata a developer can specify:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Specifies what kind of document follows. Most commonly, this will be text/html, but it could be text or XML. The charset specifies the ASCII character set used to construct the document. ISO (Industrial Standard Organization ) 8859-1 is most common.

<meta name="keywords" content="HTML, XHTML, Metadata ">

Specifies the keywords that describe the document. Older search engine technologies simply match against the keywords listed here.

<meta name="description" content="A description of metadata elements and attributes in XHTML and HTML for students of Lindsay Grace.">

Specifies the sentence description of the content. Older search engine technologies used this content as the link copy or description when listing the web page.

<meta name="author" content="Lindsay Grace">

Specifies who wrote the document.

<meta name="ROBOTS" content="INDEX,NOFOLLOW">

Provides index information to the robots polling the web for new pages. This should be used with a robots.txt file to really help search engines properly list the information in a complete site. This can be used to prevent search engines from listing all of the pages on a site.

<meta name="revisit-after" content="1 week" />

Provides information to Internet Service providers, search engines and robots. The revisit-after, if complied with, will encourage automated software to check for more recent version of the page. The interval can also be set in day increments, as in 7 days.

<meta name="generator" content="Dreamwaver 6.0" />

Provides information about the tool used to develop the content of the page. Most authoring tools provide this information automatically.

<meta name="resource-type" content="Public" />

Provides information about who may be allowed to view the information.

<meta name="MSSmartTagsPreventParsing" content="TRUE" />

Provides information to prevent errors caused by Microsoft’s proprietary technologies.

<meta name="distribution" content="Global" />

Provides information about the author’s chosen availability for the document. If you choose participate in the “World Wide Web,” global is a good setting.

<meta name="rating" content="Safe For Kids" />

Provides information about the adult nature of the content contained within the page. Adult content should be labeled as such.

<meta name="language" content="English" />
<meta http-equiv="Content-Language" content="en" />

Provides information about the language of the copy within the document. This is particularly useful for search engines that offer translation services.

<meta http-equiv="imagetoolbar" content="no" />

For Internet Explorer users, this can help the author prevent the browser’s image toolbar from appearing when images are shown. The image toolbar is a context sensitive software tool that makes it easer for users to save and copy images from a web site. Microsoft also suggests that images have the galleryimg attribute set to false to prevent the image tool bar from appearing.

<meta http-equiv="MSThemeCompatible" content="Yes" />

For Microsoft browser users (Internet Explorer, Windows Media player, et al) to allow themed viewing of web sites.

Complete Sample:

<head>
<title>LGrace.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Example, XHTML, HTML">
<meta name="description" content="Web development resource instruction.">
<meta name="author" content="Lindsay Grace" />
<meta name="robots" content="index,all" />
<meta name="revisit-after" content="5 days" />
<meta name="generator" content="Homesite 5.0" />
<meta name="resource-type" content="Public" />
<meta name="classification" content="Internet Services" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="robots" content="ALL" />
<meta name="distribution" content="Global" />
<meta name="rating" content="Safe For Kids" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="English" />
<meta name="doc-type" content="Public" />
<meta name="doc-class" content="Living Document" />
<meta name="doc-rights" content="Copywritten Work" />
<meta name="distribution" content="Global" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
</head>