Convert HTML4 site to HTML5

Depending on your site’s purpose or use, HTML5 provide improvements and enhancements to HTML4.

New Features

Semantic Markup

Some of the new features include tags that provide more semantic markup than HTML4. Tags, such as header, footer, and nav, article,  section are some of the new tags in HTML5, and the tags provide semantic meaning to search engine bots and developers editing the HTML. The markup helps bots determine what is important and what is less important for the user.

Other features include canvas drawing, video and audio streaming, geo locating, and form interacting. In a nutshell, HTML5 is meant to make it easier to develop applications with just HTML.

Web Storage

Web Storage is similar to cookies but more efficient. Where Cookies may lack in storing information about multiple transactions in different widows on the same site at the same time, HTML5’s sessionStorage and/or localStorage IDL (Interface Description Language) may work for you. sessionStorage stores data and makes it accessible to any page from the same site opened in that window. The localStorage IDL attribute accesses a page’s local storage area, and each site has its own storage area. For example, if you visit example.com in one window and visit example.com in another window, the following code will let you know that you visited it twice.

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  if (!localStorage.pageLoadCount)
    localStorage.pageLoadCount = 0;
  localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
  document.getElementById('count').textContent = localStorage.pageLoadCount;
</script>

This type of storage is also useful with Offline storage.

Change the doctype

The doctype for HTML5 is a sort of all in one package (no strict, or transitional, etc). One size fits all! One of the first steps to convert your page is to change the doctype.

<!DOCTYPE html>

Head Information

It is recommended that xhtml and html5 should not be mixed, so remove any xhtml namespace references that you can afford to lose, such as xmlns="http://www.w3.org/1999/xhtml"
Your charset meta information is simplified:

<meta charset=”utf-8″>

You will also need some javascript to get the header and footer tags to work correctly in older versions of IE.

Semantics

Markup your site using the semantic tags. For example, wrap your header with the <header> tag, the footer with the <footer> tag, and navigation links with the <nav> tag. There are other new semantic tags for better structure with HTML5, such as <article>, <summary>, <figure>,  <figcaption>, etc… HTML5 also provides new media elements, such as <audio> and <video>; the canvas element; form elements, such as <datalist> and <keygen>; and new input type values, such as tel, search, url, etc…

For a complete reference of new elements and values with HTML5, review the w3schools.com HTML5 new elements,  and if you want to markup your pages with more detail, consider using Schema.org markup for tagging the site with microdata.

Validation

You can validate your HTML5 by using the W3C’s validation tool

HTML5 Validation

This tool will let you know if there are any HTML errors and suggest fixes for the errors.

Leave Comment