PageResource.com - Web Development Tutorials

Update your Basic HTML page to HTML5

Suppose you have a basic static HTML page with some text on it that looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> My Website </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> I am glad you decided to stop by. </p>
</body>
</html>

Sure there is nothing fancy here, but you would still like to bring it up to date and make it HTML5 compatible. Is this possible? Absolutely! HTML5 is backwards compatible. This makes it very easy to update your static pages to HTML5.  

All you have to do change the HTML documents’ DOCTYPE. The DOCTYPE is the code that is at the top you HTML page.

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

The DOCTYPE, or the document type declaration is a declaration that tells your browser how to interpret your HTML page. There are several versions of HTMLs out there. For example HTML4 was followed by XHTML 1.0 and 1.1. You might see an XHTML webpage with DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

To get the browser to interpret you page as an HTML5 page you have to give it the DOCTYPE for HTML5.

<!DOCTYPE html>

Yes, the DOCTYPE for HTML5 is very, very simple. Here is how your updated webpage would look with the new DOCTYPE.

<!DOCTYPE html>
<html>
<head>
<title>  My Website </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> I am glad you decided to stop by. </p>
</body>
</html>

That is it, you are done. You have successfully converted your page to an HTML5 page.

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy