At last night’s Brisbane Web Design meetup, Carolyn King (@cazazz) mentioned how current versions of Dreamweaver don’t recognize the new HTML5 tags (ie, <header>, <article>, <aside>, <footer> etc.) and she asked if it’s possible to add support for it some how…

Here’s how:

1. Start Dreamweaver and go to Edit > Tag Library Editor
2. Click on the plus “+” icon and select New Tag Library
3. Give your new tag library a name, something like “HTML5 tags”
4. Select the type of documents you want the HTML5 tags to be used in from the “Used in“ list
5. Now, click on the plus “+” icon again and select New Tags this time
6. Type the HTML5 tags you’d like to add
   TIP: add multiple tags at once – copy and paste this selection of tags if you like:

   article, aside, audio, canvas,  command, datagrid, datalist, details, dialog, figure, footer, header, hgroup, mark, meter, nav, output, progress, rp, rt, ruby, section, source, time, video

7. Next, you can add HTML5 global attributes to these tags. Click on the plus “+” icon and select Add Attributes
8. Select the HTML5 tags library you created before and select the tag you want to give attributes to. You can comfortably add the global attributes to all new HTML5 tags:

   class, id, style, contenteditable, irrelevant, tabindex, contextmenu, lang, template, dir, ref, title, draggable, registrationmark

   However check to see if any specific tag attributes should be added too …and click OK.
9. Once that is done you can also assign attribute types where possible, ie: class = CssStyle or dir = Enumerator (with values: ltr, rtl) etc.
10. That’s it!

Another (easier) way to add HTML5 tag support to Dreamweaver is by importing a HTML5 DTD Schema - however, at the time of writing a Document Type Declaration for HTML5 does not exist because HTML5 isn’t a standard yet.

There’s no official formal schema for HTML5 because we have found that providing an official formal schema leads to people using that schema even if it is buggy, never considering writing their own. By not having an official formal schema, we have found that implementors are more likely to write their own code, competing on quality. Ian Hickson

Until then the method above is is the only way of adding (partial) HTML5 support to Dreamweaver (that I know of). The steps above were written for Dreamweaver CS4 on Windows (I’m assuming it’s a similar process for other platforms and/or previous versions of Dreamweaver. Dreamweaver CS5 has suggested that it will support HTML5.

Setting up your new HTML5 Tag Library in Dreamweaver can take some time, but once it’s setup correctly the learning and coding process for HTML5 just got a lot easier. Good luck!

Tags: Adobe, CS4, Dreamweaver, HTML5, Tutorial