Comments, etc.

Before we get into the body elements, let me deal with what doesn’t show up in the webpage itself. I’ll deal with the following elements:

  1. Comments
  2. HTML Root Element*
  3. Head Element*
    1. Metadata Element
    2. Link Element
    3. Base URI Element
    4. Title Element*
  4. Body Element*

*I know I’ve already mentioned these, but I am going to recap them and give some more information about them, such as what attributes are allowable here. Several of them allow the core and language attributes, others do not. The core and language attributes are rare enough amongst the head elements that I will mention them with each.

Comments

A comment doesn’t show up on the screen at all, nor does it affect your webpage in any way — in fact, the only way to see it is to look at the code itself. Comments is used for two things:

  • Documentation (A way of describing what each part of the page is for.
  • Keep code from affecting your page without actually removing it, a handy tool for troubleshooting.

A comment always starts with the character sequence <!-- and always ends with the character sequence --> There should always be a space after the opening double dash and before the closing double dash. Double dashes between the opening and closing character sequence should be avoided, lest the browser misinterpret that as the end of the comment.

Comments can go pretty much anywhere — even before the Doctype

Example Comment

<!-- This is an HTML comment. -->

The HTML Root Element

Element Name: html

As stated before, the html element is the root element of everything, with only the document type declaration existing outside of it.

It can also have only two elements: head and body, in that order.

Implied Attributes

The Language Attributes
lang, dir

The Head Element

Element Name: head

The head does the thinking for the webpage. It contains information about the webpage that both the browser and the server can use.

Implied Attributes

The Language Attributes
lang, dir

The Metadata Element

Element Name: meta

This element’s a bit tricky to explain, so I’ll use a few comparisons. A metamovie is a move about movies. A metabook is a book about books. Therefore, metadata is data about data. In this context, it’s information about your webpage. You can have as many of these elements as you like.

This is an empty element. It has no end tag.

Implied Attributes

The Language Attributes
lang, dir
http-equiv

This includes an HTTP response header, which tells the server what this page contains. When telling the server what the content is, HTML, response header should read Content-Type. The rest is defined in the content attribute.

If your webpage is updated frequently, you could also place the word Expires in this attribute, to tell the browser when the page needs to be redownloaded instead of fetched from a cache on the user’s computer.

name
This describes other properties of the webpage, and you can make these properties up as you wish. Commonly used properties include:

Author
Who’s creating the webpage?
Keywords
A few short keywords to help search engines find your webpage.
Date
The date your webpage was written

And so on and so forth.

Required Attributes

content

As the http-equiv and name attributes names the properties, the content attribute gives those properties their value. In the case of http-equiv="Content-Type", it would be content="text/html; charset=utf-8". The above would break down like this:

text/html
This is a text document, to be interpreted as HTML.
charset=utf-8
The utf-8 character set should be used when displaying your page. (A character set is basically the collection of characters your browser uses when interpreting and displaying the text. The utf-8 set is both modern and common.

If you recall the character encoding warning I told you about in Chapter 3, this is the fix: include meta http-equiv="Content-Type" content="text/html; charset=utf-8" in the document head.

If the http-equiv attribute defined when the page was supposed to expire, you would put a date in the content attribute, which would be in the following format:

  • Three-letter weekday abbreviation, followed by comma and space. (e.g. Wed)
  • Day of the month (e.g. 2)
  • Three-letter month abbreviation (e.g. Sep)
  • The year, all four digits (e.g. 2009)
  • Time in the following format
    • two-digit hours, using a 24-hour clock (e.g. 00, which is midnight)
    • two-digit minutes (e.g. 00)
    • two-digit seconds (e.g. 00)
    • Abbreviation for time zone (e.g. MST

This is what the element would look like: meta http-equiv="Expires" content="Wed, 2 Sep 2009 00:00:00 MST".

Of course, content would include your name if the name attribute included Author and so on.

The Base URI Element Element

Element Name: base

Remember in the hyperlinks chapter I talked about relative URIs? This element overrides the normal way relative URIs are calculated by giving the links an explicit default URI to work with. Because only URIs that come after this element are affected, it’s important to have this before any of your link elements.

This is an empty element. It has no end tag. There can only be one base element in an HTML document.

Required Attributes

href
Contains the default URI. This is the base element’s only attribute.

The Title Element

Element Name: title

Again, the title element contains the information contained in the browser title bar. If you use markup in the title element’s contents, it will show up as plain text rather than having any effect whatsoever. This one of the few non-empty elements that have no child elements.

Implied Attributes

The Language Attributes
lang, dir

To display what I’ve been talking about, below is an example head element with its child elements.

Example head code, using all the above elements
html in bold black, comments in italics,
meta in bold navy,base in bold maroon,
link in bold green, title in bold and underlined.

<head lang="en" dir="ltr">
<!-- Meta Tags, which give both server and user agent information about the HTML document/webpage. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" content="Thu, 26 Feb 2009 20:27:37 MST">
<meta name="Author" content="John Kraaikamp">
<meta name="Keywords" content="HTML, Tutorial, Webpages, how to">
<!-- The base element tells the browser what URI to use for determining relative URIs. THIS MUST BE AN ABSOLUTE URI! -->
<base href="http://www.example.org">
<!-- Link elements establish the relationship between different documents. Here, the class attributes give me some idea of what each link element is for. -->
<link href="../../Chapters/Part_2/Website_Chap007.html" rel="Prev" rev="Next" type="text/html" class="chapter_links">
<link href="../../Chapters/Part_2/Website_Chap009.html" rel="Prev" rev="Next" type="text/html" class="chapter_links">
<link href="../../contents.html" rel="Contents" rev="Chapter" type="text/html">
<!-- The title element displays text in the user agent's title bar. -->
<title lang="en" dir="ltr">Your Page Title</title>
</head>

The Body Element

Element Name: body

The body element contains all the information that appears in the window. As the head does the thinking, the body does the doing for the webpage.

Implied Attributes

The Language Attributes
lang, dir
The Core Attributes
class, id, style, title

On To The Body Elements

Unsurprisingly, the body element has the widest range descendant elements, and the largest group of these are the inline elements.

For the sake of simplicity, further code examples will not display the html element, head element and its children, or the body element. However, what code is displayed in the future is intended to be nested inside the body element:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example Title</title>
</head>
<body>
Example Code Here.
</body>
</html>