Moving Websites to the HTML5 Markup

Browsers (except Internet Explorer) are constantly improving their support for HTML5 and although there is no final version of the new standard yet, many developers are aware of the whole new world of possibilities that opens with its use. Internet Explorer 9 will support it natively, but why wait when you are just a few easy steps away from using HTML5 without any cross browser concerns now? Here they are:

  1. Change your current doctype to <!DOCTYPE html>. It is easy to remember, and although it is not associated with a schema, namespace and subset, it does not trigger quirks mode in Internet Explorer and your page will look exactly as it was before with the XHTML DTD.
  2. According to the specifications, HTML5 does not require the implicit setting of mime types when you register external style sheets or JavaScript, so you can safely remove type="text/css" from your <script /> and <link /> tags. Be aware that you shouldn’t remove rel="stylesheet", otherwise the browser will not know what type of linked document is dealing with and won’t be able to parse it correctly, i.e. your CSS rules will not be applied.
  3. Remove the xmlns="http://www.w3.org/1999/xhtml" attribute from the <html /> tag. As we mentioned already, namespace is not required anymore.
  4. If you are using <meta http-equiv="content-language" content="en"/>, you can safely remove it, and add put your language code in a lang attribute directly in the <html /> tag:

<html lang="en-US">

  1. HTML5 does not allow stray-end tags for <link /> tags, as it was required in XHTML1.1, so you need to change:

<link rel="stylesheet" src="styles.css"></link>
To:

<link rel="stylesheet" src="styles.css" />

  1. You can safely remove the meta charset tag:

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

… And use:

<meta charset="utf-8" />

At this stage your website is already HTML5, but in order to start using the new tags and bring semantics to your code you should enable them in Internet Explorer 6-8.

Enabling HTML5 in Internet Explorer

One of the persistent issues with Internet Explorer is that it cannot style elements it does not recognize. The problem is as early as IE5.5 – although the <abbr /> tag was part of the official specification of HTML, IE5.5 did not recognize it, and thus – did not style it. The solution was to create the element with JavaScript, and then everything was worked. The other issue is that IE collapses unknown tags at parse time. This means that the children of your, let’s say <aside /> tag will actually become children of the parent of <aside />. Fortunately, this can be fixed with the same JavaScript approach. More about it is available on the MSDN official blog, and the solution that is widely accepted and used is called HTML5Shiv and has been created by Remy Sharp.

Start Using HTML5

If you have added HTML5Shiv to your webpage you are good to start using HTML5 elements and replace the semantically void <div /> and <span /> tags with <header />, <footer />, <aside />, etc.

Below is a list of websites that provide detailed information, cheatsheets, sample code and tutorials on HTML5:

Happy coding!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s