How to insert HTML 5 tags to Dreamweaver CS4

March 23, 2010 Miscellaneous things on HTML 5

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Start Dreamweaver and go to Edit > Tag Library Editor

Click on the plus “+” icon and select New Tag Library

Give your new tag library a name, something like “HTML5 tags”

Select the type of documents you want the HTML5 tags to be used in from the “Used in“ list

Now, click on the plus “+” icon again and select New Tags this time

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

Next, you can add HTML5 global attributes to these tags. Click on the plus “+” icon and select Add Attributes

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.

Once that is done you can also assign attribute types where possible, ie: class = CssStyle or dir = Enumerator (with values: ltr, rtl) etc.

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.

here’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!