All HTML documents have a <HEAD> section towards the beginning. The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, info on it's position with the Web and relationshiip with other documents, and other data that is not considered document content. The elements within the HEAD are generally not displayed, but instead provide information to browsers, spiders, and to users who View Source.
This article will discuss some of the most common HEAD elements you might want to include in your documents, why, and how. For more detailed information about some of the more obscure elements, check out a good HTML reference, like those in our Links section. Pay special attention to the <TITLE> tag and to our article on <META> tags, the two tags I consider essential to effective pages.
A Typical <HEAD> section:
The <HEAD> section typically comes right after <DOCTYPE> declaration and the beginning <HTML> tag, aand before the <BODY> or <FRAMESET> tag. A typical section might look like this one, from a homepage I did for a restaurant:
<HTML>
<HEAD>
<TITLE>Oliver's Lodge: An Historic Dining Decision</TITLE>
<META NAME="AUTHOR" CONTENT="Dr. Barbara Strand">
<META Name="Description" Content="By the water in pastoral Murrell's Inlet is its oldest and finest restaurant, the historic Oliver's Lodge and Dining Room. Serving a fresh and creative menu in the warm, casual atmosphere of a Pre-Civil War homestead.">
<META Name="Keywords" Content="South Carolina, Murrell's Inlet, restaurant, dining, Oliver's, Lodge, seafood, Edwards.">
<META NAME = "Copyright"
CONTENT= "1997 Oliver's Lodge, Inc.">
<LINK rel= STYLESHEET
href= "http://www.pcs.com/ostyle.css"
Type= "text/css">
</HEAD> |
Head: The <HEAD> tag must be closed (</HEAD>). No attributes are associated with the actual <HEAD> tag; it just serves as a container for the header tags that come between. And yes, many browsers will allow you to omit this section, but don't. Good coding requires it.
Title: The <TITLE> tag is crucial for effective web pages; while despite most warnings it could technically be omitted, don't. If you have nothing else in the <HEAD> section, have this. It must be closed (</TITLE>). It provides the title of the document, which doesn't appear on the document itself, as it would in print; instead, it will appear in a window bar at the top of the browser window, allowing the surfer to know the name of the page s/he is viewing. Importantly, it is also used to label a bookmark entry for the document and as a caption in search engine results.
Each document can have only one title, which should identify the document content in a general way. No markup formatting of the title is permitted. We recommend keeping titles to fewer than 64 characters, to avoid them being cut off in some applications.
Make your title effective. Make sure it is also useful out of context; it should still be understandable when it is used as label in a bookmarks file. A title such as "Introduction" is meaningless out of context. A title such as "A Quick Introduction To Bedbugs" is much more informative. And "Page Two" or "Links Page" is likewise unhelpful; better to use something like "Bedbugs 2: The Life Cycle" or "Bedbugs: Useful Links". In our sample, we used a marketing slogan "Oliver's Lodge: An Historic Dining Decision" as the title on the first (home) page of the restaurant site, leaving no doubt as to what the page is about, and giving it a plug to boot. A page on the history of the Lodge is titled "Oliver's Lodge: Our Fascinating History". When these show up in a search engine, they might entice a user to come look at the site.
<META>: This extremely versatile and useful tag is used to supply all kinds info, as name/value pairs, to browsers, search engine spiders, etc. The Meta tag is so important that it is covered in its own article.
<Link>: This unclosed tag is used to define relationships with other documents.
You may use either the rev attribute or the rel attribute or both in one tag:
<LINK rev="RELATIONSHIP" rel="RELATIONSHIP" href="URL">
The href attribute specifies the URL of the target <LINK> tag. The rel attribute specifies the relationship between the HTML file (source document) and the target URL. The rev attribute (for "reverse") specifies the relationship between the URL and the HTML file. This is mostly used in very complex sites, to place this document in the context of the overall site, and now to link to stylesheets (as seen above.)
You can place a page in a sequence of documents like this:
<LINK HREF="part14.htm" rel=next rev=prev> when referencing the next document in the series.
This can be used by advanced browsers to automatically generate a navigational buttonbar for the site.
REV="made" Indicates the creator of the document. Usually the URL is a mailto: URL with the creator's e-mail address. Your users can comment on the page with just one button or keystroke.
REL="stylesheet" Indicates the location of the appropriate style sheet for the current document (see TYPE, below).
(More complex rel and rev attributes, including indications of tables of contents, glossaries, indexes, help files, etc. are possible, but beyond the scope of this article. Check out some of the more thorough HTML references for more info.)
Here's an interesting use of the <LINK> tag: you can use the TITLE attribute to specify a title of a referenced resource that doesn't have a title, such as an image or a non-HTML document; the browser will use the <LINK> title when displaying the referenced resource:
<LINK HREF="pics/staff.gif" TITLE="Our Friendly Staff">
You can use the TYPE attribute to provide a MIME content type of linked document, particularly useful for defining linked stylesheets:
<LINK HREF="styles/ostyle.css" REL=stylesheet TYPE="text/css">
<Base>: There are two important attributes of this unclosed tag: HREF and TARGET.
The BASE HREF tag defines the base URL for resolving relative URLs. This allows you to move the document to a new directory (or even a new site) and have relative URLs access the appropriate place with respect to the original URL.
Normally, a browser fills in the blanks of a relative URL like <A HREF="page2.htm"> by drawing the mising pieces of the URL of the current document.
Also useful is the TARGET attribute; when working with documents inside frames, this attribute lets you establish the default name of one of the frames or windows in which the browser is to display hyperlinked documents. If you don't have other targets for your hyperlink within your frames, consider using <BASE TARGET=_top"> to ensure that links not specifically targeted to a frame or window will load in the top-level browser window. This prevents other sites linked to from your pages from appearing within a frame on your pages, irritating both to your users and the author of the other site.
<Style>: This closed (</STYLE>) tag allows document-specific styles to be described. The STYLE element provides a means for including layout/display information using a specified style notation. Information in the STYLE element overrides a user's defaults and that of any linked style sheets, but does not override any an inline STYLE attributes included on the page itself. It allows you to specify overrides, and so improves the effectiveness of caching schemes for linked style sheets.
The <STYLE> tag, in effect, lets you insert foreign (non-HTML) content into your HTML document for the browser to use to format your tags. The only attribute is TYPE, defining the types of styles you are including. Cascading Style Sheets always carry the type text/css. JavaScript style sheets use type text/javascript.
Let's say you wanted all <H1> tags in your document to display as blue, italic text. This can be accomplished by including in the <HEAD> section something like this:
<STYLE TYPE="text/css">
<!--
/* make all H1 headers blue italic */
H1: (color: blue; font-style: italic)
-->
</STYLE>
Of course, you could create an external style sheet with this style rule and link to it with the above described <LINK rel=stylesheet TYPE="text/css" HREF="headstyl.css"> or with the following import instructions in the <STYLE> tag:
<STYLE>
<!--
@import url(http://www.pcs.com/headstyl.css);
[now put any other style info here, otherwise it will be ignored]
-->
</STYLE> |
Other <HEAD> tags such as <isindex> and <nextid> are pretty esoteric for our needs, and can be found in a more complete HTML reference.
The <HEAD> section lays the foundation for your page and its presentation to the user. As such, it is worth your consideration. If all you do is use this section for informative titles and effective <META> tags, you will have boosted the power of your site significantly.
