CSS and Markup Languages

CSS is not HTML; it simply means that HTML now relies on the capabilities of CSS.

The W3C's thinking is this: Style sheets should be used to "relieve HTML of the responsibilities of presentation."

Translation: Don't bug us with requests for more HTML tags to do layout. Use style sheets instead.

That's probably a good idea. It means that anybody can use HTML tags, whether she is Jo Web Designer or not. But ol' Jo can use CSS to reassign standard HTML tags to do whatever she wants them to do, for more professional results.

In addition, this means that CSS can be used with other markup languagessuch as XML (Extensible Markup Language), XHTML (Extensible Hypertext Markup Language), and even other Web technologies such as SVG (Scalable Vector Graphics) and Adobe Flashjust as easily as it can be used with HTML.

This book will focus on the use of CSS with the latest standards in Web markup languages (XHTML 1.0), but virtually all of this information can equally be applied to these other markup languages.

Converting HTML to XHTML

So what is the difference between HTML and XHTML? XHTML is far more restrictive than HTML: It will not allow you to bend the rules. However, because XHTML shares the same tags as HTML, it's fairly easy to convert if you keep the following points in mind:

• No overlapping tags. Most browsers don't care whether HTML tags are properly nested, so the following code works just fine:

  <p>Bad <b>Nesting</p></b>

  That is not the case in XHTML. You must use the correct syntax:

  <p>Good <b>Nesting</b></p>

• Tags and attributes have to be lowercase. XML is case-sensitive, so <li> and <LI> are different tags. Keep all your tags and attributes in lowercase, and you'll be fine.

• Always use an end tag. Often, Web designers simply slam in a <p> tag to separate paragraphs. With XHTML, however, you have to use this format:

  <p>Your text</p>

• Use a space and slash in empty tags. The preceding rule doesn't make much sense for <br> or <hr> tags, which have no closing tag. Instead, include a space and then a slash in the tag to make it self-closing:

  <br />

• Don't nest links. In XHTML, the following doesn't work:

  <a href="this.html">This <a href="that.html">That</a></a>

  But why would you want to do that in the first place?

• Use id and name together. If you're identifying an element on the screen, such as a layer, use both the id and name attributes, except in radio buttons:

  <div id="object1" name="object"1">object</div>

• Place attribute values in quotes. If a tag contains attributes, the values have to be in quotes. The following example is wrong:

  <img src=myImage.gif />

  Use this syntax instead:

  <img src="myImage.gif" />

• Encode the ampersand in URLs or other attribute values. The ampersand (&) has to be coded as &amp;. The following example is wrong:

  <img src="bill&ted.gif" />

  Use this syntax instead:

  <img src="bill%26ted.gif" />

• Don't use HTML comments in script or style containers. One trick I show you in this book is to place HTML comment tags immediately after <style> or <script> tags to hide the code from older browsers. For XHTML, do not do this. The following example is wrong:

  <style> <!-- p { font: times; } //--> </style>

  Use this syntax instead:

  <style> p { font: times; } </style>

HTML

The latest version of the Hypertext Markup Language, HTML 4.01, was released in December 1999 by the W3C (w3.org/TR/html4/). HTML 4.01 includes the style-sheet methodology (previously maintained as a separate standard) as part of the HTML specification (Figure 1.9).

Figure 1.9. The W3C's HTML home page (www.w3.org/MarkUp/). You can find information about both HTML and XHTML here.

XML and XSL

Like HTML, the Extensible Markup LanguageXML, for short (w3.org/XML/)is an offshoot of SGML (see the sidebar "Where Did Markup Languages Come From?"). Unlike HTML, however, XML gives Web designers the ability to define not only the structure of the page, but also the types of information being presented. XML produces a Web page that works like a database and is convenient to search and manipulate, which is why XML is being touted as the greatest thing to happen to the Internet since HTML.

With XML, you can "teach" the browser how to tell the difference between the real name, the alias, and the person's organization. You can also tell the browser how each of these elements should be displayed.

XSL, which stands for Extensible Stylesheet Language (w3.org/Style/XSL/), is used to convert XML documents into other kinds of documents, such as HTML for display on the Web. This is especially useful for content destined for both screen and print, since it makes it easy to design for both.

Where Did Markup Languages Come From?

The Standard Generalized Markup Language (SGML) is the grandfather of most markup languages used for both print and the Internet. SGML is the international standard used to define the structure and appearance of documents. Different SGMLs have been created for a variety of document types and for different specialties, such as physics, accounting, and chemistry. HTML is the Web's version of SGML.

XHTML

XML and XSL may hold many promises for Web designers, but how do you get Web designers to switch from HTML, with which they are comfortable, to the more complex XML?

The answer: XHTML.

XHTML (w3.org/TR/xhtml1/) is a hybrid of the HTML 4.01 standard and XML. Many people hope that XHTML will begin a relatively painless transition from HTML to XML.

XHTML uses the XML Document Type Definitions (DTD)collections of declarations that tell the browser how to treat the structure, elements, and attributes of the tags that it finds in a document. XHTML uses all the same tags as HTML with the upshot that, although XHTML Web pages can use the strength of XML, the code will still work even if the browser does not understand XML.

If the standards are so similar, why change? The W3C offers two good reasons:

• The X in XHTML stands for extensible, which means it's much easier to add new capabilities to XHTML than to HTML. The behavior of tags is defined in a DTD rather than by the individual browser, so XHTML is more modular. Therefore, the capabilities of XHTML can be enhanced for future browsers or other Web-enabled devices without sacrificing backward compatibility.

• A lot of Web traffic these days comes from "alternative" platforms, such as TV sets, handheld devices, and telephones. If you think it's hard to code HTML for a few different browsers, imagine coding for dozens of devices. A standard language is needed. In addition, because these devices generally have a smaller bandwidth, the code needs to be as compact as possiblesomething for which XHTML is perfect.

If Web designers begin using XHTML now, they can reap the benefits of XML without giving up the HTML skills they worked so long to develop. In fact, if you know HTML, you already know all the XHTML tags. The main thing you will have to learn is how these tags can (and cannot) be used. XHTML is a good deal stricter than HTML in terms of what it allows you to do, but these restrictions lead to cleaner, faster, easier-to-understand HTML code.

SVG

The Scalable Vector Graphics formatSVG, for shortis a method of creating vector graphics on the Web (w3.org/Graphics/SVG/). Like Flash, rather than plotting each point in the graphic, SVG describes two points and then plots the path between them as a straight line or curve.

Although still lagging far behind Flash in browser penetration, several browsers have included native support for SVG. Mozilla Firefox 1.5, Opera 8 and later, and Apple Safari will include it soon. Of course, the holdout is Microsoft's Internet Explorer, which apparently will not be supporting SVG anytime this decade, except through the use of a plug-in provided by Adobe (adobe.com/svg/).

Unlike Flash, which uses an editor to create its files and hides much of the code used to create the graphics, SVG uses a variation of XML to create its vector graphics. More important from a DHTML standpoint, SVG graphics can be scripted with the Document Object Model (for more information on the DOM, see Chapter 12), and can include all the DHTML capabilities described in this book.

Tips

• XHTML and CSS are the future of Web design. Although browser manufacturers have been slow to adapt these standards, the W3C has made sure that XHTML will always be backward-compatible using Quirks mode. See the section, "Setting Your DTD," later in this chapter, for more details.

• Many of the design-related HTML tags (for example, <font>), if not already abandoned by the new HTML standard, are slated to be made obsolete in favor of CSS. The W3C calls this situation "deprecation." Although the tags still work, they are on the way out.

Flash

Flash MX 2004 introduced general support for CSS, allowing designers to use the same style sheet for the presentation of both Web pages created using a markup language and proprietary Flash vector code.