|
|
|
I'm going to cover several topics in this article, including
how XHTML differs from standard HTML, how Dreamweaver MX
handles XHTML coding, the difference between Strict and
Transitional Document Type Definitions (DTDs) and finally
validating your code inside Dreamweaver.
Bear with me, it's worth it. I promise.
|
|
Standards: The truth is out there
To what extent are standards gospel? On one side you
have the "Code to Standards" group touting that
you should never use a tag or attribute not specified by
the W3C—and to hell with Netscape 4.x. On the other
side you have those individuals who don't care what the
standards are so long as the page appears correctly. I sit
somewhere in between.
I believe you should follow coding standards as closely
as possible for several reasons. First, it's easier to track
down your mistakes. Second, you'll make life easier for
you and other developers in the long run. But I also believe
some standards aren't ready for prime time and should be
avoided until browsers and the customers who use them (and
who talk with their credit cards) catch up.
Coding to standards makes it easier for you to find your
mistakes and quicker to fix them. If you run your code through
an online validator from the W3C or through Dreamweaver's
built-in validator, you'll have better luck tracking down
simple syntax issues. Maybe your tables or layers are set
up incorrectly from a display perspective, but at least
you can eliminate syntactical errors.
Because you're coding to a defined standard, emerging technologies
that follow those standards will be able to make better
use of your code with fewer hassles. Coding to standards,
in essence, "future-proofs" your pages to some degree. Coding
to standards also sends a message to browser vendors that
the standards are important to developers. We make the Internet
what it is, after all, so we can make our voices heard by
making it necessary for future browsers to follow published
standards.
|
|
How to spell XHTML
XHTML is HTML written as an XML application. This means
that XHTML documents must meet several requirements:
|
|
|
|
|
Documents must be well-formed
|
|
|
Tags and attributes must be in all lowercase
|
|
|
For non-empty tags (<a>, <td> and <p>,
for example), end tags are required
|
|
|
Attribute values must always be quoted
|
|
|
Attribute minimization is not supported
|
|
|
Empty elements (<hr> and <br>, for example)
must be properly closed
|
|
|
The id attribute must be used instead of
the name attribute
|
|
|
All images must have alt attributes
|
|
|
Allow me to explain these rules.
Documents must be well formed
Your XHTML documents must contain several standard tags
on the page. They must contain an <?xml?> version,
an XHTML DOCTYPE and an XML namespace in the <html>
tag. (I show an example of this later.)
All start tags must also have end tags and all tags must
be properly nested.
Correct (all tags nested):
<em>Some <strong>bold</strong>
and italic text.</em>
Incorrect (tags improperly nested):
<em> Some <strong>bold
and italic text.</em></strong>
|
|
Tags and attributes must be in all lowercase
In XHTML, <TABLE> is not the same as <table>
because XML is case-sensitive. For this reason all tags
and their attributes must be all lowercase.
Correct (tags all lowercase):
<a href="mylink.htm"
onclick="javascript:action();">My Link</a>
Incorrect (tags mixed lowercase and uppercase):
<A href="mylink.htm"
onclick="javascript:action();">My Link</A>
<a href="myLink.htm" onClick="javascript:action();">My
Link</a>
<a HREF="mylink.htm" onclick="javascript:action();">My
Link</a>
|
|
For non-empty tags, end tags are required
A non-empty tag is any tag with content between the start
and end, such as <a> or <p>. In XHTML these
must all contain proper end tags.
Correct (tags properly closed):
<p>My first paragraph</p>
<p>My second paragraph</p>
Incorrect (tags not closed):
<p>My first paragraph
<p>My second paragraph
|
|
Attribute values must always be quoted
All attributes in XHTML documents must be properly quoted.
Leaving the quotes out will invalidate the document.
Correct (attributes properly quoted):
<img src="myimage.gif"
id="myimage" alt="My Image" />
Incorrect (attributes missing some quotes):
<img src=myimage.gi" id=myimage
alt="My Image" />
|
|
Attribute minimization is not supported
Attribute minimization happens when only the value of the
attribute is added to the tag, without the attribute's name.
Correct (attribute value given):
<input type="checkbox"
checked="checked" />
Incorrect (attribute value missing):
<input type='checkbox" checked
/>
|
|
Empty elements must be properly closed
Empty elements are those tags that don't contain any content.
Examples include <br>, <hr> and <img>.
In order to properly close these tags, just add a space
followed by a "/" directly before the closing ">." This
ensures that older browsers that don't support XHTML (such
as Netscape 4.x) can still display the tags correctly. They'll
just ignore the extra space.
Correct (element closed properly):
<br />
Incorrect (element closed improperly):
<br>
<br/>
|
|
The id attribute must be used instead of the
name attribute
The name attribute for referencing elements on
your page is officially deprecated and may be removed in
future XHTML specifications. To plan for this, use the id
attribute in its place.
Correct (id attribute used):
<img src="myimage.gif"
id="myimage" alt="My Image" />
Incorrect (deprecated name attribute used):
<img src="myimage.gif"
name="myimage" alt="My Image" />
|
|
Jump in head first, but check the water
Once you get the basics down, you'll find that coding
to the new XHTML standard is quick and easy. Before you
jump into the XHTML ocean, however, take a minute to decide
which specification you want to code to. XHTML includes
both a Transitional DTD and a Strict DTD. (A DTD defines
the structure and legal elements of an XML document.) The
main difference between the two is which attributes are
allowable. They both follow the same syntactical rules I
specified in the previous section, but the Strict DTD is
missing several attributes we all got used to in HTML.
For example, the following attributes are no longer allowed
in the XHTML Strict DTD:
|
|
|
|
|
onResize
|
|
|
Type attributes on lists
|
|
|
Target attributes on <a> tags
|
|
|
Width attributes on tables
|
|
|
Border on <img> tags
|
|
|
That's just a partial list of some of the attributes removed.
The reasoning for this is that these types of attributes
should be defined in style sheets. There's a list-type declaration
in Cascading Style Sheets (CSS) that you should use in place
of the type attribute in <ul> tags. The border
attribute and width declaration in tables were
removed because there are associated CSS attributes for
those purposes as well.
If you decide you can't live without those attributes,
or your audience's browsers don't t support the necessary
CSS styles, you may want to code to the Transitional DTD
until the browsers catch up. If you'd rather go all the
way and live with the few problems that Netscape 4.x and
some Microsoft IE browsers exhibit with the advanced styles,
then the Strict DTD may be more to your liking.
To give you an example of the differences between the
two DTDs, I'll show you how to build two very simple pages.
The first page will be coded to the Transitional DTD; then
you'll convert that document to the Strict DTD.
|
|
Movin' on up...to the XHTML side
The XHTML Transitional DTD's purpose is exactly what
the name implies. It's designed for sites in the process
of moving to the full XHTML Strict DTD. The Transitional
DTD includes many of the original HTML attributes that are
no longer in the XHTML Strict DTD (such as the target
attribute for <a> tags). This allows you to continue
working (almost) as you always have been without stressing
over missing attributes in your document.
The page I show you is extremely simple, just so you can
see how Dreamweaver MX manages all those new requirements
you have to follow. The result looks something like this
(mouseover the button to see the effect):
Do you really know...
|
|
|
That's all there is to it. This simple example shows you
how Dreamweaver MX supports the new XHTML requirements.
Before you get started, save the following two images to
your desktop by right-clicking each image (or Control+Click
on a Macintosh) and saving the image to your desktop:
|
|
|
The first thing you need to do is start a blank document.
Use File > New instead of the Site panel, because creating
a new document in the Site panel doesn't give you the option
to make the document XHTML-compliant:
|
|
|
|
1
|
Select File > New.
|
|
2
|
Choose Basic in the Category box on the left and
HTML in the Basic Page box on the right.
|
|
3
|
In the lower-right corner, be sure the "Make
Document XHTML Compliant" option is checked.
|
|
4
|
Click the Create button.
|
|
|
|
After you've clicked Create, you'll see a fully XHTML Transitional–compliant
document. Switch to Code view (Ctrl+`) to see what you've
got:
|
|
<?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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Allow me to explain this code:
|
|
|
|
•
|
<?xml version="1.0"
encoding="iso-8859-1"?>
This tells XML-compliant browsers (IE5 and later and
Netscape 6) which version of XML to use when processing
this page.
|
|
•
|
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the default DOCTYPE used by Dreamweaver MX.
It's the XHTML Transitional DTD and should only be
changed if you want to move to the Strict DTD. I'll
tell you how to change this default later on in the
"Make that page behave" section.
|
|
•
|
<html xmlns="http://www.w3.org/1999/xhtml">
This is your standard <html> tag with the xmlns
(XML NameSpace) attribute added. Namespaces give you
a quick way to qualify the names used in XML documents.
This is great for a quick reference, allowing you
to quickly view the XHTML
specification that the document was coded against.
|
|
|
Now that you have your document ready, you can start designing
your page as normal. Switch to Code and Design view so you
can see what Dreamweaver is doing to the code. Type this:
Do you really know...
and press Shift+Enter to insert a line break. Notice that
when you press Shift+Enter, instead of getting the standard
<br> tag, you get the XHTML equivalent: <br />.
Because your document has an XHTML DTD, Dreamweaver MX knows
how to close the empty tags.
To add your image, press Ctrl+Alt+I or click the Image
icon in the Common category of the Insert panel. Find the
daddy.gif image you saved to your system earlier and click
OK. Looking in the Code view of your page, you should now
see this:
<img src="mmdesdev/daddy.gif"
width="150" height="40" />
Click on the image to bring up the image properties in
the Property inspector and give your image the name "yourdaddy":
|
|
|
Check the Code view again and you'll see that Dreamweaver
MX now adds both the name attribute and the id
attribute to the image. The name attribute ensures
backwards compatibility to browsers that may not recognize
the id attribute yet. When you use the Transitional
DTD, the name attribute will still validate, but
you'll need the id attribute to complement it.
Your code should now look like this:
<img src="mmdesdev/daddy.gif"
name="yourdaddy" width="150" height="40"
id="yourdaddy" />
Next add your Swap Image behavior. Select the image and
open your Behaviors panel (Shift+F3). Click the Add button
and choose Swap Image. Set the source to xhtml.gif and make
sure Preload Images and Restore Images onMouseOut are checked.
Click OK and you'll end up with the following code:
<body onload="MM_preloadImages('mmdesdev/xhtml.gif')">
Do you really know...<br />
<a href="javascript:;" onmouseover="MM_swapImage('yourdaddy','','mmdesdev/xhtml.gif',1)"
onmouseout="MM_swapImgRestore()" target="_blank">
<img src="mmdesdev/daddy.gif"
name="yourdaddy" width="150" height="40"
border="0" id="yourdaddy" alt="Who's
your daddy?" /></a>
</body>
Change the target to "_blank" to force a new window for
your link and be sure to add a descriptive alt
tag. Note that the onload, onmouseover
and onmouseout attributes are now all lowercase.
Adding a behavior to a standard HTML 4.0 page will write
the attributes as onLoad, onMouseOver and onMouseOut. Just
one more thing you don't have to think about.
That's it! You've just created your first fully valid XHTML
document using Dreamweaver MX. Next you'll convert the document
to the Strict DTD.
|
|
Make that page behave
If you feel it's time to get tough with your pages and
make sure they hold to the XHTML Strict DTD, there are just
a few things you need to change in your current page.
Dreamweaver MX isn't going to do all the work for you on
this one. Even if you're using the Strict DTD, Dreamweaver
MX will allow—and continue to add—attributes
not allowable in the Strict DTD. To convert your document,
change your DOCTYPE declaration and remove a few unsupported
attributes. Replace those now-missing attributes with some
simple CSS styling.
Here's how you change your DOCTYPE statement. Replace the
Transitional DTD with the new Strict DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
One difference to note between the stock DTD that Dreamweaver
MX inserts and your new Strict DTD is the lack of a specific
URL for the DTD. This prevents some rendering
bugs in IE6 that happen when DTDs contain URLs.
Next remove all attributes that are illegal in the Strict
DTD, such as target attributes on links and borders on images.
Remember that once you add a link to an image you'll need
to follow up and remove the "border='0'" part. You'll also
need to remove the language attribute from the <script>
tag. Your content will also need to be wrapped in a container
of some sort (such as a <p> tag or <div>). You
can determine what you've missed by using the built-in validator
that I'll cover a bit later. Your new code for your entire
page is going to look like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
...
</script>
</head>
<body onload="MM_preloadImages('mmdesdev/xhtml.gif')">
<p>Do you really know...<br />
<a href="javascript:;" onmouseover="MM_swapImage('yourdaddy','','mmdesdev/xhtml.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="mmdesdev/daddy.gif"
width="150" height="40" id="yourdaddy"
alt="Who's your daddy?" /></a>
</p>
</body>
</html>
Now that you have your page validated with the Strict DTD,
you have a nasty border around your image:
|
|
|
To remove this border, add a style to your page that says
"set the border of any image inside an <a> tag
to 0." Open the CSS panel (Shift+F11) and click the
Add Style button. In the New CSS Style dialog box, click
Use CSS Selector, click This Document Only, and enter a
img in the Selector box. Click OK.
|
|
|
In the CSS Style Definition dialog box that appears, click
the Border category in the left pane and set the Top border
to 0. Leave the Same for All checkboxes checked and click
OK.
|
|
|
You're all done. You won't see the border disappear in the
Dreamweaver MX window, but uploading the page will get rid
of the border in IE5 and later and in Netscape 6. Nestcape
4.x continues to show the border surrounding the image,
but this is the tradeoff you'll have to make.
|
|
Validating your code
Now that you've got everything put together, determine
whether you've caught all those border attributes and given
every image an alt attribute (even if it's an empty
one). To do this, use the new Results panel in Dreamweaver
MX. To show the Validation tab, choose Window > Results
> Validation or press Ctrl+Shift+F7 (or Command+Shift+F7
on a Macintosh). The Results panel looks like this:
|
|
|
In order to validate your document, click the Play button
(the green triangle) and choose Settings from the drop-down
menu. This opens the Validation category of the Dreamweaver
Preferences. Make sure you're actually checking the document
against the XHTML DOCTYPE. In the Settings dialog box choose
which XHTML DOCTYPE you want to check against.
|
|
|
Once you're sure you have your preferences right, click
OK, click the Play button again and choose Validate Current
Document from the drop-down menu. The Results panel will
give you a wealth of information regarding each error, including
the file the error is in, the line number, and what the
error is. Double-click each line to go directly to that
line in Code view so you can make your corrections.
|
 |
|
Converting old sites
Dreamweaver MX gives you an easy way to bring your old
websites into the next century with its Convert to XHTML
command. This little wonder adds the necessary DTDs to convert
all your behaviors to the proper case and attempt to add
alt attributes to any images missing them. If there
are any problems with the conversion, Dreamweaver MX provides
a prompt with the details so you know what it didn't cover.
XHTML is the first step to a more rigid and valid coding
style. When the next fancy browser comes out, you're less
likely to end up going back through old sites to fix outdated
code. Dreamweaver MX makes coding to the Transitional DTD
a breeze, and with just a little extra work, you can make
sure it will validate to the Strict DTD as well. Whichever
standard you decide to code for is entirely dependent on
your client, site and attitude. But once you've made the
choice, staying on course is simple.
|
|
|
About the author
Daniel Short, Chief Designer of Web
Shorts Site Design, designs and develops websites in
Portland, Oregon, and the rest of the world. A Team Macromedia
member devoted to teaching developers how to use best practices,
Daniel also runs Short Order Software, a venture that sells
pre-made apps and modifications as well as gives away free
extensions.
|
