Like any technology, HTML has evolved over time. Although standard HTML has served its purpose well, it’s always been a somewhat sloppy language. Among other things, it allows uppercase, lowercase, or mixed-case letters in tags (<body> and <BODY> are both correct, for example) and permits unclosed tags (so that you can use a single <p> tag without the closing </p> to create a paragraph). While this flexibility may make page-writing easier, it also makes life more difficult for web browsers, smart phones, and other technologies that must interact with data on the Web. Additionally, HTML doesn’t work with one of the hottest Internet languages: XML, or Extensible Markup Language (see Storing Data in an XML File for a quick intro to XML).
To keep pace with the times, an improved version of HTML called XHTML was introduced back in 2000 and you’ll find it used frequently on many sites (in fact, XHTML is just an “XML-ified” version of HTML). Dreamweaver CS5 can create and work with XHTML files as well as plain HTML. If you understand only HTML, don’t worry—XHTML isn’t a revolutionary new language that takes years to learn. It’s basically HTML, but with somewhat stricter guidelines. For example, the HTML page code shown on HTML, XHTML, CSS, and JavaScript 101 would look like this in XHTML:
<!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>Hey, I am the title of this Web page.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" /> </head> <body> <p>Hey, I am some body text on this Web page.</p> </body> </html>
Notice that everything below the <head> is nearly the same as the HTML page. The doctype that begins the page, however, is different from what you saw earlier. It looks basically the same, but, in this case, it merely says that the page is using a particular brand of HTML, called XHTML, and more specifically a type of XHTML called Transitional 1.0. (Don’t worry—Dreamweaver automatically writes all this code when you create a new XHTML page.)
As you can see, the real code used to make the page is much like HTML. To make an XHTML file comply with XML, however, you have to keep a few strict rules in mind:
Begin the page with a document-type declaration and a namespace. That’s the first few lines in the code above. They simply state what type of document the page is and point to files on the Web that contain definitions for this type of file. A doctype isn’t actually required for regular HTML, but it is for XHTML. However, a document-type declaration (or DTD) is important for both HTML and XHTML since it affects how web browsers display a page—stick with any of the DTDs Dreamweaver writes and you’ll be OK.
Tags and tag attributes must be lowercase. Unlike in HTML, typing the tag <BODY> in an XHTML file is incorrect. It must be lowercase like this: <body>.
Quotation marks are required for tag attributes. For example, a link written like this: <a href=http://www.missingmanuals.com> is valid in HTML, but doesn’t work in XHTML. You have to enclose the value of the href property in quotation marks: <a href="http://www.missingmanuals.com">.
All tags (even empty ones) must be closed. To create a paragraph in XHTML, for example, you must begin with <p> and end with </p>. However, some tags don’t come in pairs. These tags, called self-closing tags, have no closing tag. The line break tag is one example. To indicate a self-closing tag, you must include a backslash at the end of the tag, like this: <br />.
If all this seems a bit confusing, don’t worry. Dreamweaver automatically follows all these strict XHTML rules, so creating an XHTML page in Design view won’t feel one bit different from creating an old-style HTML page. (For more information on creating an XHTML page in Dreamweaver, see Creating a Web Page.) In fact, with just a couple of exceptions, it doesn’t really matter which version of HTML or XHTML you use—pick one and let Dreamweaver take care of the rest.
Note
When W3C—the group responsible for coming up with many Internet technologies—introduced XHTML, the web development community heralded it as the next big thing, and an intermediate step in the transition to XML as the prime language of the Web. History has shown that that prediction was a bit grandiose. As it turns out, the complexity of moving to XML has kept browser manufacturers from following the XML path the W3C laid down. In fact, the W3C has closed down the XHTML working group in favor of a new version of HTML, called HTML 5—actually a move away from XML and back to plain HTML, albeit an enhanced version of HTML. Since all the browser manufacturers are behind HTML 5 (and some browsers are already adopting parts of it), it’s a good bet that, down the line, HTML 5 will be the new big thing. So if your know-it-all co-worker says that you MUST use XHTML because it’s the future, just say “What about HTML 5?” That should keep him quiet. To learn more about HTML 5, visit www.w3.org/html/wg/html5/.
Get Dreamweaver CS5: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
