<

Converting to HTML5 with Dreamweaver

Published on
9,825 Points
3,825 Views
Last Modified:
Approved
Randy Downs
Randy Downs dba Downs Consulting Services is a verified Veteran-owned small business (VOSB)
Veteran business database www.vip.vetbiz.gov
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">

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" />

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 />

Open in new window

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

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;
}

Open in new window

0
Comment
Author:Randy Downs
0 Comments

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Join & Write a Comment

In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month