4
HTML Documents Need Good Structure
In This Chapter
Creating basic HTML document structure
Defining an HTML document header
Creating a full-bodied HTML document
The framework for a simple HTML document consists of a head and body. The head provides information about the document to the browser (and sometimes also to the web server), and the body contains content that appears in the browser window. The first step in creating any HTML document is to define its framework.
This chapter covers all major elements needed to craft basic structure for an HTML document — including its head and body. We also show you how to tell a browser which version of HTML you’re using. Although version information isn’t strictly necessary for users, browsers use it to make sure they display document content correctly.
Establishing a Document Structure
Although no two HTML pages are alike — each employs a unique combination of content and elements to define a page — every properly constructed HTML page follows the same basic document structure:
A statement that identifies the document as an HTML document
A document header
A document body
Each time you create an HTML document, you start with these elements. Then you fill in your content and markup to create an individual page.
HTML Document Organization Revisited
An HTML document consists of a collection of markup elements — some required, many optional — where you can always find at least three elements:
The <html></html>
opening and closing tags follow the DOCTYPE
declaration and contain everything else inside the HTML document.
The <head></head>
opening and closing tags follow the opening <html>
tag. They contain definitions, labels, and information about the HTML document body that follows.
Only certain markup elements are legal inside an HTML document head (which is another way of saying "may appear between the <head>
and </head>
tags"). The legal elements include base
, link
, meta
, script
, style
, and title
. (Collectively, these are known as HTMLHeadElements in the language of the HTML5 specification.)
The <body></body>
opening and closing tags follow the closing </head>
tag. They include the content and related markup for the HTML document. This is where 99 percent of the stuff that actually appears inside a web browser lives.
You could create an HTML document with no content in the <body>
, but why would you want to? It would display only a title and no other information. We actually do just that later in this chapter, so you can observe this exercise in futility without having to try it for yourself.
Likewise, you could build a complex body with only minimal markup in the <head>
section (the <title>
element is required, all other head-only elements are optional), but users and search engines that find your page might miss out on important info. That's why a properly structured HTML document includes a well-constructed <head>
along with an equally well-crafted <body>
. For HTML documents, a body needs a head, and a head needs a body.
HTML DOCTYPE Starts Things Off
First up in any HTML document sits a Document Type Declaration (DTD), or DOCTYPE
declaration. This line of markup specifies which version of HTML (or XHTML) you're using and also lets browsers know how to interpret what follows. We use the HTML5 specification in this chapter because that's what we want our readers to use. As an added bonus, it's dead simple — much more so than earlier HTML (and XHTML) versions, in fact.
HTML5 uses a minimal Document Type Declaration at the very outset of HTML documents. Here’s what it looks like:
<!DOCTYPE html>
No kidding: That’s all you need. That’s as simple as HTML gets.
The best possible course of action for you is to get with the HTML5 program and breeze past all that old-fashioned HTML 4.01 and XHTML 1.0 stuff.
The <html> Element
After you specify the HTML DOCTYPE
, you must add an <html>
element to contain all other HTML markup and document content in your page:
<!DOCTYPE html>
<html>
</html>
The opening <html>
element says "Hey! HTML document starts here." The closing </html>
element says, "Okay, this is the end of the document.Game over!"
Anatomy of the <head>
HTML document structure is hierarchical, so an entire document includes a head section. Thus, immediately following the opening <html>
element is where you define the head section, starting with an opening <head>
element and ending with a closing </head>
element.
Meeting the <head> himself
The head is one of two main components in any HTML document; the body is the other main component. The head, or header, provides basic information about the document, including its title and metadata (information about information), such as keywords, character encoding, author information, and a description. If you want to use an external style sheet within a page, information about that style sheet also goes into the header. Please do likewise — that is, add information to the head — if you want to establish a base for URLs referenced in a document, or call a script.
The <head>
element, which defines the page header, immediately follows the <html>
opening element:
<!DOCTYPE html>
<html>
<head>
</head>
</html>
Handling metadata with <meta>
Literally, metadata means data or information about data. Thus, the meta element is used to provide information about the HTML document inside which it appears. All <meta>
elements always appear inside the HTML <head>
, and may be used to define the character encoding — that is, the bit level codes used to represent character data — inside an HTML document. They can also define keywords for search engines, describe document content, identify the document's author, define a document refresh interval (the interval at which a page automatically reloads itself), and more.
Listing 4-1 shows all of these things for a hypothetical HTML document.
Listing 4-1: An HTML Document
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- defines default HTML character codes -->
<meta name="keywords" content="HTML, CSS, meta tag examples">
<meta name="author" content="Ed Tittel"> <!-- identifies author -->
<meta name="description" content="meta element discussion -->
<meta http-equiv="refresh" content="1800"> <!-- refresh every 30 mins -->
<title>Lots of head markup, no body</title>
</head>
<body></body>
</html>
A <meta>
element that identifies a charset
is required for a web page to validate at validator.w3.org
. (as is a <title>
element, covered in the next section). Don't leave them out! For more information about the HTML <meta>
element, for which there are umpty-ump cases and examples, please consult one or more of the following:
HTML5: Edition for Web Authors (The meta Element)
www.w3.org/TR/2011/WD-html5-author-20110705/the-meta-element.html
HTML <meta> Tag (W3Schools)
www.w3schools.com/tags/tag_meta.asp
<meta> (Mozilla Developer Network)
https://developer.mozilla.org/en-US/docs/HTML/Element/meta
If you take the time to enter the HTML markup from Listing 4-1, you see a web page with the title “Lots of head markup, no body” but nothing else to show for itself. If you can’t see the full title in the browser tab, hover the mouse cursor over the title, and the whole thing appears in a small text box. If you’d rather skip the text entry work, check out the screenshot in Figure 4-1.
Figure 4-1: A page with no content shows title text in the header but nothing else.
Redirecting users to another page
You can use metadata in your header to send messages to web browsers about how they should display (or otherwise handle) your web pages. Web builders commonly use the <meta>
element this way to redirect page visitors from one page to another automatically. For example, if you've ever come across a page that reads This page has moved. Please wait 10 seconds to be automatically sent to the new location.
(or something similar), you've seen this trick at work.
To use the <meta>
element to send messages to the browser, here are the general steps you need to follow:
1. Use the http-equiv
attribute in place of the name
attribute.
2. Choose from a predefined list of values that represent instructions for the browser.
These values use instructions that you can send to a browser in the HTTP header, but changing the HTTP header for a document is harder than embedding the instructions into the web page itself.
To instruct a browser to redirect users from one page to another, here’s what you need to do in particular:
1. Use the <meta>
element with http-equiv="refresh"
.
2. Adjust the value of the content
attribute to specify how many seconds before the refresh happens and what URL you want to access.
For example, the <meta>
element line in the following markup creates a refresh that jumps to www.w3.org
after 15 seconds:
<!DOCTYPE html>
<html>
<head>
<title>All About Markup</title>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="15; url=http://www.w3.org/">
</head>
<body>
<p>This page is still in development. Until we are done, please visit
the <a href="http://www.w3.org">W3C Website</a> for the definitive
collection of markup-related resources.
</p>
<p>Please wait 10 seconds to be automatically redirected to the W3C.</p>
</body>
</html>
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=93633
If a user’s browser doesn’t know what to do with your redirect, the user simply clicks a link, like the one shown in Figure 4-2, on the page to go to the new page.
Figure 4-2: When you use a <meta> element to redirect a page, include a link in case the redirect fails.
http://vancouver-webpages.com/META/metatags.detail.html
Naming your page with a <title>
Every HTML page needs a descriptive title to tell visitors what the page is about. This text appears in the title bar at the very top of the browser window, as shown previously in Figure 4-1. A page title should be concise yet informative. (For example, My Home Page isn’t as informative as Ed’s Web Design Services.)
Define a page title by using the <title>
element inside the <head>
element:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>Ed's Design Services</title>
</head>
</html>
The <body> Is a BIG Container
After you set up a page header, create a title, and define some metadata, you're ready to create HTML markup and content that will show up in a browser window. The body
element holds your document content.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ed's Web Design Services</title>
<meta name="keywords"
content="Web consulting, page design, site construction">
<meta name="description" content="About Ed's skills and services">
</head>
<body style="color: white;
background-color: teal;
font-size: 1.2;
font-family: sans-serif">
<h1>Ed's Web Design Services</h1>
<p>Ed has helped many Texas clients, large and small, to design and
publish their company and professional web sites. He specializes in
cutting-edge web designs, dynamic multimedia, and companion print-
design solutions to suit all business needs.</p>
<p>For more information, e-mail
<a href="mailto:[email protected]">Ed Tittel</a></p>
</body>
</html>
Figure 4-3 shows how a browser displays this complete HTML page:
The content of the <title>
element is in the window's title bar.
The <meta>
elements don't affect the page appearance at all.
Only the text contained between the <h1>
and <p>
elements (in the body
element) actually appears in the browser window.
Figure 4-3: Only content in the <body> element appears in the browser window.
3.147.104.120