Converting to HTML5 with Dreamweaver

HTML 5 has a lot of nifty features like simplified tags for character set, scripts & document type. Converting to HTML 5 will help users and search engines alike parse your website.

Many add-ons to websites like the Facebook Like  button reference attributes that are not valid unless you use HTML 5.

Converting to HTML 5 is relatively easy using Dreamweaver using File | Convert | Html 5. You will need to validate your code and get rid of obsolete attributes & keywords like audience, align, hspace, vspace, width, summary, bgcolor, and border. Most of these you can replace with CSS. I have listed some of the common CSS replacements below. You may want to customize as needed.

Best practice is to use an external CSS style sheet so you should put your CSS in a file like basic.css and include it in your meta-tags. The following is my meta-tag that I used.

<link type="text/css" rel="stylesheet" href="../../basic.css">

Select all Open in new window

Note the path is

../../

since my CSS is actually 2 levels above the web page I am adding it to. If your CSS & web page are in the same folder, you won't need the relative file path descriptors.

Now that you have the CSS in an external file you can just reference them via class or id. I like class since I can reference them multiple times. id can only be referenced once per page.



Use Validator to check your code & replace the obsolete code with CSS. It takes some patience but you will be glad you are not using obsolete attributes & keywords on your website.

Example - Replace obsolete Tags with Class in External File :
The following uses obsolete hspace, vspace and align

<img src="../../images/B/Blake-Shelton-200.jpg" alt="Blake Shelton rodeo tickets" width="133" height="200" hspace="5" vspace="5" align="left" />

Select all Open in new window

This is the html 5 version using CSS. Note that 2 classes were used space & left. Space replaces the hspace & vspace while left replaces align.

<img class="space left" src="../../images/B/Blake-Shelton-200.jpg" alt="Blake Shelton rodeo tickets" width="133" height="200"/><br />

Select all Open in new window

.space {
                      	margin: 5px 5px;
                      	}
                      .left
                      {
                      float: left;
                      margin-left: 5px;
                      }

Select all Open in new window

That seems like a lot of work and you may have a lot of validation errors but don't dismay as you can use Dreamweaver Find (CTRL F) and replace all occurrences  of an obsolete tag in the current page, selected files. or the entire site. I suggest taking it slow at 1st and working on a copy of your page or site as multiple replacements can have unexpected results if your criteria is too general.

Sample CSS in external CSS file - ../../basic.css

.border0 {
                      	border:0px;
                      }
                      
                      .border5 {
                      	border:5px;
                      	margin: 5px 5px;
                      }
                      .center
                      {
                      margin-left:auto;
                      margin-right:auto;
                      }
                      .center-head {
                      	text-align: center; 
                      	margin-top: 5px;
                      	font-family:Verdana, Geneva, sans-serif;
                      	font-size: 10pt;
                      }
                      .footer {
                      	width:100%;
                      	border:1px;
                      	padding: 5px;
                      	border-spacing:5px;
                      }
                      .left
                      {
                      float: left;
                      margin-left: 5px;
                      }
                      .right
                      {
                      float:right;
                      }
                      .right-5
                      {
                      float:right;
                      margin-left: 5px;
                      margin-top: 5px;
                      }
                      .space {
                      	margin: 5px 5px;
                      	}
                      .strong { 
                      font-weight: bold; 
                      }
                      .text-center {
                      	text-align: center;
                      }
                      .text-left {
                      	text-align:left;
                      }
                      .text-right {
                      	
                      	text-align:right;
                      }

Select all Open in new window