Create a web page using HTML 5

Imagine you want to create a page like this one:

Sample page

You can create the page above using HTML 4 or XHTML 1 using Div Tag. You can just divide all the pieces and create div for each of the area.

Sample page created using Div Tags

Instructor Note:
HTML 4 has the following declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1 has the following declaration:
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">

 

You can still use Div Tags even if you have HTML 5 declaration or you can also create the page above using the new HTML 5 tags, which is a bit more complicated since you will have to use different tags.

Instructor Note:
HTML 5 has the following declaration:
<!DOCTYPE html>

Examples of the new html 5 tags:

Sample page created using the new html5 tags

The <section> and <article> elements are conceptually similar and can be interchangeable. The important things to look at how to differentiate when to choose between the two are:

<figure> and <figcaption> elements offer alternative to group an image or a drawing with its caption. Since the <img> tag is limited from a semantic standpoint, there's no visible way to associate explanatory text with the image. Eventhough you can use alt and longdesc attributes, but you can't see both visually and sometimes they were ignored or misused in the real world.

Here's an example of using <figure> and <figcaption> elements:

Mount Hood in Oregon
Mount Hood in Spring reflected in Mirror Lake, Oregon

This is what the code looks like:

<figure>
      <img src="mt-hood.jpg" alt="Mount Hood in Oregon"><br />
      <figcaption>Mount Hood in Spring reflected in Mirror Lake, Oregon</figcaption>
</figure>

Note that <figure> doesn't have to contain an <img> element. It can contain an SVG drawing (Scalable Vector Graphics) or a <canvas> element--an image you can create with JavaScript.

HTML 5 New Features

Here are some new features in HTML5:

HTML 5 Drawback

There are 2 exceptions when you use HTML 5 to create a web page:

Since Internet Explorer won't apply CSS rules to any elements it doesn't recognize, you need to trick it into recognizing elements with a bit of JavaScript. You can use one of the freely available compatibility script available at: html5shiv.

To enable the HTML5 Shiv (after downloading), insert the following code into the <head> element. This code is a comment that only versions earlier than IE9 reads. It must be placed in the <head> element because IE needs to know about the elements before IE renders the page.

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

You can also use Html5-now, an open source project started by Dean Edwards. He is famous for writing several drop-in scripts for old versions of Internet Explorer, which made them behave in a standards-compliant manner. The purpose of html5-now.js is to provide a drop-in solution that patches the browser's holes in HTML5 support. It's currently in alpha, but it already provides a lot of support for HTML5 form controls.

Instructor Note:
Warning! If your users disabled JavaScript on their browser or if something blocks your JavaScript from being downloaded, such as corporate content filter or a personal firewall, then this trick will not work.

Removed Elements from HTML 5

The following HTML 4.01 elements has been removed from HTML 5: