Basic Of HTML & XHTML Lesson 4

Structuring Your HTML


If you've created a game plan for the broad organization of your Web site, you're ready to learn the basic HTML tags that will lend depth and structure to it.

After completing this lesson, you should be able to:

Describe how XHTML and HTML can each treat basic tags differently
Apply HTML tags for overall page structure
Effectively use HTML tags for titles, headings, and paragraphs



HTML defines three tags that are used to describe the page's overall structure and provide some simple header information. These three tags — , , and — 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.





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 , , and tags.



In this example, the XHTML 1.0 Strict document type appears before the page structure tags. There are three HTML 4.01 document types used in the XHTML 1.0 specification, Strict, Transitional, and Frameset. These will become more important as you advance your skill set.



The Tag
The first page structure tag in every HTML page is the tag. It indicates that the content of this file is in the HTML language. In the XHTML 1.0 recommendation, the tag should follow the DOCTYPE identifier.

All the text and HTML commands in your HTML page should go within the beginning and ending HTML tags.







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 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 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 stricter. 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 tag.





The Tag

The tag specifies that the lines within the beginning and ending points of the tag are the prologue to the rest of the file. Generally, only a few tags go into the portion of the page.

You should never put any of the text of your page into the header (between tags). Here's a typical example of how you would properly use the tag:



The Tag

The remainder of your HTML page is enclosed within a tag. This includes all the text and other content (links, pictures, and so on). In combination with the and tags, your code resembles the following:



You might have noticed that each HTML tag is nested. That is, both and tags go inside both tags; the same with both tags. All HTML tags work this way, forming individual nested sections of text. Whenever you close an HTML tag, make sure that you're closing the most recent unclosed tag.

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 course display the proper way to close tags so that older browsers will interpret XHTML 1.0 closures correctly.


The Title

Each HTML page needs a title to indicate what the Web page describes. It is also used to refer to the page in the browser's list of favorites or bookmarks. It appears in the title bar of the browser when people view the Web page. The title is stored in your browser's favorites (or bookmarks), and in search engines when they index your pages.

The tags always go inside the page header and describe the contents of the page. You can have only one title in the page, and that title can contain only plain text; that is, no other tags should appear inside the title.



Try to choose a title that's both short and descriptive of the content and relevant even out of context. You might not intend the page to be used independently of the pages you specifically linked to it, but because anyone can link to any page at any time, be prepared for that consequence and pick a helpful title. Although the text within the tag can be of any length, be aware that it might be cut off by the browser when it's displayed.


NOTE

When search engines index your pages, each page title is captured and listed in the search results. The more descriptive your page title, the more likely it is that someone will choose your page from all the search results.



Headings

You use headings to divide sections of text. HTML defines six levels of headings (h1 through h6). The headings, when they're displayed, aren't numbered. They're displayed in larger or bolder text, are centered or underlined, or are capitalized — so that they stand out from regular text.

Think of the headings as items in an outline. If the text you're writing has a structure, use the headings to indicate that structure:





Headings can be any length, including many lines of text. Because headings are emphasized, however, having many lines of emphasized text might be tiring to read. A common practice is to use a first-level heading at the top of your page to either duplicate the title or to provide a shorter or less context-specific form of the title.

CAUTION

Don't use headings to display text in boldface type or to make certain parts of your page stand out more. Although the result might be desirable in your browser, other browsers might number headings or format them in a manner that you don't expect. Tools to create searchable indexes of Web pages might extract your headings to indicate the important parts of a page. By using headings for something other than an actual heading, you might be foiling those search programs and creating strange results.



Paragraphs

Although at one time it was optional to use the closing

tag, it's required under the XHTML 1.0 recommendation because all tags must be closed.


The first version of HTML specified the

tag as a one-sided tag. There was no corresponding

, and the

tag was used to indicate the end of a paragraph (a paragraph break), not the beginning.

Most early browsers assumed that paragraphs would be formatted this way. When they came across a

tag, these older browsers started a new line and added some extra vertical space between the line that just ended and the next one.




In the HTML 4.01 specification the paragraph tag is revised. In this version of HTML, the paragraph tag is two-sided (

...

), but

indicates the beginning of the paragraph. Also, the closing tag (

) is optional.

Older browsers accept this usage of the opening and closing

tags just fine. While at one time it was optional to use the closing

tag, it's a requirement under the XHTML 1.0 standard, all tags must be closed.

Some people prefer to use extra

tags between paragraphs to spread out the text on the page. Again, here's the cardinal reminder: Design for content, not for appearance. This is also an area where browsers are inconsistent. Some of them won't add space for empty

tags at all. Besides, these days controlling white space is best done with CSS.




Comments

You can put comments into HTML pages to describe the page itself or to provide some kind of indication of the status of the page. Some source code control programs can put page status into comments, for example. Text in comments is ignored when the HTML file is parsed; comments don't ever show up onscreen. Comments are inserted as .