Valid HTML 4.01 in Dreamweaver 4
You’ve got deadlines piling up and no time to lovingly handcode every page of the monster site that had to be ready yesterday, Dreamweaver is the answer for many developers and teams and it speeds up development time (particularly in a team environment) hugely. But you aspire to valid html, the W3C html validator is in your bookmarks and the top visitor in your referer logs. Can rapid development in Dreamweaver ever result in code that validates?
I think that it can. Although as things stand in version 4 of Dreamweaver (Ultradev) there is much to be desired about it’s ability to produce valid markup, with a bit of careful planning and by being aware of the issues you can still use all the timesaving features of the tool without sacrificing code that validates. This is by no means a complete list, these are things that I have noticed in my own experiments and I will add to it as time goes on. If you have any tips that belong here let me know.
I hope that the tips and tricks that follow are unnecessary in future releases of Dreamweaver, but at the end of the day no matter how good the editor, it is up to the person at the keyboard to ensure that they are doing everything they can to work towards standards and an accessible web for all.
First things first
By default Dreamweaver doesn’t insert any DOCTYPE declaration into the head of your document. Now if you run a page without the DOCTYPE through the W3C validator you get:
Error: Missing DOCTYPE declaration at start of document
If you are using several different DOCTYPEs or do not want to change your default document, there are various extensions available for download on the Macromedia Exchange that will enable you to select DOCTYPE definitions. The Super HTML-XHTML DTD Extension for instance will allow you to add HTML and XHTML DOCTYPEs and some XHTML declarations.
If you are likely to always use one DOCTYPE declaration then you can add it to your default document that is launched on start up or when you hit file > new
Look in Program Files > Dreamweaver (Dreamweaver UltraDev) > Configuration
> Templates. In the Templates folder you should see a default document. This is the document which launches on opening Dreamweaver or when requesting a new window. You can edit this document as you wish, so add your DOCTYPE declaration above the first tag and it will be there every time you open a new document to work with.
Building your pages
Having a plan of action is the way to beat the non-valid mark up. Dreamweaver defaults to using font tags for color and size but will display most applied styles fairly accurately. Therefore if you build a good, valid stylesheet and attach it to your document from the start you will be able to work visually without the risk of font tags creeping in as you try to emulate the way that the site will look in a browser.
Note: Dreamweaver will fail to notice changes that you make to your stylesheet in an external editor unless you reopen your document.
Easy to forget but very important for visitors to your site who are using non-standard browsing methods such as the visually impaired. For these visitors a descriptive ALT attribute will allow them to understand the site better (especially where images are used as navigation). In Dreamweaver you add ALT attributes to your images in the properties inspector. Your page won’t validate without them.
Tip: You can run a report in Dreamweaver to check for missing ALT text. Select Site > Reports and run the “Missing Alt Text” report.