Write HTML5 in Dreamweaver

01
of 04
First You Need an Updated Version of Dreamweaver

Adobe Dreamweaver CS6
Adobe Dreamweaver CS6. Image courtesy Adobe

This tutorial works in the following versions of Dreamweaver:

  • Dreamweaver CS6
  • Dreamweaver CS5

Using Dreamweaver CS6

If you have Dreamweaver CS6, you don't need to do anything. Just go to step two of this tutorial.

Using Dreamweaver CS5

The first thing you need to do if you want to write HTML5 with Dreamweaver CS5 is make sure that you have the 11.0.3 update. Go to the “Help” menu and choose “Updates...”. This will open a new application — the Adobe Application manager. Click on Dreamweaver and if that update is listed you will need to install it and then restart your computer.

Once you have the 11.0.3 update, you will have access to a bunch of new features including support for HTML5 and CSS3.

02
of 04
Open a New File

New File Dialog in Dreamweaver
New File Dialog in Dreamweaver. Screen shot by J Kyrnin

Open a new file in the File menu (Ctrl-N or Cmd-N). Choose HTML in the Page Type field and “<none>” in the Layout field. Then, in the third column, choose “HTML 5” in the DocType drop-down menu. Then click the “Create” button.

03
of 04
Dreamweaver Code View of HTML5 Document

Code view of an HTML 5 document in Dreamweaver
Code view of an HTML 5 document in Dreamweaver. Screen shot by J Kyrnin

Dreamweaver will open a new HTML document. If you view the code source, you’ll see the <!DOCTYPE HTML> doctype of an HTML5 document.

04
of 04
HTML5 Templates in Dreamweaver

Dreamweaver HTML5 Templates
Dreamweaver HTML5 Templates. Screen shot by J Kyrnin

Dreamweaver also offers new HTML5 templates you can use. But be sure to change the doctype, as it will continue to default to whatever doctype you have set as the default, even if you choose an HTML5 template.

If you use one of these templates, you’ll be pleased to see that they have fully commented the HTML and CSS so that you can see what they are doing and learn how to use HTML5 more effectively.