Home arrow Web Standards arrow Page 3 - Web Standards in Dreamweaver, Part 1
WEB STANDARDS

Web Standards in Dreamweaver, Part 1


The first half of this chapter focuses on the use of XHTML and CSS when working in Dreamweaver. Discover why developing in XHTML instead of HTML is a good idea and how to start working in valid XHTML Transitional. Some basics of CSS design are also covered. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, Rachel Andrew and Kevin Marshall, published by Apress, 2004, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
August 04, 2004
TABLE OF CONTENTS:
  1. · Web Standards in Dreamweaver, Part 1
  2. · The Rules of Writing XHTML
  3. · Empty Elements
  4. · Lists
  5. · XHTML in Dreamweaver MX 2004
  6. · Authoring Valid CSS
  7. · The Basics of CSS

print this article
SEARCH DEVARTICLES

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 >>

blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials