Chapter 7: Moving Ahead with XHTML 163 kick the browser in question into Standards mode. All of the DOCTYPEs in this chapter will do the trick. Here s how the behavior breaks down: Documents with older or Transitional DOCTYPEs, poorly formed DOCTYPES, or no DOCTYPE at all are displayed using Quirks mode, and will be interpreted with the legacy bugs and behaviors of version 4 browsers. Documents with properly formed HTML Strict or XHTML DOCTYPEs are displayed using Compliance mode. This mode follows W3C specifications for HTML, CSS, and other layout languages as closely as possible. Of course, any browser (including Netscape 4) that came along before DOCTYPE switching was conceived will act just as Quirks mode does. In contrast, Opera 6 and earlier does not bother with DOCTYPE switching, but those browsers work more like standards mode does, because Opera has been purposely developed with standards in mind. note For an excellent overview of DOCTYPE switching, read DOCTYPE Switching and Standards Compliance by Matthias Gutfeldt. The article describes the technical details regarding the switching technology and provides additional resources (http://gutfeldt.ch/matthias/articles/doctypeswitch.html). Secret #119: Enclose Inline Elements in Blocks If you re using XHTML 1.0 Strict or XHTML 1.1, you can t have any widowed inline elements. This means that any inline element must appear within a block. Listing 7-4 shows a valid XHTML 1.0 Transitional document with an image (which is an inline element) marked up on a line by itself. This is allowed in HTML and XHTML Transitional. Listing 7-4: Valid transitional document with a widowed inline element < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (continued)

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

162 Part II: HTML, XHTML, CSS and Accessibility note CSS provides some terrific ways to style list bullets and numeric values. See Chapter 8, Style Tips for Type and Design to learn more. Secret #118: DOCTYPE Switching As you ve come to learn in these markup chapters, DOCTYPEs are required components of a valid HTML or XHTML document. The DOCTYPE declaration has historically been passive, with no actual function until the document is passed through a validator and uses the declaration to determine which DTD to validate the document against. Historically, manyWeb authors have not validated their documents, much less authored to standards, although, fortunately, that is a changing trend. Understanding the way the languages with which we work and how the browsers respond to them is surely the road to long-termsuccess and survival as aWeb designer. So knowing this stuff is really important. Another equally important but lesser known reason that the DOCTYPE declaration is so significant has to do with a switching mechanism that s been added to all contemporary browsers to allow those browsers to identify documents that appear to be standardized. This allows them to render the documents more quickly and accurately. This becomes very important when you begin using CSS, especially for layout. Studying the problem of CSS implementation in browsers, Tantek C elik, a programmer for Microsoft who has been involved with browser development and standards for some years now, recognized that no browser could afford to move ahead with more compliant and consistent technologies without allowing for reasonable backward compatibility. cross ref See Chapter 9, Laying Out Pages with CSS for more details about how DOCTYPE switching influences display. The solution C elik devised was to split the browser s capabilities into two modes: Quirks mode and Standards (or compliance )mode. Quirks mode is the implementation of rendering engines in use that manage nonstandard markup (essentially the same forgiving rendering that we ve relied on for years). It is forgiving of our shortcomings as well as those of our tools, but can be incredibly inconsistent as a result. Compliance mode, on the other hand, is a streamlined standards-compliant rendering engine, allowing for faster, more accurate, and more controlled rendering of your designs. Web browsers with DOCTYPE switching technology rely on specifically formed DOCTYPE declarations for proper switching to occur. DOCTYPE declarations can be written in any number of ways. The default DOCTYPEs in many visual tools and HTML editors are problematic for the reasons I mentioned earlier in this chapter. There s nothing wrong with those DOCTYPEs in any technical sense, but there is something wrong with them in regards to DOCTYPE switching technology. You must use some very specific DOCTYPEs to

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

Chapter 7: Moving Ahead with XHTML 161

1. Go to store
   1. Go to flower section
   2. Go to produce section
   3. Go to liquor section
2. Go to bank
3. Go to post office

You can also mix and match lists, as long as they are properly nested:

1. Go to store
   • flowers
   • salad fixings
   • white wine
2. Go to bank
3. Go to post office

Figure 7-7 shows the results. Figure 7-7: A nested unordered list within a numbered list created using XHTML.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services

160 Part II: HTML, XHTML, CSS and Accessibility

Highlighter

Fountain

Envelope

Stamp

But proper nesting rules in XHTML place the nested list inside a list item as part of that item, not as a separate part of that list. As a result, the correct listing procedure in XHTML looks like this:

• Pens
  • Felt tip
  • Highlighter
  • Fountain
• Envelope
• Stamp

Of course, ordered lists (see Figure 7-6 for an example) follow the same practice in XHTML, with nested ordering placed within the list item: Figure 7-6: A nested ordered list created using XHTML.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services

Chapter 7: Moving Ahead with XHTML 159 Secret #117: Proper Nesting of Lists One thing that markup authors moving to XHTML stumble over early on is how to nest lists properly in XHTML. In HTML, you could leave off the closing tag, and nest lists like this:

• Pens
  • Felt tip
  • Highlighter
  • Fountain
• Envelope
• Stamp

The results (shown in Figure 7-5) are a nested, unordered list. Figure 7-5: A nested unordered list created using HTML. Logic says if you re closing all your nonempty elements in XHTML, you d do this:

• Pens

• Felt tip

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

158 Part II: HTML, XHTML, CSS and Accessibility Secret #116: Understand Well-Formedness Well-formedness is simply the proper nesting of elements. It is important in HTML, although it snot brought up too often as a discussion point until you begin to study XHTML in earnest. What happens if you want to have something being both emphasized and strong at the same time? Well, you can apply both elements to text. The important issue is that the elements nest properly. Correct:

Welcome to my super duper web site!

Also correct:

Welcome to my super duper web site!

Incorrect:

Welcome to my super duper web site!

Also incorrect:

Welcome to my super duper web site!

A great way to help visualize this is to draw an arc from an opening tag to its companion closing tag. If the arcs intersect, your elements are improperly nested (refer to Figure 7-3). The same is true for the vertical, too (see Figure 7-4). Figure 7-3: Improper nesting of elements along the horizontal axis. Figure 7-4: Improper nesting of elements along the vertical axis.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 7: Moving Ahead with XHTML 157 Because the ampersand is considered reserved for use, the more rigid rules of XHTML expect you to escape all inline instances of ampersands not related to a special character. Take the following URL, for example: http://www.molly.com/books/250.cgi?chapter=1&section=2 The ampersand must be escaped using the character entity: http://www.molly.com/books/250.cgi?chapter=1&section=2 The same is true in any inline or embedded JavaScript. Consider the following snippet from a routing script: if (browser == “Microsoft Internet Explorer” && navigator.appVersion==version) If this JavaScript appears as an embedded script, the ampersands must be escaped: if (browser == “Microsoft Internet Explorer” && navigator.appVersion==version) note Escaping characters in URLs or scripts will not affect the functions related to either. You do not need to do this for any external script. For more information on entities in XHTML and other helpful XHTML workarounds, see www.simonstl.com/tips/archive/workarounds.html. Secret #115: alt Attribute Required Unlike HTML, where the alt attribute is a recommended inclusion for accessibility purposes, you can t leave it out in XHTML. Incorrect: Correct: There are no exceptions to this rule, even if you leave the value empty: However, since you can use CSS for effective spacing, spacer graphics are unnecessary anyway. note Interestingly, while width and height might seem presentational, they are available for use in strict DTDs and XHTML 1.1, because having width and height attributes present will assist with better graphic rendering in most browsers.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

156 Part II: HTML, XHTML, CSS and Accessibility note For an interesting and very detailed article on empty elements, their history, and their quirks, see Empty Elements in SGML, HTML, XML, and XHTML by Jukka Korpela, at www.cs.tut.fi/~jkorpela/html/empty.html. Secret #113: Managing Minimized Attributes A minimized attribute is one that is represented only by the attribute name. There s no associated value. In HTML, familiar examples would include attributes such as the following: noresize noshade nohref nowrap multiple checked ismap compact Here s a sample:

---

In XHTML, the minimization of attributes is disallowed. The attribute name is given a value of itself: So, in all cases where you find a single-word attribute, you must give it a value of itself for the attribute to be valid in XHTML. note During classes I often ask students to guess what the attribute value of a minimized attribute becomes in XHTML. Many guess that the value is true , which makes absolute sense. The selected attribute is considered a Boolean attribute, and you can read more about their unique history and use at www.w3.org/TR/REC-html40/intro/sgmltut.html. Secret #114: Entities and XHTML Chapter 6 examined character entities and their role in HTML. Used for the display of special characters in both HTML and XHTML, entities are also used in XHTML to escape certain characters in scripts and URLs. The best example of this is the ampersand (&), which appears in JavaScript and also in some URLs.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

Chapter 7: Moving Ahead with XHTML 155 Secret #111: Managing Nonempty Elements In XHTML, empty and nonempty elements are carried over from HTML. The difference is that they re treated in a more disciplined way. Nonempty elements, as you ll recall from the discussion in Chapter 6, are those elements that contain text content. These include such elements as headers, paragraphs, and list items. You ll also remember that some nonempty elements aren t required to have a closing tag in HTML. For example, list items can be written as follows:

List item one.

List item two.

List item three. Paragraphs are another prime example of a nonempty element for which, in HTML, the closing tag is considered optional. This is a perfectly valid practice in HTML. In XHTML, all nonempty elements must be closed. The corrected markup sample would then be as follows:

List item one.

List item two.

List item three.

tip I recommend making it a practice of closing nonempty elements in HTML too, even though it s not a requirement. If you ever choose to upgrade those files to XHTML, it ll be much easier. Also, it can improve CSS rendering in some browsers. Secret #112: Terminating Empty Elements All empty elements must be terminated. Empty elements are those elements without text content, and they are always represented by a single tag. In XML, empty elements are terminated with a trailing slash:

XHTML adopts this practice so empty elements can terminate the same way, as in the following:

---

You might have noticed that a space appears before the trailing slash in most XHTML documents. This really emerged as a browser hack for older browsers that couldn t properly interpret the slash if it came immediately after a character. Since the specifications allow the white space, most XHTML authors and authoring tools use the space to avoid browsers misinterpreting empty elements:

---

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

154 Part II: HTML, XHTML, CSS and Accessibility note Remember, event handlers such as onmouseover are attributes. Therefore, no camel casing, such as onmouseOver is allowed when using event handlers in an XHTML document. You ve got to keep it lowercase. A good example of a need for mixed case in values would be in a URL, where the server can be case sensitive and the URL has to be written in mixed case: Download a sample file. Here, the uppercase /MOLLY/FILES/ and the first letter of the file, Sample.html, must be preserved. You can now see why attribute values in XHTML are not casesensitive. However, if you have no specific reason to use uppercase in your attribute values, stick to lowercase in all instances. Secret #110: Quotation of Attribute Values in XHTML If it seems that XHTML is full of rules, you re right. As mentioned in the introduction to this chapter, XML s influence has brought a great deal of rigor to the language. I personally see this as a good thing, because if you know the rules, you re less likely to make errors. One of the most common errors in markup is forgetting a quotation mark somewhere. As a result, your page won t display, or it ll display in a bizarre way, or the document won t validate. In HTML, you don t have to quote all attribute values. It s perfectly valid to write the following markup: The lax quotation rules inHTMLclearly create inconsistencies within a document. It becomes too easy to type in a quotation mark and then miss its pair: This will definitely throw a validation error or, in many Web browsers, not display at all. In XHTML, you quote all attribute values, no exceptions. Here s the corrected markup: A question that is often asked regarding quoting is whether single quotes are allowed in XHTML. Indeed, they are. So, if you prefer using single quotes, the following markup is perfectly valid: tip Determine a quote style single or double for yourself and your team and stick to it. Mixing quote styles can cause the same problems that you find in HTML as a result of lax quotation rules. For more about site-wide style, see Chapter 3, Architecting Your Information.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services