[HTML5] Upgrading to HTML5

HTML4 was a huge success and XHTML1 is just an XML version of HTML4. You’ve been creating web pages using HTML4 or XHTML1. How can you upgrade these pages to HTML5? It’s not that hard as you might imagine.

 

1. Upgrading to HTML5

If you have been used XHTML1 and avoided any styling elements or attributes, you are in a good shape. If you are still using in-page styling, it is not a matter of HTML4 or HTML5. You need to consider refactoring your pages seriously. Many styling elements and attributes were deprecated in HTML4 and HTML5 does not support them officially. (Browsers might support them even under the HTML5 for backward compatibiliy.)

The basic steps to upgrade HTML4 (XHTML1) pages to HTML5:

  • Change the document type “doctype
  • Modify the <head> section: <meta>, <link>, and <script> tags
  • Refactor the <body> section: Split the content into sections and wrap them using the appropriate tags that are new in HTML5

 

2. <html> Element

Even though it is not required, it is a good idea to include the main language all the time.

<html lang="en">

</html>

 

3. DOCTYPE

It’s important to let the browser know which HTML/XHTML version is used for a document. Generally, it is quite complex and hard to memorize (actually impossible for me). But for HTML5, the doctype declaration is much simpler.

  • HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • HTML 5
<!DOCTYPE html>

Just “html”? Where is the version? What if HTML6 is released? Actually, the “doctype” declaration tells a browser to render html in its own “standard mode.” If you do not specify the doctype or do specify the old version, the browser works in a so-called “quirks” mode. This new doctype says to a browser that a document is a standard HTML and may be rendered in a standard mode.

 

4. <meta> Elements

The <meta> tag provides metadata about the HTML document. It is a description of a page and will not be displayed on a browser.

The <meta> tag has the following attributes:

  • content : the value associated with the “http-equiv” or “name” attribute
  • name : a name for the information in the “content” attribute (“author”, “description”, “keywords”, “generator”, “revised”)
  • http-equiv : an HTTP header for the value of the “content” attribute (“content-type”, “content-style-type”, “expires”, “refresh”, “set-cookie”…)
  • scheme: specifies a scheme to be used to interpret the value of the content attribute (URI or a custom format)

A typical meta tag has a pair of “http-equiv / content” or “name / content” attributes as follows:

<head>
  <meta name="keywords" content="HTML5, CSS3, JavaScript" />
  <meta name="description" content="New features of HTML5" />
  <meta name="revised" content="Peter, 1/1/2011" />
  <meta http-equiv="refresh" content="30" />
</head>

In HTML5, you can still use the <meta> tag as you usually used it. One exception is to specify the encoding of a document.

In HTML4, you can specify the encoding like this:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- HTML4 -->
</head>

In HTML5. the “charset” attribute is added to the <meta> tag. It specifies the character encoding (“UTF-8”, “ISO-8859-1” …) directly.

<head>
  <meta charset="utf-8" /> <!-- HTML5 -->
</head>

It is much simpler.

 

5. <link> Elements

The <link> element is used to define the relationship between a document and an external resource. Mostly it is used to link to style sheets.

  • rel : the relationship between a document and a linked resource (“stylesheet”, “licence”, “archives”, …)
  • type : MIME_type
  • href : specifies the location of the linked document (URL)
<head>
  <link rel="stylesheet" type="text/css" href="default.css" /> <!-- HTML4 -->
</head>

In HTML5, CSS is the default stylesheet. Therefore you do not specify the “type” attribute anymore.

<head>
  <link rel="stylesheet" href="default.css" /> <!-- HTML5 -->
</head>

 

6. <script> Elements

The <script> element is used to define a client-side script. In HTML5, JavaScript is a default scripting language and you can omit the “type” attribute.

<head>
  <script type="text/javascript" src="default.js"></script>  <!-- HTML4 -->
  <script src="default.js"></script> <!-- HTML5 -->
</head>

 

7. Restructuring the <body>

Please refer to my post “HTML5 Structure Tags” to see how you can organize the document semantically.

 

8. Upgrading HTML4 to HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>HTML4</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="Stylesheet" type="text/css" href="../Styles/Default.css" />
    <script type="text/javascript" src="../Scripts/Default.js"></script>
  </head>
  <body>
    <div id="header">HTML4</div>
    <div id="menu">Menu</div>
    <div id="content">HTML4 ...</div>
    <div id="footer">Copyright</div>
  </body>
</html>

-> You can convert like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />
    <link rel="Stylesheet" href="../Styles/Default.css" />
    <script src="../Scripts/Default.js"></script>
  </head>
  <body>
    <header>HTML5</header>
    <nav>Menu</nav>
    <section>HTML5 ...</section>
    <footer>Copyright</footer>
  </body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s