Human eyeballs aren’t the only things reading your web page. Computers also visit your web page. In fact, computers are the only things that ever visit your web page: computers visit your web page and then store your web page in a database or display your web page to a human visitor.
Your web document has a <head> just as it has a <body>. The <head> is where you store information for computers, so that they can categorize your document and summarize it.
The HEAD of the document: Title
For example, try bookmarking your web page. Most likely, the bookmark will be nothing more than the file name. That’s because you haven’t told computers what title they should use for your page.
At the top of your document, between the “<html>” and the “<body>”, add:
<head>
<title>Review: Carnival of Souls</title>
</head>
Save the document, and then try bookmarking it. You’ll see that the title of your bookmark—most likely—is now “Review: Carnival of Souls”.
You should keep your title short and descriptive. It will be used by visual browsers to title bookmarks and tabs, and by search engines to title search results. Many browsers will also show the title at the top of the browser window.
Description
You can also add a description to your web page. The description provides a summary of your page for search engines and other software to use. The description is contained in a meta tag. Meta tags come in two parts: the name and the content. They always go in the <head> of the document.
Add this meta tag to the <head> area, below the title:
<meta name="description" content="This seminal horror movie contains no blood, no knives, and for the most part, no budget, but it was well-written, beautifully shot, and carefully directed and acted." />
Notice the close of this tag. There is no “</meta>” tag, because the meta tag doesn’t surround any text. In XHTML, all tags have to end, so this abbreviated form exists for tags that don’t really need two parts.
In HTML, the meta tag doesn’t use “/>” to end, nor does it use “</meta>”. It just ends at the “>”.
The meta tag also illustrates another feature of HTML tags: they can contain attributes. Attributes are in the form “name=value”. Here, description and name are both attributes of this meta tag.
The HEAD of the document: Keywords
It is also useful to add keywords to your web page. Keywords help software categorize your web page. Some search engines will use your keywords, although because they can be easily spammed most search engines will not provide high ranking to them. (Google, for example, claims not to use them at all.) They’re still useful for internal search engines, for other software that accesses web pages, and to help you categorize your page content.
<meta name="keywords" content="Criterion, eerie, horror, influential, Herk Harvey, John Clifford" />
Keywords are listed separated by commas.
Style sheet
Often, you’ll have a company-wide or site-wide style sheet that you’ll want applied to all web pages. In HTML, this is “CSS” or “Cascading Style Sheets”. CSS is another entire tutorial, but I do have a style sheet ready for use with this review. Add this tag to the head of the document:
<link rel="StyleSheet" type="text/css" media="all" href="review.css" />
Like the meta tag, the link tag does not surround text, so it uses the abbreviated ending form in XHTML and has no ending in HTML. It also contains the attributes rel, type, media, and href. The first attribute, rel, is the relation between this link and the page that contains the link tag. It’s a style sheet for this page. It’s type is that it’s a text file that contains CSS. It is meant for all media (print and screen being two common media), and it links to the href, or hypertext reference, “review.css”. I’ll talk more about that later, under linking.
Once you add the style sheet, reload the page. You should see the headline, first paragraph, and blockquote are now centered. The paragraph and blockquote are emphasized. And there’s a horizontal line underneath the quote. These changes are all in the style sheet, and can be changed by changing the style sheet.
You can have as many <link> tags in your page’s <head> as you need.
