Back to the purpose of the html element. This is the outermost "container" of our web page; everything else is kept within that outer container -- there are no exceptions! Let's peel off that outer layer and take a peek at the contents inside.
There are two major sections inside the html element: the head and the body. It's not going to be difficult to remember the order in which those items should appear, unless you happen to enjoy doing headstands.
The head Element
The head element contains information about the page, but no information that will be displayed on the page itself. For example, it contains the title element, which tells the browser what to display in its title bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
The title Element
The opening <title> and closing </title> tags are wrapped around the words "Untitled Document" in the markup above. Note that the <title> signifies the start, while the closing </title> signifies the end of the title. That's how closing tags work: they have forward slashes just after the angle bracket.
The "Untitled Document" title is typical of what HTML authoring software provides as a starting point when you choose to create a new web page; it's up to you to change those words. However, if you're creating a web page from scratch in a text editor (like Notepad), you will, I hope, remember to type something a little more useful. But just what is this title? Time for a screenshot: check out Figure 2.3.
Figure 2.3. "Untitled Document" -- not a very helpful title
It really would pay dividends to put something useful in there, and not just for the sake of those people who visit our web page. The content of the title element is also used for a number of other purposes:
- It's the name that appears in the Windows Taskbar for any open document, as shown in Figure 2.4. It also appears in the dock on a Mac, as Figure 2.5 illustrates. When you have a few windows open, you'll appreciate those people who have made an effort to enter a descriptive title!
Figure 2.4. The title appearing in the Windows Taskbar
Figure 2.5. The title displaying in the Mac dock
- If users decide to add the page to their bookmarks (or favorites), the title will be used to name the bookmark, as Figure 2.6 illustrates.
Figure 2.6. An untitled document saved to IE's favorites
- Your title element is used heavily by search engines to ascertain what your page contains, and what information about it should be displayed in the search results. Just for fun, and to see how many people forget to type in a useful title, try searching for the phrase 'Untitled Document' in the search engine of your choice.
#meta Elements
Inside the head element in our simple example, we can see a meta element, which is shown in bold below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
meta elements can be used in a web page for many different reasons. Some are used to provide additional information that's not displayed on-screen to the browser or to search engines; for instance, the name of the page's author, or a copyright notice, might be included in meta elements. In the example above, the meta tag tells the browser which character set to use (specifically, UTF-8, which includes the characters needed for web pages in just about any language).
There are many different uses for meta elements, but most of them will make no discernible difference to the way your page looks, and as such, won't be of much interest to you.
Note: Self-closing Elements
The meta element is an example of a self-closing element (or an empty element). Unlike title, the meta element needn't contain anything, so we could write it as follows:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"></meta>
XHTML contains a number of empty elements, and the boffins who put together XHTML decided that writing all those closing tags would get annoying pretty quickly, so they decided to use self-closing tags: tags that end with />. So our meta example becomes:
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
Note: The Memory Game: Remembering Difficult Markup
If you're thinking that the doctype and meta elements are difficult to remember, and you're wondering how on earth people commit them to memory, don't worry: most people don't! Even the most hardened and world-weary coders would have difficulty remembering these elements exactly, so most do the same thing -- they copy from a source they know to be correct (most likely from their last project or piece of work). You'll probably do the same as you work with project files for this book.
Fully-fledged web development programs, such as Dreamweaver, will normally take care of these difficult parts of coding.
Share and Enjoy:
