XHTML & Dreamweaver MX

Ahh, XHTML. Another acronym that stands for the rather tongue twisting "Extensible Hypertext Markup Language". The (probable) savior of universal coding and consistency and an application of XML (Extensible Markup Language) - XHTML constitutes the much loved features of HTML whilst maintaining the splendour of well-formed XML-style syntax.

The W3C are responsible for drafting and creating XHTML, with the goal being to transform HTML into XML syntax. As you would imagine, the extensibility of XHTML comes with the addition of new XML elements and attributes into the mix.

Custom elements can be defined via an XML DTD (Document type definition) or XML Schema and then combined with XHTML modules which spawns a unique language that fits in with the various flavours of document types.

For this tutorial we will concentrate on creating valid XHTML and using the powerful features of Dreamweaver MX to maintain and control your documents. For more XML, DTD and Schema information, check out the related links.

Right, down to business. Dreamweaver MX, by Macromedia, provides an excellent avenue to start creating and writing web documents which validate as XHTML. Fire up Dreamweaver and select file->new - You will be presented with the following dialog;

fig 1: New document dialog
Dreamweaver MX's New document dialog window

Ignoring the multitude of documents we can create from this window, select "HTML" and make sure that "Make Document XHTML Compliant" is checked, on the bottom right, just above the "Create" button. Then, click create to launch the new XHTML page.

Flick into code view by clicking Dreamweaver MX code button (If the page is not already) - You will notice the top line is not the DOCTYPE document type declaration, but the standard firstline of an XML document.

Fig 2: First line of an XHTML document
XHTML Document info

The first line is defining the XML version and encoding type. This is necessary for your documents to validate, and as part of the fundamentals for an XHTML document.

The next line, specifies the DOCTYPE - which you may be familiar with if you have worked with HTML files before. The DOCTYPE is declaring that this document is HTML, Public and the W3C DTD Url for the transitional XHTML dtd.

The final line is the start of the document, signified by the <HTML> tag. In this instance, it has the XML Namespace (xmlns) which specifies the W3C url as the namespace. An XML namespace, as described by the W3C is as follows: "An XML namespace is a collection of names, identified by a URI reference, which are used in XML documents as element types and attribute names. XML namespaces differ from the "namespaces" conventionally used in computing disciplines in that the XML version has internal structure and is not, mathematically speaking, a set." For more on namespaces, see the related links.

For the purposes of this tutorial, I will be using a simple test page to show how to make use of Dreamweaver's XHTML functions.

So, I have my XHTML document and I start placing some markup within the pages. In this case, I have placed an image within a table.

Fig 3: XHTML Markup creation

ok, I have my code and now I want to validate it. I save my file, as this is necessary before any validation can take place, and I hit SHIFT + F6. Towards the bottom of the page, in the results panel is the outcome.

Fig 4: Validation Outcome
XHTML Validation Results

Something isn't quite right here, as we know the <html> tag needs the xml namespace attribute. The reason why we have these errors is that Dreamweaver MX defaults to validating HTML 4.0 - which does not support the XMLNS attribute, within the <html> tag. Bare in mind that HTML has many different versions, all of which Dreamweaver can validate, but the default settings may not accomodate the required HTML version. So, we simply need to amend the validator's settings.

To edit the validator settings, right click in the results panel, and select "Settings"

Fig 5: Results "right-click" menu
Right hand menu

A new dialog window will open, with a whole range of document standards listed. Don't worry about what all of these are, just scroll the list for now, unchecking every option that is checked. When this is done, find "XHTML 1.0 Transitional" and check the box beside it.

Fig 6: Validator Options
Validation settings

Now, back at your page, hit SHIFT + F6 again to re-validate the page. The following errors are displayed.

Fig 7: XHTML validation results
XHTML Validation results

The XHTML didnt validate because the <img> tag in our document is missing the required "alt" attribute, which contains alternative text for the image. We also have a nesting error, which says that <img> must be closed before <td>.

To correct this, we go back to the code and add some alternative text. Then to fix the nesting error, we need to add a trailing slash "/" to the <img> tag. As <img> does not have a closing </img> by default like most HTML attributes, the / must be placed at the end, to close this tag. (Note that </img> can also be used to close the tag and will validate)

The resulting code:

Fig 8: XHTML code with amendments

Now hit SHIFT + F6 again to revalidate once more, the following will display in the results panel.

Fig 9: XHTML validation results
XHTML validation results

This document now validates as XHTML 1.0 Transitional!

This crude example uses the results panel to analyse errors and warnings and to aid in the correction of them. This is ok if you have a few errors and warnings, but if you have many, it can be a little tricky to diagnose and fix. Dreamweaver MX has another option of browsing the validation errors via your web browser.

Fire up another window and either use this code, or some code of your own. The essence and nature of the errors and warnings isn't relevant at this stage as we are just demonstrating how to browse them in a more efficient way, so any page will do.

Fig 10: XHTML code with errors

Hit SHIFT + F6 to validate the document.

Fig 11: XHTML validation results
XHTML validation results

Here you can see that the errors and warnings can often have long descriptions, too long to see all of within the results panel. To have a closer look at them in your browser, right click in the results panel and Select "Open results in browser", as illustrated below.

Fig 11: View in browser right-click menu
Right hand menu

Click here to see the resulting page (Opens in a new window)

As you can see, the results are now displayed in a table, with a summary of the errors and warnings under the individual details. This can easily be printed off and used as reference, or saved as a html file for later. Using this method is often more helpful for diagnosis and curing of markup problems.

Go to: Home | Client-side tutorial links | Top

Copyright ©

Useful Links (External links open in a new browser window)

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

TemplateMonster - Affordable & Professional website templates!

Warning: include(includes/ads.php): failed to open stream: No such file or directory in /home1/design/public_html/tutorials.php on line 125

Warning: include(includes/ads.php): failed to open stream: No such file or directory in /home1/design/public_html/tutorials.php on line 125

Warning: include(): Failed opening 'includes/ads.php' for inclusion (include_path='.:/opt/php54/lib/php') in /home1/design/public_html/tutorials.php on line 125