Web Standards in Dreamweaver, Part 1 - The Rules of Writing XHTML
(Page 2 of 7 )
For anyone with a reasonable understanding of HTML, XHTML is not difficult to learn, and of course, Dreamweaver MX will help you all the way. All you need to do is follow a few simple rules that are common to all XML (and therefore XHTML) documents.
Document Type Declaration
An XHTML document must validate against one of the following three XHTML DTDs:
• XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• XHTML Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
As you will see later in this chapter, XHTML Strict does not allow any deprecated elements or framesets, XHTML Transitional supports deprecated elements (those elements that have been flagged for removal in future versions of [X]HTML) but not frames, and XHTML Frameset is the version that supports deprecated elements and frames. There must be a DOCTYPE declaration in the document above the <html> tag, and it must reference one of the XHTML DTDs. Dreamweaver MX inserts the XHTML Transitional DTD by default when you create a document with the Make document XHTML compliant check box selected in the New Document dialog box, as shown in Figure 2-1. However, if you are creating a frameset, it will insert the Frameset DTD.
Figure 2-1. The New Document dialog box
Today’s web contains a varied mix of web sites; some are written to the new standards of HTML 4.01 or XHTML and others are a mixture of HTML versions utilizing browser-specific tags and quirks for specific effects. In order to handle this, the latest browser releases use the DOCTYPE to decide whether the document’s author expects a standards-compliant browser to render the page or whether the page was written for older, non–standards-compliant browsers and might rely on quirky, non-standard behavior. DOCTYPE “sniffing,” as it has come to be described, relies on the fact that most of these quirky documents either have no DOCTYPE or use an old DOCTYPE.
Using any of the XHTML examples shown earlier will cause modern browsers to switch into standards-compliant mode and render your pages relatively close to the W3C specifications. Please note that using the XML declaration or prolog (<?xml version="1.0" encoding="UTF-8" ?>) at the top of your document will switch Internet Explorer 6 back into Quirks mode, causing IE 6 to assume that you want to display your pages as they would appear in older versions of browsers, whereas Netscape 6+ and Mozilla will display your pages in a standards-compliant manner. This was added in the previous version of Dreamweaver, so if you want to work to standards-compliant mode, the best advice is to remove it. Your pages will still be valid XHTML documents without it.
If you are still working in HTML, you can also work in standards-compliant mode by using a complete HTML 4.01 DOCTYPE (that contains a URL).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 -> Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you use an incomplete DOCTYPE (like the following one) or no DOCTYPE at all, IE 6, Mozilla, and Netscape 6 will assume that you want your pages to look as they did in older versions of browsers and revert to their Quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Quotation Marks
All attribute values must be enclosed in quotation marks. In the following <img> tag, the height and width attributes are incorrectly defined:
<img height=100 width=300 alt="my logo" src="logo.gif" />
Here is the correct way to do it:
<img height="100" width="300" alt="my logo" src="logo.gif" />
Although previous versions of Dreamweaver tended to quote attributes correctly, you may find that code snippets that you or other developers on your team use may not be as carefully written. Selecting Commands -> Clean up XHTML will add quotation marks where they are needed in your document.
Case Sensitivity
Element and attribute names must be in lowercase. Both of the following lines are incorrect:
<IMG HEIGHT="100" WIDTH="300" ALT="my logo" SRC="logo.gif" />
<img HEIGHT="100" WIDTH="300" ALT="my logo" SRC="logo.gif" />
Here is the correct XHTML:
<img height="100" width="300" alt="my logo" src="logo.gif" />
If you have always written your HTML tags in uppercase to easily differentiate between tags and content, you may find this change difficult at first. JavaScript event handlers such as onclick or onmouseover must also be written in lowercase.
The following JavaScript is incorrect:
onMouseOver="MM_swapImage('img1','','i/button01b.gif',1)"
Here is the correct way to do it:
onmouseover="MM_swapImage('img1','','i/button01b.gif',1)"
When working with an XHTML document, Dreamweaver MX will generate lowercase code, including JavaScript. If you are working in HTML, you can choose whether to use uppercase or lowercase for HTML tags in the Preferences dialog box. However, it is not a bad idea to begin to work in lowercase—even in HTML— because it will be necessary in the future.
Closing Tags for Nonempty Elements
A nonempty element is a tag that contains something between the start tag and the end tag. Some HTML elements can be written without the closing tag; for example, the closing </p> tag of the paragraph element is optional and therefore omitted by many HTML authors. In XHTML however, all elements must be closed.
The following, although valid in HTML, is incorrect in XHTML:
<p>This is some text formatted in a paragraph.
<p> This is the second paragraph.
Here is the XHTML way of marking up the same text:
<p>This is some text formatted in a paragraph.</p>
<p> This is the second paragraph.</p>
Dreamweaver MX closes all nonempty elements whether you are working in HTML or XHTML, and will add closing tags when you run the Clean up HTML command.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Empty Elements >>
More Web Standards Articles
More By Apress Publishing
/ 12 
