IToverview.com - Easy To Learn Tutorials!

IToverview.com

Tutorials


How to convert an old HTML page to HTML5 page?

Since HTML5 is out, as a web developer, our next best thing is to convert our old HTML pages into new HTML5 pages to stay up-to-date. And how do we do that? very simple. Just you need to modify or change a few lines of your old HTML code. To be more precise, let's have a look at the sample HTML file which was written with HTML 4.01.

HTML 4 Sample Page
HTML 4 Sample Page

Comparing HTML5 Page with Older HTML Page

Above image is a simple static page with only the very basic code to form a page. Here, I have marked 1, 2, & 3 which are the lines of codes that we will be modifying in order to make this file HTML 5 complaint.

Doctype

Number 1 describes the Doctype. We can always spot this at the very beginning of each HTML page. If you try to validate a HTML page without mentioning the Doctype, the HTML Validator will show an error. I remember pasting this definition very often from my previous pages whenever I try to create a new HTML page. This definition helps the browser in rendering the page correctly by following the right HTML standards and this points to a file that identifies this standard. Here in this example we are using HTML 4 which is publicly available also the HTML markup is written in English and it points to the standards location at "http://www.w3.org/TR/REC-html40/loose.dtd"

In HTML5 the Doctype loses it's lot of weight and it is replaced by the words "<!Doctype html>". Pretty easy and no need for me to copy and paste.

Meta Tag - Character Encoding

Number 2 describes the Character Encoding in the Meta Tag. Here also HTML makes it simple by shedding few attributes. HTML 5 version of this meta tag will look like "<meta charset="utf-8">".

Link & Script Tags

Number 3 describes the Link and Script Tags. The Link refers to file type of text/css and it points to a stylesheet of file style.css. Since CSS has become the default style standard of HTML 5, we do not need to mention the type attribute. Now in HTML 5, this link tag looks as "<link rel="stylesheet" href="style.css">".

In the same way, Script tag also undergoes a transformation by leaving it's type attribute behind as Javascript is the default scripting language/standard for HTML 5. Now the updated script tag looks like "<script src=“javascriptfile.js"></script>".