META Tags, HEAD Tag, and Graphic Identity
Tuesday (10/12) from 2-3 p.m. in Baker Systems room 120
Top Search Terms for the beginning of Fall Quarter 2004 (PDF)
Please plan on attending the Web Interest Group this Tuesday (10/12) from 2-3 p.m. in Baker Systems room 120 to discuss the <HEAD> element in HTML documents. <HEAD> is used by search engines when indexing your web pages, and by web browsers when displaying your pages. One of the main elements within the <HEAD> tag is the <META> element. <META> is used to embed document meta-information not defined by other HTML elements. The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. Other elements include <TITLE>, <STYLE>, <LINK>, <SCRIPT>, and <BASE>. We will discuss these elements with regards to improving query results for Ohio State's search engine and other Internet search sites.
Additionally, David Hoover, Senior Director of Marketing Communications in University Relations will discuss Ohio State's new identity system. David's PowerPoint presentation shows concrete examples of how this new identity system is being implemented at Ohio State.
Overview Example | Overview Example 2
HTML HEAD Content
Document Type Declaration/Definition (DTD)
A valid HTML document first declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document.
The HTML 4.01 Strict DTD includes all elements and attributes that have not been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML Element
After document type declaration, the remainder of an HTML document is contained by the HTML element. Thus, a typical HTML document has this structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...The head, body, etc. goes here...
</HTML>
HEAD element
The HEAD element contains information about the current document, such as its title and keywords that may be useful to search engines, and other data that is not considered document content.
TITLE element
Every HTML document must have a TITLE element in the HEAD section.
<title>Some Web Page - The Ohio State University</title>Authors should use the TITLE element to identify the contents of a document.
META Element
The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.
Each META element specifies a property/value pair. The name attribute identifies the property and the content attribute specifies the property's value.
For example, the following declaration sets a value for the Author property:
<META name="Author" content="Dave Raggett">
The lang attribute can be used with META to specify the language for the value of the content attribute. This enables speech synthesizers to apply language dependent pronunciation rules.
In this example, the author's name is declared to be French:
<META name="Author" lang="fr" content="Arnaud Le Hors">
A common use for META is to specify keywords that a search engine may use to improve the quality of search results. When several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user. For example,
<-- For speakers of US English -->
<META name="keywords" lang="en-us"
content="vacation, Greece, sunshine">
<-- For speakers of British English -->
<META name="keywords" lang="en"
content="holiday, Greece, sunshine">
<-- For speakers of French -->
<META name="keywords" lang="fr"
content="vacances, Grèce, soleil">
The effectiveness of search engines can also be increased by using the LINK element to specify links to translations of the document in other languages, links to versions of the document in other media (e.g., PDF), and, when the document is part of a collection, links to an appropriate starting point for browsing the collection.
BASE element
The BASE element allows authors to specify a document's base URI explicitly.
When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source. The path information specified by the BASE element only affects URIs in the document where the element appears.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Our Products</TITLE>
<BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
<P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
</BODY>
</HTML>
STYLE element
The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.
User agents that don't support style sheets, or don't support the specific style sheet language used by a STYLE element, must hide the contents of the STYLE element.
<STYLE type="text/css">
<!--
H1 {border-width: 1; border: solid; text-align: center}
-->
</STYLE>
The example below shows four ways to combine style and HTML: using the LINK element to link an external style sheet, a STYLE element inside the HEAD element, an imported style sheet using the CSS @import notation, and a STYLE attribute on an element inside BODY. The latter option mixes style with content and loses the corresponding advantages of traditional style sheets.
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
Here is the STYLE Element taken from an OSU Web Template.
<style type="text/css">
<!--
@import url(../css/body.css);
@import url(../css/navbar.css);
@import url(../css/masthead.css);
@import url(../css/menu_tab.css);
@import url(../css/layout_1col.css);
@import url(../css/footer.css);
@import url(css/htmlandgraphics.css);
-->
</style>
More information - http://www.w3.org/Style/CSS/learning
LINK Element
The LINK Element conveys relationship information that
may be rendered by user agents in a variety of ways:
1. a tool-bar with a drop-down menu of links
2. links from an external style sheet to a document, the type
attribute specifies the style sheet language and the media attribute
specifies the intended rendering medium or media.
3. Authors may use the LINK element to provide a variety of
information to search engines, including:
- Links to alternate versions of a document, written in another human language.
- Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing.
- Links to the starting page of a collection of documents.
Style sheets may also be linked to an HTML document using the LINK element.
<link href="../css/noncompliant.css" rel="stylesheet" type="text/css">
SCRIPT Element
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
