Web Standards in Dreamweaver, Part 1 - Empty Elements
(Page 3 of 7 )
Empty elements are those HTML tags that stand alone and do not include anything between the beginning and end tag, such as <br> and <hr>. In XHTML, these need to be closed—<br> and <hr> become <br /> and <hr />.
NOTE There is a space after the tag and before the forward slash. Although it is also correct to close your tags without this additional space, the space will allow those browsers that do not recognize XHTML to display your content correctly.
Dreamweaver uses the correct syntax for empty tags when generating markup in an XHTML document and also when cleaning up XHTML.
Nesting
An XHTML document must be well formed. This means that all tags must nest correctly—the first tag you open should be the last tag you close. Incorrect nesting is illegal in SGML-based languages but was tolerated by browsers.
Here is an example of badly formed markup:
<p><strong>This is bold text.</p></strong>
Here is the proper way of nesting the tags:
<p><strong>This is bold text.</strong></p>
Dreamweaver nests elements correctly and will also correct the nesting of elements when cleaning up XHTML.
Attribute Minimization
Attribute minimization is the practice of writing only the attribute’s name without specifying a value. This sets the attribute to its default value. Attributes in valid XHTML documents cannot be minimized. All attributes should be written as name/value pairs even if the value is the same as the name.
This is incorrect in XHTML:
<input type="checkbox" name="checkbox" id="checkbox" value="True" checked />
Here is the corrected version:
<input type="checkbox" name="checkbox" id="checkbox" value="True" checked="checked" />
When you convert an HTML document into XHTML, Dreamweaver inserts this correct markup and converts minimized attributes to name/value pairs.
Here is an example of an XHTML document that complies with the guidelines:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>My XHTML Document</title>
</head>
<body>
<p><strong>Hello! World</strong></p>
</body>
</html>
Best Practices for Markup In the future, we will all need to think more about the various devices that are accessing our web sites. In addition to the devices that enable people with disabilities to access the web, PDAs, phones, and similar devices are now being used. Using HTML tags inappropriately causes enough problems when the content is being accessed with traditional web browsers; the problems are even greater when the content is accessed by devices likely to have a more limited capacity.
Working in a visual-development environment enables rapid development of documents and web sites. However, it can cause us to forget what is actually happening in the code as we move things around the document window, aiming for the right look and feel for our latest project. By structuring a document badly or using tags inappropriately, your document may validate, but it could still cause accessibility problems for those on alternative devices.
Deciding whether your document is structured logically is not something that an automated validator can do easily; however, it is very easy to do yourself. Simply turn off CSS in your browser or remove your stylesheet link and see if the content in your document is still logically presented once it defaults to the browser’s standard way of styling the elements.
In addition to checking that your document looks sensible and well structured, consider the following points.
Do Not Use Font Tags for Styling and Sizing Text
Today’s widely used browsers can all use CSS for styling text. Although you may be reluctant to move to CSS for page layout, there is simply no reason to ignore the benefits of using CSS instead of font tags for text styling. The cleaner markup that results from the removal of font tags leads to faster downloads and easier maintenance and redesign of a site. All standard desktop browsers released in the last 5 years have CSS support for text styling.
Use Heading Tags for Structure
The heading tags (<h1> to <h6>) provided by (X)HTML are designed to give structure to the document; they are not supposed to be an easy way to have different-sized titles. Although you may use CSS to alter the appearance of these tags, make sure that you are using them logically within the document so that any browser or device that does not recognize the CSS can still follow the structure. A related issue is the use of paragraph (<p>) tags with a larger font size used as a heading. If the text is a heading, use a heading tag for it.
Do Not Use Block Quotes for Indentation
For the same reasons that you should not use the heading tags simply for sizing, you should not use block quote tags to indent text. A nontraditional browser may well interpret <blockquote> as a quote; if you want to indent text for appearance only, use CSS to create a custom class for this purpose. For example, to create acustom class in Dreamweaver, create a new CSS class named .indent. Give this class a padding of 40 pixels on the left. To indent any paragraph, simply apply the custom class.
<p class="indent">This is my paragraph that I would like to be indented.</p>
This gives you far more control over the indentation than simply using block quote tags, and it ensures that your document remains understandable.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Lists >>
More Web Standards Articles
More By Apress Publishing
/ 12 
