Structuring Your HTML


HTML defines three tags that are used to describe the page's overall structure and provide some simple header information. These three tags<html>, <head>, and <body>identify your page to browsers or HTML tools. They also provide simple information about the page (such as its title or its author) before loading the entire thing. The page structure tags don't affect what the page looks like when it's displayed; they're only there to help tools that interpret or filter HTML files.

In the strict HTML definition, these tags are optional. If your page does not contain them, browsers usually can read the page anyway. These tags, however, are required elements in XHTML 1.0. The most recent browsers already take advantage of XHTML. You should get into the habit of including the page structure tags now.

The DOCTYPE Identifier

Although it's not a page structure tag, the XHTML 1.0 recommendation includes one additional requirement for your web pages. The first line of each page must include a DOCTYPE identifier that defines the XHTML 1.0 version to which your page conforms, and the document type definition (DTD) that defines the specification. This is followed by the <html>, <head>, and <body> tags. In the following example, the XHTML 1.0 Strict document type appears before the page structure tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html> <head> <title>Page Title</title> </head> <body> ...your page content... </body> </html>


Three types of HTML 4.01 document types are specified in the XHTML 1.0 specification: Strict, Transitional, and Frameset. Refer to Lesson 16, "Writing Good Web Pages: Do's and Don'ts," for more information about the DOCTYPE tag, and more information about the differences between Strict, Transitional, and Frameset document types.


The <html> Tag

The first page structure tag in every HTML page is the <html> tag. It indicates that the content of this file is in the HTML language. In the XHTML 1.0 recommendation, the <html> tag should follow the DOCTYPE identifier (as mentioned in the previous note) as shown in the following example.

All the text and HTML elements in your web page should be placed within the beginning and ending HTML tags, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> ...your page... </html>


Before XHTML 1.0, you could play fast and loose with the tags in your documents. In order for your HTML to be valid, you needed to include the <html> tag around all the other tags in your document, but none of the popular browsers cared if you really did. If you left them out, or included the beginning <html> tag but not the closing tag, or whatever, the browser would still display the document without complaining. With XHTML 1.0, your HTML documents must also be valid XML documents, so the rules are much more strict. XML documents require all the elements in a file to be enclosed within a root element. In XHTML 1.0 documents, the root element is the <html> tag.

The <head> Tag

The <head> tag specifies that the lines within the opening and closing tag are the prologue to the rest of the file. Generally, only a few tags go into the <head> portion of the page (most notably, the page title, described later). You should never put any of the text of your page into the header (between <head> tags).

Here's a typical example of how you properly use the <head> tag (you'll learn about <title> later):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>This is the Title. It will be explained later on</title> </head> ...your page... </html>


The <body> Tag

The remainder of your HTML page (represented in the following example as ...your page...) is enclosed within a <body> tag. This includes all the text and other content (links, pictures, and so on). In combination with the <html> and <head> tags, your code resembles the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>This is the Title. It will be explained later on</title> </head> <body> ...your page... </body> </html>


You might notice here that each HTML tag is nested. That is, both <body> and </body> tags go inside both <html> tags; the same with both <head> tags. All HTML tags work this way, forming individual nested sections of text. You should be careful never to overlap tags. That is, never do something like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <body> </head> </body> </html>


Whenever you close an HTML tag, make sure that you're closing the most recent unclosed tag. (You'll learn more about closing tags as you go on.)

Note

In HTML 4.0 and earlier, some tags are optionally closed. In other tags, closing tags are forbidden. In the XHTML 1.0 recommendation, all tags must be closed. If you're just learning HTML, this won't be a big deal, but if you already have a passing familiarity with the language, this might surprise you. The examples shown in this book display the proper way to close tags so that older browsers will interpret XHTML 1.0 closures correctly.





Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net