In this chapter we will explain briefly the reasons why and how-to migrate from HTML4 to HTML5 document.

There are many reasons why we should start migration to HTML5. Let's mention a few:

  • The HTML5 adds new features and possibility to web design, including an excellent multimedia support, drag and drop elements, and improved HTML forms handling;
  • The HTML5 supports rich APIs that may be used to introduce many cool functions and quick solutions, for instance Geolocation, Drag and Drop, Local storage or Server sent events;
  • More flexible coding supported with the fact that closing tags are no longer needed, not case sensitive, easier declarations, etc. To see details about guides about HTML5 programming the visit the next topic in our tutorial, but it is adequate to say that that the HTML offers easier coding;
  • Rapidly increasing support across modern browsers and mobile devices. Well, this one is self-explanatory. 

Rules for proper migration from HTML 4 to HTML 5

There are only a few rules to follow during migration from HTML4 document to HTML5 document. These are listed below:

Doctype

Change the doctype from HTML4 doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

to HTML5 doctype:

<!DOCTYPE html>

Encoding

Change the encoding information from HTML4:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

to HTML5 encoding:

<meta charset="utf-8">

Add The Shiv (if wanted)

The Shiv is added if you want to ensure the support older browsers like Internet Explorer 9.0:

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Introduce new semantic tags

Start replacing some of your HTML tags with the semantic tags, for instance replace <div> element with id="summary" with the <summary> element. Like this:

<div id="summary">

   <p>This is summary</p>

</div>

<summary>

   <p>This is summary</p>

</summary>

Beware that most of the browsers consider these tags as block level elements. To change behavior use style sheets:

footer, header, hgroup, nav, section {

   display: inline;

}

 

›› go to examples ››