HTML5 Overview

HTML5

What is HTML5?

HTML5 is the next version of HTML defined by whatwg.org. HTML5 is mostly backwardly compatible, so all your old pages will still work.

A Wee Bit of History - Clash of the Titans

Back in the Dark Ages we used HTML4 which was sorta XML-like. Then W3C.org, the official standards committee of the web founded by none other than Tim Berniers-Lee himself, moved beyond HTML4 towards stricter compliance with XML in the standard known as XHTML 1.0. Both these standards are upright citizens of the web today with billions of pages.

The W3C then started work on XHTML 2.0, but a group of renegades from the actual browser makers were disenchanted with the direction of the W3C and in 2004 started the rebel group known as 'WHATWG - the Web Hypertext Application Technology Working Group, which produced the HTML5 Spec. The W3C, seeing that none of the browser makers were actually interested in XHTML 2.0, abandoned it and adopted HTML5.

HTML5 is a Mirage

Many of the technologies we think of as being in HTML5 are not really in the HTML5 spec, but we lump them all together for simplicity. And the 'HTML5' name itself is now obsolete. WHATWG has declared that HTML is a 'living standard' and the need for a number is deprecated. So HTML5 is really just the latest version of HTML, no numbers please.

New Features of HTML5

A Canvas object for drawing
Improved "form" functionality including new "input" elements and attributes
New structural tags like <section> and <article> to help organize your content
Local storage options
Video and audio support, sort of
Worker threads
Geolocation
History access
Microdata

Good Reference Sites
1. www.whatwg.org and wiki.whatwg.org/wiki/FAQ and developers.whatwg.org/
2. www.w3.org/TR/html5/forms.html for actual reference
3. html5-beginners-guide for overview
4. Intro to starting a web site
5. https://html5doctor.com/
6. https://html5boilerplate.com/ a template for using HTML5 in the real world
7. https://validator.whatwg.org/ List of HTML5 Validators
First Example
OK, enough yacking, let's get to our first page:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Html5 Title</title>
</head>
<body>
<p>I'm the Html5 body.</p>
</body>
</html>
```
Notice a few things:
1. DOCTYPE
  The normal long complicated DOCTYPE has been replaced with the friendlier "<!DOCTYPE html>".
2. html
  The many attributes of the "html" element have been reduced from
```
<html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
```
  to only
```
<html lang="en" >
```
3. charset
  The character encoding, which should always be set either with an HTTP header or with the meta tag '<meta charset="utf-8">'
Life is getting easier, sort of. You can start using this right now; Google is using it today.
modernizr - No Browser Left Behind
Most modern browsers support many parts of HTML5, but you need a fallback plan for older browsers. The 'modernizr' library can detect if a browser has HTML5 functionality or not, and JavaScript libraries called "Polyfills" (which is a brand name of something like Spackle in the UK) can simulate HTML5 behavior.

modernizr can be downloaded from www.modernizr.com, or I've got the 2.0.6 version here for your convenience.
1. Example of using modernizr to check for the canvas object
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Canvas Object Detection</title>
  <script src="modernizr.min.js"></script>
</head>
<body>
<p>Does your browser support the canvas object?</p>
<script>
if (Modernizr.canvas) {
  alert("your browser supports the canvas object.")
} else {
  alert("your browser does NOT support the canvas object.")
}
</script>
</body>
</html>
```
  Notice how we can call the boolean function "Modernizr.canvas" to determine if a browser supports the canvas. Click here to try this page.
  
  If the browser doesn't support an HTML5 feature you can use "polyfills" to load a replacement for the browser. These are normally JavaScript implementations, but they can be flash-based.
  
  Here is an example of using Modernizr.load() to install a polyfill.
```
    Modernizr.load({
      test: Modernizr.canvas,
      nope: './javascript/excanvas.js',
      complete: function () {
        Modernizr.load('./javascript/LoadMyLogo.js');
      }
    });
```
  The "excanvas.js" object, like a good polyfill, should act just like the real HTML5 object.
  
  Modernizer automatically creates all the new elements like <article> so you can use them now with CSS styling.