<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Converting to HTML5 with Dreamweaver

Published on
10,010 Points
4,010 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

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Join & Write a Comment

HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month