Assignment029g2a

Div Layouts - HTML5

HTML5 introduces many new elements (tags). These new elements include easier ways to add audio, video, and animation to our web pages. Some new elements are meant to enhance the meaning of our layout structure. We now have the header, nav, section, article, aside, and footer elements to play with (among others).

In order to use HTML5, you must use a new doctype. Be warned, however. Many users are still using outdated browsers or worse, they may be using Internet Explorer (IE). With that in mind, we will provide a fix for IE.

The following sub-assignments will help you understand HTML5:

  1. The HTML5 Conversion (Convert the Doctype and add/update HTML5 elements) - Works for modern browsers
    1. Update the doctype to <!DOCTYPE HTML> (if it needs updating)
    2. Rename #header to #pageheader
    3. Add the header tag (replace div)
    4. Add the nav tag to #leftcolumn
    5. Add the section tag to #content
    6. Add the aside tag to #rightcolumn
    7. Rename #footer to #pagefooter
    8. Add the footer tag (replace div)
  2. The IE Fix - html5shiv.js (Fix old IE for HTML5 by adding a line of JavaScript code. This will link to an external javascript file)
Tag Description
<header> Defines a header for a document or section
<nav> Defines main navigation links
<section> Defines a section in a document
<aside> Defines stand-alone content aside from the page content
<footer> Defines a footer for a document or section

Regarding html5 compatibility, read the following article on the html5.shiv.