Basic (X)HTML Structure
This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter covers the most basic (X)HTML elements—the ones you need to create the structure of your document. You'll learn how to create new paragraphs, headers, page breaks, comments, and more.
Creating a clear and consistent structure makes it that much easier to apply styles to your document.
Starting Your Web Page
Begin your page by using a DOCTYPE (see page 38) to declare what type of HTML or XHTML you're using. The DOCTYPE lets browsers know what to expect and tells validators how to judge your code in order to check its syntax. Then, signal the beginning of the actual code with the opening html tag.
)
Figure 3.1 Here's the DOCTYPE for a transitional HTML document as well
as the opening and closing html tags. It's a gruesome bit of text. I recommend
just copying it from one document to the next instead of trying to type all
that gobbledy-gook.
To start a transitional HTML 4 page:
-
Type <!DOCTYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ loose.dtd"> to declare that you're using transitional HTML 4.01 in your Web page.
-
Type <html> to begin the actual HTML portion of your document.
Leave a few spaces for creating the rest of your page (using the rest of this book).
-
Type </html>.
To begin a transitional XHTML page:
-
If desired, type <?xml version="1.0" encoding="UTF-8"?> to declare that your document is an XML document and that its encoding is UTF-8.
-
Type <!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> to declare that you're using transitional XHTML in your Web page.
-
Type <html xmlns="http://www.w3.org/ 1999/xhtml"> to begin the XHTML portion of your page and declare its namespace.
Leave a few spaces for creating the rest of your page (using the rest of this book).
-
Type </html>.
Tips
Both the DOCTYPE and the html element are optional in HTML (even strict HTML). XHTML requires both (with the name-space declaration in the opening html tag). Note that there is no xhtml element.
Figure 3.2 Here's the DOCTYPE for a transitional XHTML document,
the opening html tag and required namespace declaration, and the closing html
tag. Ugh! I've only shown how to write the DOCTYPE for transitional HTML and XHTML. You can find a list of common DOCTYPE declarations on my Web site (see page 24) or at http://www.w3.org. For help choosing an appropriate DOCTYPE, see page 38.
Create a template with the appropriate DOCTYPE declaration and html tag as a starting point for all your pages.
Declaring a DOCTYPE with a URL at the top of your Web page generally puts current browsers in standards mode—letting you use standards-compliant code in order to have more control over the display of your Web page (see page 39).
If you start an XHTML page with the xml declaration, IE 6 for Windows goes into quirks mode. That's a huge bug. The workaround? Skip the (optional) declaration and declare the encoding with the meta tag instead (see page 63) .
If you use non-standard HTML tags, there's no point in specifying a DOCTYPE. Just enclose your page in opening and closing html tags. Current browsers will use quirks mode when displaying your pages, letting you take advantage of old, soon-to-be-obsolete bugs (see page 39).
Declaring the appropriate DOCTYPE tells validators which specifications to compare your code against (see page 394).
Note that the word DOCTYPE (since it actually originated from another language called SGML) is typed in all uppercase letters, both in HTML and in XHTML.
)
Figure 3.2Find extra tips, the source code for examples, and more at www.cookwood.com