Moving Ahead Ch7apter with XHTML Secrets in This Chapter #103: Choose a DTD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 #104: Avoid the XML Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . 148 #105: Use Correct XHTML DOCTYPEs . . . . . . . . . . . . . . . . . . . . . . . . 149 #106: Add the Namespace to Root . . . . . . . . . . . . . . . . . . . . . . . . . . 150 #107: Implementing Style in XHTML . . . . . . . . . . . . . . . . . . . . . . . . 151 #108: Adding Scripts in XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 #109: XHTML and Case Sensitivity . . . . . . . . . . . . . . . . . . . . . . . . . 153 #110: Quotation of Attribute Values in XHTML . . . . . . . . . . . . . . . . . . . 154 #111: Managing Nonempty Elements . . . . . . . . . . . . . . . . . . . . . . . . 155 #112: Terminating Empty Elements . . . . . . . . . . . . . . . . . . . . . . . . . 155 #113: Managing Minimized Attributes . . . . . . . . . . . . . . . . . . . . . . . 156 #114: Entities and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 #115: alt Attribute Required . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 #116: Understand Well-Formedness . . . . . . . . . . . . . . . . . . . . . . . . . 158 #117: Proper Nesting of Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 #118: DOCTYPE Switching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 #119: Enclose Inline Elements in Blocks . . . . . . . . . . . . . . . . . . . . . . . 163 #120: name Becomes id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 #121: The target Attribute is Unavailable in Anchor . . . . . . . . . . . . . . . . 165
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services
142 Part II: HTML, XHTML, CSS, and Accessibility Figure 6-8: Validation success. knowing that the document is a conforming, compliant, standards-based structural document ready for styling. Summary Everything in this chapter was geared to help those who have been working with visual editors or marking up documents according to conventions rather than standards, move toward a more sophisticated understanding of the languages with which you work. Next, we take a look at XHTML. While it is perfectly acceptable to use HTML for your Web documents, XHTML offers more insight into structure and semantics, greater flexibility, and a more forward-thinking methodology with which to author our documents.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
Chapter 6: Crafting Pages with HTML 141 Secret #101: Restrict Use of Frames Just as with tables, restricting use of frames makes for a more manageable, accessible, and usable Web site. Frames can serve a few important purposes. They are excellent if you re creating some kind of a Web-based application where static content is desirable. IFrames are popular for managing advertising, and frames can be written to be completely valid. But they are known to have all kinds of problems associated with them, such as the following: The focus of frames is layout, which goes against HTML as a structural language. Because of their presentational nature, frames are limited to Web browsers and are not supported at this time by those user agents on mobile devices, limiting your site s portability and interoperability. Frames require multiple documents to create a single visual output. This means more documents to manage and store. Frames are difficult or downright impossible to manage by screen readers and other assistive devices used by those with physical disabilities. If a user agent doesn t support frames, there is no way to degrade the documents; the agent simply can t display the results unless you provide script-based workarounds, meaning extra work for you and all kinds of support problems for your users. Deciding to use frames for any reason should be a decision that comes about after researching other alternatives for achieving the same goals. Secret #102: Validate, Validate, Validate! Find out if your document conforms by validating it. Validation is the process of comparing your completed document to the DTD defined in the DOCTYPE. Your document is compared and any errors will be displayed. Typically, begin troubleshooting invalid documents by fixing the first error along with any errors related specifically to proprietary or problem elements and then revalidate. Fixing the first reported error and then revalidating will often reveal that numerous other reported errors were a result of that first, incorrect error. tip You can validate documents using any number of validation tools. See Chapter 1, Setting up a Master Toolbox for more details. I ran the document we created in this chapter through the validator at the W3C. You can see the favorable results in Figure 6-8. Also, because we have no presentational elements or attributes in our document at all, we can now rest comfortably
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
140 Part II: HTML, XHTML, CSS, and Accessibility and less problematic than using hacks of this nature. Always try to use elements as they were intended to be used. Secret #100: Restrict Use of Tables Using tables for layout is the biggest HTML hack around. Table elements and attributes were developed for one reason: to display tabular data. Using them for any other reason is inappropriate. That someone got the bright idea to turn off borders and create a grid system upon which we could lay out our Web documents so they were attractive on screen was truly revolutionary. Despite the standards movement and a growing understanding of why using tables for layout has so many disadvantages, the vast majority of Web sites use tables as their means of page layout. But we re now moving into a more sophisticated realm of understanding. It s becoming clear that restricting the use of tables brings many advantages, including the following: Cleaner, more streamlined pages, which are easier to manage Improvement of support for multiple user agents and device types including mobile phones, pagers, and PDAs. Improved accessibility for those with physical impairments Reduction of page weight by an average of 50 percent, resulting in faster download times and economic savings in bandwidth and storage. These are all very attractive advantages, but if you re not using tables, how do you lay out your Web sites? If you can use all CSS-based layouts, you should. If you have to support browsers that have partial, imperfect, or nonexistent CSS support, use tables if you have to. Then, supplement with CSS where you can. The use of tables with some CSS for layout purposes is referred to as transitional design and is a very good option for those designers who have to support diverse browsers. If you do choose this option, follow these guidelines for best results: Reduce the number of nested tables as much as possible. Reduce the number of table rows. Reduce the number of table cells. In other words, use as simple a table as possible to achieve your layout, and fill in with CSS where you can. note For an interesting perspective on the transition from tables to CSS for layouts, see From Table Hacks to CSS Layout: A Web Designer s Journey by Jeffrey Zeldman, at www.alistapart.com/articles/journey/.
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 6: Crafting Pages with HTML 139 seen obsolete elements, which include such elements as listing, plaintext, and xmp. Proprietary elements and attributes are those that are browser-specific and have never been entered into any specification. One such proprietary element that causes challenges to designers seeking to work within the specs is the embed element, used to embed Flash and other media into Web pages. The standard alternative is to use object, but there are browser compatibility issues with that. cross ref For more information on how to add media to a page using standards-compliant workarounds, see Chapter 12, Spicing it Up with Dynamic Content and Rich Media. Some common proprietary attributes include leftmargin and rightmargin. These attributes are often used to set page margins (but we have CSS for that now). tip Validating documents will find any instances of obsolete or proprietary elements and attributes. Deprecated elements and attributes will not cause errors in validation if you are using a DTD that supports them, which will typically be a transitional rather than strict DTD. Note that you can even use deprecated elements in Transitional XHTML (see Chapter 7), but again, if you can use CSS for the job, do so. Secret #99: Use Elements as They Were Intended Another issue with HTML elements is that people use them to achieve visual results something for which HTML was never intended. Using elements in an inappropriate way is also referred to as a hack, and you want to avoid hacks in most instances. Whether it s to add space by stacking break tags on top of each other:
Or using a space within a nonempty element to create space:
Or adding space at the end of a line of list items:
The point is that while usage of this nature might not be invalid, it s not recommended. Space can be controlled using style, and that control is far more effective
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services
138 Part II: HTML, XHTML, CSS, and Accessibility Secret #97: Avoid the center Element What swrong with the center element? It svalid in transitional documents, it works, and we ve used it for years. Introduced by Netscape back in the day, center was very valuable in terms of helping us center text or tables on a page. We now know that this was a kludge to begin with. Here is what s wrong with the center element: The syntax of center is ambiguous. It is semantically more suited to be an attribute, not an element. It is a deprecated element in HTML 4.01, and as with all deprecated elements, it should be avoided (as addressed in the next secret). The concept of center is presentational, so its use has fallen out of favor. Use CSS instead. note Centering in CSS is its own challenge. See CSS Centering in Chapter 9, Laying Out Pages with CSS. Secret #98: Avoid All Deprecated, Obsolete, and Proprietary Elements and Attributes If an element or attribute is deprecated, obsolete, or proprietary, avoid it. A deprecated element or attribute is one that is allowed for use in some DTDs, but a preferred method exists. I always imagine a deprecated element or attribute as being the kid in the dunce cap he s still in the room, but he s almost on his way out. Deprecated elements that should be avoided include the following: applet basefont center dir font isindex menu s strike u Obsolete elements are those that have been removed from a specification, but had been there at some point in the past. Typically, you won t have likely ever even
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services
Chapter 6: Crafting Pages with HTML 137 Table 6-4: Standard Color Names for Use in HTML, XHTML, and CSS Color Name Corresponding Hex Value Black #000000 Silver #C0C0C0 Gray #808080 White #FFFFFF Maroon #800000 Red #FF0000 Purple #800080 Fuchsia #FF00FF Green #008000 Lime #00FF00 Olive #808000 Yellow #FFFF00 Navy #000080 Blue #0000FF Teal #008080 Aqua #00FFFF support occur in CSS and in HTML, although CSS offers more sizing and display options. Problems arise for two main reasons. The first is that using the font element goes against the premise that ideally we separate our structured document (which you ve learned to do in this chapter) from anything that is presentational. Historically, presentation via CSS wasn t very well supported. However, at this time, almost all font features in CSS are supported across every conceivable contemporary browser, as well as having some support in older browsers such as Netscape 4.x versions and Internet Explorer (IE) as early as 3.0, which incidentally was the first commercial browser to include any CSS support. The second concern is that using the font element clutters up documents greatly. This is especially true in table-based layouts, where a font has to be redefined in every single table cell. Using the font element within tables accounts for the majority of unneeded page weight out there on the Web. What s the bottom line when it comes to the font element? Don t use it. It s unnecessary at this point in history, and CSS is much more practical. note Warren Steel s What s Wrong with the Font Element is still one of the most requested Web documents around. The article gives a detailed look at problems related to the font element; find it at www.mcsr.olemiss.edu /~mudws/font.html. Another interesting article is Considered Harmful, in which the specifics of the face attribute are criticized. Read it at http://alis.isoc.org/ web ml/html/fontface.en.html.
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services
136 Part II: HTML, XHTML, CSS, and Accessibility There are three types of character entities within HTML (and XHTML): ISO 8859-1 characters. This set includes the Latin set of character entities. Symbols, mathematical characters, Greek, and Latin letters. This set includes entities for various symbols (such as copyright symbols and so on), math characters, and Greek and Latin letters. Markup-significant characters. This set includes internationalization characters such as those required for bi-directional text. All characters are represented by both a named and numeric value. You can use either value as long as you find the character among those considered valid, and test the character in the target browsers for your project. tip If you ve chosen a named or numeric value that doesn t display consistently in your target browsers, consider using the other value type. Secret #95: Limit Color Names to Standard Colors As with special characters, numerous color names in HTML are not standardized. In fact, the list of standard names for use with HTML is so short that it s included in this section in its entirety. You should remember a few things about color names: You can use any standard color name in place of a hexadecimal value in an HTML document. Because there are only 16 standard names, you might prefer to use hexadecimal values instead. Not all standard color names are part of the Web-safe palette, if that s a concern to you. You can use these color names with CSS, too. CSS offers more color value options than HTML, and it s no problem to combine names and other available values, but if you re going to use a color name, it has to be one of the following in order to be valid. Table 6-4 shows standard color names. The corresponding hexadecimal values are included so you can see what sWeb-safe and what s not. note Want the truth about Web-safe colors? See Chapter 11, Sophisticated Visual Design in a Global Market. Secret #96: Avoid the font Element The font element was a problem element from its inception. It s not that it isn t well supported because, ironically, it happens to be very well supported. And it s not that more font faces are available in CSS the same issues concerning font
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 6: Crafting Pages with HTML 135 Intrinsic Event Description Allowed Elements onkeypress This event occurs when a key is pressed and released over an element Almost all elements onkeydown This event occurs when a key is pressed and held down over an element Almost all elements onkeyup This event is triggered when a key in a pressed position is released Almost all elements onsubmit This event occurs when a form is submitted This applies to the form element only onreset This event occurs when a form is reset Also applies to the form element only onselect This occurs when text in a text field is selected input textarea onchange This occurs when a form control loses input focus and the value has already been modified input select textarea tip Many people use camel case for their intrinsic events, such as onMouseOver. This is a popular convention, but wise to avoid if you re using or ever plan on upgrading your HTML documents to XHTML. In XHTML, you can t have any uppercase characters in your attribute names (See Chapter 7). Secret #94: Special Characters Another area where you, as the designer, should take care to conform to specifications is in working with special characters. Special characters, or character entities, are a series of codes that control symbols, letters, and math-related characters. You ve probably come across some of these entities in your work. Common examples include the entity for the copyright symbol, © and the entity for a nonbreaking space, . note There are numerous entities, but not all of them are considered standard. Unfortunately, some Web design software packages include entities that aren t standardized, which makes working with them even more difficult, although validating a document with nonstandard entities will return a helpful error. For a complete set of conforming character entities, see Character Entities in HTML and XHTML at the Web Standards Project (www.webstandards.org/learn/reference/entities.html).
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services
134 Part II: HTML, XHTML, CSS, and Accessibility Secret #93: Intrinsic Events Intrinsic event handlers are a type of attribute reserved as a way to handle events within the browser, and to attach scripts to elements via the Document Object Model (DOM). The DOM is the interface within a browser that enables scripting to actively influence elements and their behavior. The attribute value will be related to the script in question. Table 6-3 shows event handlers in HTML and what they do. Table 6-3: Intrinsic Events in HTML 4.01 Intrinsic Event Description Allowed Elements onload This event occurs when the browser finishes loading a document into a window, or all documents are loaded within a frameset body frameset onunload This event occurs when the document is removed from the browser body frameset onclick This event occurs when a user clicks on an element Almost all elements ondblclick This event occurs when a user double-clicks on an element Almost all elements onmousedown This event is triggered when the mouse button is in the down state over an element Almost all elements onmouseup This event occurs when the mouse button is released from the element Almost all elements onmouseover This event occurs when the mouse passes over the element Almost all elements onmousemove This event happens when the mouse is moved over an element Almost all elements onmouseout This event occurs when the mouse is moved away from the elements Almost all elements onfocus When an element receives focus either via a pointing device or tabbed navigation, this event occurs a area label input select textarea button onblur When an element that had focus loses focus due to the pointing device or tabbing moving away from the element Same as for onfocus
Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services