Article
Dreamweaver 8 Does Standards!
Chapter 3. XHTML and Semantics
Dreamweaver MX was the first version of Macromedia Dreamweaver to provide support for those working in XHTML—a development that reflected the fact that many developers have moved from HTML to XHTML. In this chapter, we'll explore XHTML in some depth. We'll understand why it's different from HTML, why we might want to use it in preference to HTML, and how we could go about doing so.
In this chapter, we'll see not only how valid XHTML is written, but also, how to structure an XHTML document correctly in order that our content is accessible to all users.
What is XHTML?
XHTML is basically the union of two languages: HTML and XML. You're probably already familiar with HTML, but XML may need a brief introduction.
XML
Extensible Markup Language (XML) is a general-purpose language for structuring data in a way that's easy for both humans and computers to read, as shown here:
<?xml version="1.0" encoding="iso-8859-1"?>
<orders date="March 31 2006" xmlns="http://myshop.com/orders.dtd">
<order productID="52478">
<description>Dreamweaver 8 (OS X)</description>
<recipient>
<name>Sally Smith</name>
<address>
<street>474 Smith St.</street>
<city>Collingwood</city>
<state>Victoria</state>
<zipCode>3068</zipCode>
<country>Australia</country>
</address>
</recipient>
</order>
<order productID="52477">
<description>Dreamweaver 8 (Windows)</description>
<recipient>
<name>John Jameson</name>
<address>
<street>Level 5, 142 Park Avenue</street>
<city>New York</city>
<state>New York</state>
<zipCode>10167</zipCode>
<country>United States</country>
</address>
</recipient>
</order>
</orders>
We can see that this code comprises a list of two orders made on March 31, 2006: one for Dreamweaver 8 for Mac OS X (to be delivered to Sally Smith in Australia), and the other for Dreamweaver 8 for Windows (to be delivered to John Jameson in New York).
The actual tags that are used here aren't part of XML; XML defines only how the tags are written. It's up to the entities that create and consume these files to agree on the actual tags that are used. In this way, we can define lots of useful languages within XML; XHTML is one of these.
XHTML
XHTML came into being as a recommendation that was released by the W3C on January 26, 2000. XHTML represented a reformulation of HTML—the original language of Websites—into an XML application designed to meet the future needs of the Web. Indeed, XHTML can be regarded as the latest version of HTML, as no further HTML specifications will be developed or released.
As XHTML is a reformulation of HTML, rather than a completely new markup language, it will seem very familiar to anyone who has already used HTML. There are very few differences between XHTML and HTML, which makes life easy for the Web developer who wishes to work in XHTML. We will discuss these differences in this chapter, and see why we might want to use XHTML over HTML.
What Makes a Valid XHTML Document?
In order to create a valid XHTML document right from the start, we need to include certain elements in that document before we begin marking up content. We're fortunate in that Dreamweaver will give us a valid XHTML document as a starting point, if we use File > New… to open the New Document dialog, then select Basic Page, HTML, and then select one of the XHTML 1.0 document types from the Document Type (DTD) drop-down list. The default selection is XHTML 1.0 Transitional, which will create a page containing the following markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
</body>
</html>
The DOCTYPE
A valid XHTML document must use an XHTML DOCTYPE. We discussed DOCTYPEs in Chapter 1, What are Web Standards?; you'll remember that this line identifies the specification to which the document is written. The XHTML Transitional DOCTYPE is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Note: Using the XML Declaration
Sometimes, you'll see an XML Declaration, like the one shown below, as the first line of an XHTML document.
<?xml version="1.0" encoding="UTF-8"?>
This XML Declaration, which declares that the document is XML, is recommended but not required. This line was inserted by Dreamweaver MX. However, Dreamweaver 8 doesn't insert the XML Declaration, as it has the unfortunate effect of switching Internet Explorer 6 into "Quirks Mode"—a special mode that disregards Web standards in favor of Internet Explorer 5's nonstandard rules.
The html Element
<html xmlns="http://www.w3.org/1999/xhtml">
The html element is known as the root element of the document. To be a valid XHTML document, this element needs to include the xmlns="http://www.w3.org/1999/xhtml" part; this attribute, part of XML, states that the elements in the document comply with the XHTML standard, by default.
Note: XML Namespaces
The actual tags used in an XML document can be defined by one or more document type definitions, or DTDs (these are different from the DOCTYPEs, document type declarations, that we discussed earlier). DTDs can be linked into an XML document using the xmlns attribute. (Strictly speaking, xmlns attributes do not need to point to a DTD, as evidenced by the URL used to identify the XHTML namespace (http://www.w3.org/1999/xhtml). XML actually allows any text string to identify an XML namespace. Using the public URL of the relevant DTD is simply a useful convention to use for custom XML document types. None of this really matters for our purposes, however.)
Each DTD is given a "namespace," which forms a prefix for the tags that are part of that DTD. One DTD may be given the "default namespace" (which has no prefix), but other DTDs used in the document require unique prefixes.
For example, if we wanted to add some XML from our order list to an XHTML document, we could add a namespace to our document like so:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ord="http://myshop.com/orders.dtd">
Within the XHTML document, we could then use the ord: prefix to indicate that the element is from the order list DTD:
<h2>Orders Placed</h2>
<ord:orders>
<ord:order productID="52478">
<ord:description>Dreamweaver 8 (OS X)</description>
<ord:recipient>
<ord:name>Sally Smith</ord:name>
<ord:address>
<ord:street>474 Smith St.</ord:street>
<ord:city>Collingwood</ord:city>
<ord:state>Victoria</ord:state>
<ord:zipCode>3068</ord:zipCode>
<ord:country>Australia</ord:country>
</ord:address>
</ord:recipient>
</ord:order>
</ord:orders>
The head Element
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
The head element contains the title element, which gives the page a title. In the snippet above, you can see that Dreamweaver has inserted "Untitled Document" by default: there are many thousands of documents on the Web titled "Untitled Document" because their authors forgot to change the documents' titles!
In the head of the document we can also see a <meta> tag. This <meta> tag declares the Content-Type of the document, as well as the character encoding used.
The body Element
<body>
</body>
Here's the body element, into which you'll place all of the content that you wish to make available to your site's visitors.
XHTML and HTML: the Differences
There are only a few rules to keep in mind when using XHTML instead of HTML. Although we'll use Dreamweaver to write our XHTML—and can rely on the program to do a pretty good job of it—it's worth understanding the differences between the two languages. It's inevitable that, sometimes, you'll need to hand-code markup, or edit markup you've copied from other sources in order to make it XHTML compliant.
Quoting Attribute Values
In HTML, it's perfectly valid not to quote attribute values. For example, the following image markup is valid HTML:
<img src="/img/me.jpg" alt="A picture of me" height=400 width=200>
To make this valid XHTML, you need to insert quotes around the attribute values, height="400" width="200". Dreamweaver writes both HTML and XHTML with quoted attribute values; however, you might find that markup you've copied from other sources contains these unquoted HTML values.
Closing all Empty and Non-empty Elements
As you'd probably expect, a non-empty element is any element that contains something—for example, text, scripts or other data content—between a start and end tag. p and li are examples of non-empty elements. In HTML, we aren't required to close these elements, so the following list is valid HTML.
<ul>
<li>List item one
<li>List item two
<li>List item three
</ul>
However, this would constitute invalid XHTML, as the li element has not been closed. This issue has been rectified in the valid XHTML markup below:
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
What about elements such as hr, img, and br? These empty elements must also be closed. In XML, you can do this with <hr></hr>, or by using XML's shorthand notation, <hr/>. Unfortunately, older browsers would likely balk at such odd markup. As you might have guessed, the clever folks who put together XHTML came up with a solution to this problem: use the shorthand notation, but insert a space between the element's name and the closing slash (<hr />). This still represents valid XML, so XHTML-aware browsers won't have a problem with it, and older browsers see the closing slash as an unrecognized attribute.
Avoiding Minimizing Attributes
HTML supported minimizing attributes, or leaving out an attribute's value when it's not required. Consider this example of attribute minimization:
<input type="checkbox" checked>
Above, the attribute checked indicates that the checkbox should be checked when it displays on the page. XML doesn't support minimizing attributes in the same way HTML does, so to achieve this using valid XHTML, we need to give these attributes a value:
<input type="checkbox" checked="checked" />
Here, the value of the attribute becomes the same as its name. This is the case for several attributes that are minimized in HTML:
selected="selected"disabled="disabled"readonly="readonly"
Writing Elements and Attributes in Lowercase
XHTML requires that all tags and attributes be written in lowercase. HTML is not case-sensitive: we could even use a mixture of upper- and lowercase with that language. Yet XML is case sensitive, so XHTML requires the use of lowercase tags, as illustrated in the below example.
<p>This line is <em class="formal">valid</em> XHTML</p>
<p>This line is <STRONG STYLE="text-transform: uppercase;">
not</STRONG> valid XHTML</p>
Nesting Elements Properly
Web browsers are generally very tolerant of errors in HTML, but less tolerant of errors in XHTML. The following example constitutes invalid HTML and XHTML, but would generally display as the author (probably) intended:
<p><em>This text is emphasized</p></em>
In HTML, tags must be nested correctly; that is, the last tag that was opened must be the first tag that's closed. This requirement becomes even more important when we start to use XML, and to mark up our document for meaning. Thus, we need to edit the above to nest our tags correctly:
<p><em>This text is emphasized</em></p>
Using id Instead of name to Identify Elements
HTML allows us to use the name attribute to identify particular elements on the page. name could be used for a number of purposes: to reference an element using JavaScript, to name a form element so that it could be collected once the form had been submitted, and more. Here's name in action:
<form method="post" action="/cgi-bin/search.cgi">
<img src="search.gif" name="Image1" alt="Search ">
<input type="text" name="searchField">
<input type="submit" value="Search">
</form>
In XHTML, we must use the id attribute instead:
<form method="post" action="/cgi-bin/search.cgi">
<img src="search.gif" id="Image1" alt="Search " />
<input type="text" id="searchField" name="searchField" />
<input type="submit" value="Search" />
</form>
Have a close look at that, and note that I've left the name attribute on the <input> tag. Form fields are the one place where the name attribute is still kosher; however, it isn't used to identify these elements in the document: it's used to supply the variable name under which the field's value will be submitted. In XHTML Strict, that's the only purpose for which the name attribute may be legally used.
Dreamweaver will add both name and id attributes to a given element (giving both attributes the same values) in an XHTML Transitional document.
Note:The id Must be Unique
Unlike names, elements' id attributes must be unique: there cannot be more than one element with a particular id in any given document.
Why use XHTML?
We've explored the differences between XHTML and HTML, and we now have a clearer understanding of each language. But the fact remains that we can create a standards compliant, accessible and semantic Website that validates to HTML 4.01 if we want to. Why should we consider moving to XHTML?
Creating Clean Markup
HTML allows developers to write markup in a very flexible manner. It isn't very strict with the application of rules such as closing tags like <p>. For example, consider the following:
<p>This is a paragraph.
<p>This is another.
HTML allows this markup, rather than demanding that the closing </p> tag be used to mark up the end of the paragraph, like so:
<p>This is a paragraph.</p>
<p>This is another.</p>
HTML allows the creation of simpler, but more ambiguous markup, whereas in XHTML every opening tag must be matched by its closing tag. While it might seem like quite a good idea to take a flexible approach to markup, which enables people with little technical expertise to easily create documents for the Web, this approach can also cause a number of problems, particularly where these untidily marked-up documents are to be read by devices that don't have the processing power of a desktop computer.
Making Code Easier for Machines to Process
XHTML is easier than HTML for a computer to process because XHTML does not permit the flexibility allowed by HTML. This means that documents marked up using XHTML are more easily read or displayed by devices other than a conventional Web browser—devices such as screen readers, Web-enabled phones, Braille readers, and search engines.
Boosting the Portability of Content
The content that you've marked up within your Web page is valuable in its own right; in the future, you might want to reuse it in a different format. If that content was marked up using HTML—even valid HTML—it would be more difficult to reuse the content in another application than if it was marked up in XHTML. XHTML's rigorous conformance to XML rules means that it's far easier to transform an XHTML document into some other format. This would be very useful if you had decided to rebuild your site with a database-driven back-end, for example, and needed to get all that marked-up content into the new database.
Allowing Integration with other XML Applications
XHTML allows the incorporation of tags from other XML applications such as MathML, SMIL (Synchronized Multimedia Integration Language), and SVG (Scalable Vector Graphics). This might not seem particularly useful right now, unless you have a very specialized requirement, but XHTML's integration capabilities are likely to become more important in the future.
XHTML in Dreamweaver
Having read through all the do's and don'ts in the previous sections, you'll be glad to know that we'll be letting Dreamweaver write most of the XHTML markup for us. Now, let's take a look at the tools Dreamweaver provides to help us write valid XHTML documents.
Creating New Pages
We have already seen that Dreamweaver can create new pages either in HTML or XHTML. Once Dreamweaver recognizes that your page has an XHTML DOCTYPE, it will insert elements using the correct XHTML syntax, rather than HTML. You can confirm whether or not Dreamweaver is working in XHTML by looking to see if (XHTML) displays in the title bar, as shown in Figure 3.1, "Dreamweaver displaying XHTML in the title bar."
Figure 3.1. Dreamweaver displaying XHTML in the title bar.
In Design View, type Shift-Enter to insert a line break. Switch into Code View to have a look at the markup that was entered. Dreamweaver will have inserted the correct <br /> tag instead of HTML's <br>. Try adding an image: you'll note that Dreamweaver closes the image tag correctly. There is little difference between the way we work with Dreamweaver in HTML, and in XHTML. As long as Dreamweaver knows which type of document we're working on, it will write the correct markup for us.
Creating a Frameset
If you need to create a frameset, Dreamweaver will help you to use the correct DOCTYPE.
In your new XHTML document, create a frameset with a top frame using the Insert Frames button—as shown in Figure 3.2, "Creating a frameset in Dreamweaver", you'll find it in the Layout panel of the Insert toolbar.
Figure 3.2. Creating a frameset in Dreamweaver.
Your existing page will become the bottom frame, while a new top frame is created within a frameset. If you look at the source of the individual frames, they should use an XHTML Transitional DOCTYPE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now, take a look at the containing frame. This frame should have a XHTML Frameset DOCTYPE, as illustrated in the code below, and in Figure 3.3, "Creating a frameset document in Dreamweaver."
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Figure 3.3. Creating a frameset document in Dreamweaver.
Converting Existing Pages
Once you start working in XHTML, you might like to convert some of your older sites to XHTML. Perhaps you'll need to convert some content marked up with HTML into XHTML format, in order to integrate it with your site. Dreamweaver has a "Convert to XHTML" capability that can make this process very easy.
To convert a document, first open it in Dreamweaver, then select File > Convert. Finally, select the specification to which you'd like to convert your document. You'll need to convert framesets and each framed page individually.
Dreamweaver will do its best to apply the rules of XHTML we discussed previously, but there are likely to be some problems if the original markup wasn't Web standards compliant. You'll need to step through the document and fix these issues yourself. If this seems like a tedious thing to have to do, remember that avoiding such issues is one of the reasons we're using Web standards compliant XHTML: we're very unlikely to have to go through this rigmarole again. You can, of course, have Dreamweaver find these problems using its built-in markup validator.
The Dreamweaver Validator
As we discussed in Chapter 1, What are Web Standards?, the document validation process allows you to confirm that your markup complies with the particular specification you've chosen to work to.
Validate your document by selecting File > Check Page > Validate Markup. If the document is constructed using valid XHTML, a message to that effect will display in the Results Panel. If the document is invalid, you'll see a list of errors and the numbers of the lines on which those errors appear, like the one shown in Figure 3.4, "Displaying errors in the Results Panel after the XHTML document is validated." These errors are likely to arise from some of the points we discussed above; for example, "Expected end of tag 'img'" means that an image tag in the document requires a closing /> to make it valid XHTML.
Figure 3.4. Displaying errors in the Results Panel after the XHTML document is validated.
Note: Viewing Line Numbers
When working in Code View, you can turn on line numbering in order to make tracking down any problematic lines of code easier. Line numbering can be turned on and off via the View > Code View Options > Line Numbers menu item. You can also double-click the line in the Results Panel to jump to that line in your document, which will be highlighted.