Search Engine Optimization

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.

 

BLOCK RATES ARE 10% LOWER!

Free walk through of your company or remote/drop-off computer analysis.

You save money by purchasing block hours. Pay with a check, credit card or PayPal. You are responsible for fees incurred with credit card and PayPal.

 

Contact Email : [email protected]


Best practice

Use an external CSS style sheet and 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">



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.



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



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

.space {

  margin: 5px 5px;

  }

.left

{

float: left;

margin-left: 5px;

}

1:


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

 

cssSample CSS

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;

}