facebook google plus twitter
Webucator's Free HTML5 Tutorial

Lesson: HTML5 - How We Got Here

Welcome to our free HTML5 tutorial. This tutorial is based on Webucator's HTML5 Training for Web Developers course.

In this lesson, we will discuss the differences between HTML 4 and HTML5 (aside from the space and the number).

Lesson Goals

  • Learn what problems HTML 4 addresses.
  • Learn what problems XHTML addresses.
  • Learn how HTML5 addresses these problems.
  • Learn about the new features of HTML5.
  • Learn what is in the HTML5 Spec.
  • Learn about browser support for HTML5.

The Problems HTML 4 Addresses

HTML 4 was introduced in 1997 (yeah, a long time ago). The biggest gain in HTML 4 was the separation of formatting into CSS. Formatting tags like <font>, <s> and <u> and attributes like bgcolor, height and width were deprecated in favor of corresponding CSS properties. This allowed for big gains in accessibility and much easier, more semantic mark up (e.g., tableless layout).

There were also additional accessibility improvements, including requiring the alt attribute on <img> tags and allowing for the title attribute on almost all tags.

It took browsers awhile to conform, but eventually they managed and now web designers can safely take advantage of most HTML 4 / CSS features.

The Problems XHTML Addresses

HTML is an SGML-based language and SGML-based languages are not easy to extend or consume generically. (SGML is an international standard for markup languages like HTML; see Wikipedia for more information on SGML.) The major issue is that such languages are too flexible. The two major problems are:

  1. Not all tags are closed.
  2. Boolean attributes take no values.

As such, the tool consuming these languages (e.g., a browser or an editor), must be aware of every aspect of the language.

On the other hand, XML-based languages (XML being a subset of SGML; again, see Wikipedia for more information on XML) are stricter:

  1. All tags must be closed.
  2. All attributes must have values.

XML also enforces case sensitivity and use of quotation marks to enclose attribute values, but it is the two issues above that make XML so easily extensible.

A nice side effect was that it provided freedom from choice. And with this freedom comes the knowledge that you can look at any valid XHTML document and know what to expect. No need for a style guide to tell authors when to and not to put quotation marks around their attributes or to write in lowercase or uppercase letters.

As it turns out, XHTML wasn't adopted as whole-heartedly as had been anticipated and, as such, didn't add as much value as we all had hoped it would. The W3C stopped work on XHTML 2 in 2009.

The New More Flexible Approach of HTML5 - Paving the Cowpaths

HTML5 takes a much more flexible approach than XHTML did. HTML5 is designed with the idea that authors have been writing HTML in many different ways over the years and there are zillions of web pages out there that don't adhere to the strict XHTML standards. Rather than render those page useless, let's just relax the standard a bit (well, a whole lot). They call this "paving the cowpaths."

As an example of this flexibility, all of the following are permitted in HTML5:

  1. <link type="text/css" href="style.css"/>
  2. <LINK TYPE="text/css" HREF="style.css"/>
  3. <link type=text/css href=style.css>
  4. <LINK TYPE=text/css HREF=style.css>
  5. <LiNk TyPe=text/css hReF="style.css">

As the above shows:

  1. HTML5 is case-insensitive.
  2. HTML5 allows for unclosed tags, but you can use the XML-style shortcut close tag if you want.
  3. HTML5 does not require quotes around attribute values (unless the values have spaces in them).

This new flexibility could lead to a bit of chaos on your development team. Different HTML authors will take different approaches. Our recommendation is that you choose one approach and stick to it. In this course, for example, we use the following guidelines:

  1. Write tags and attributes in all lowercase letters (even event handlers like onclick).
  2. Do not use shortcut close tags for void/empty elements.
  3. Put all attribute values in quotes. (Why? Because attribute values that have spaces in them have to be in quotes. And I do not like the idea of having some attributes in quotes and some not.)
  4. Minimize attributes when you can.

Again, it doesn't matter so much which guidelines you choose, but it'll make your life easier if you specify some. If you're a big XML fan, you're more than welcome to stick with XML syntax described above and create XHTML5 pages.

New Features of HTML5

The table below shows the new elements that HTML5 has introduced. We will cover most of these in this course.

New HTML5 Elements
# Tag Description
1 <article> For a standalone article on a page. Articles can be nested within other articles; for example, a blog post would be contained in <article> tags and each comment would be contained within a nested <article> tag.
2 <aside> For content contained in an aside. Often used for navigation elements or for a list of articles or categories (e.g., in a blog).
3 <audio> For embedding audio files.
4 <bdi> For identifying part of text content that might be formatted in a different direction that neighboring text.
5 <canvas> For creating drawings natively in the browser.
6 <command> For command buttons similar to what you might see in the Microsoft Office 2010 ribbon. <command> must be nested in <menu>.
7 <datalist> For a dropdown list providing built-in functionality similar to a JavaScript autocomplete boxes.
8 <details> For expandable (usually initially hidden) content to provide more information about an element.
9 <embed> For backwards compatibility with the non-standard (but well supported)<embed> tag in HTML 4.
10 <figcaption> Used with <figure> for captions on images and other elements. (In HTML 4, there was no way to semantically associate a caption with any element except a table.
11 <figure> For wrapping embedded content (e.g., an image) with a <figcaption>.
12 <footer> For the footer of a page or a section.
13 <header> For the header of a page or a section.
14 <hgroup> For grouping <h1>...<h6> tags on a page. For example, the title and subtitle of a page could be an <h1> and <h2> grouped in an <hgroup> tag.
15 <keygen> For a generated key in a form
16 <mark> For showing marked (or highlighted) text. Unlike <strong> or <em>, <mark> doesn't give the text any special meaning. The best example is marking a word or phrase that a user has searched on within the search results.
17 <meter> For a measurement within a set range.
18 <nav> For holding a group of navigation links.
19 <output> For holding output (e.g., produced by a script).
20 <progress> For a progress indicator (e.g., for a loading).
21 <rp> Used within <ruby> tags to tell browsers that cannot render the East Asia characters properly what extra characters (usually parentheses) to display.
22 <rt> Used within <ruby> tags to show how to pronounce East Asia characters.
23 <ruby> For ruby annotations. (See http://www.w3.org/TR/ruby for examples.)
24 <section> For creating a <section> on the page. This helps the browser (user agent) determine the page outline.
25 <source> For indicating media sources within <video> and <audio>.
26 <summary> For the header of a <detail> element (must be its first child element). The <summary> would show by default.
27 <time> For holding a machine-readable date and/or time while displaying a friendly date and/or time.
28 <video> For embedding video files.
29 <wbr> An opportunity to insert a line break within a word. (e.g., super<wbr>califragilistic<wbr>expialidocious)

HTML5 and JavaScript

The HTML5 specifications show an API for each HTML5 element, which gives instructions on how to access an elements methods and properties via JavaScript.

JavaScript Cowpaths

Some JavaScript practices long supported by browsers but not officially in the HTML 4 specification have been specified in HTML5:

  1. innerHTML
  2. XMLHttpRequest
  3. JSON
  4. element.getElementsByClassName()

Additional Changes

  1. Native audio and video - covered in HTML5 Audio and Video.
  2. Huge advances with forms - covered in HTML5 Forms.
  3. New ways to store data in the client - covered in HTML5 Web Storage.
  4. Canvas for creating drawings natively in the browser - covered in HTML5 Canvas.
  5. HTML5 introduces the new contenteditable attribute, which makes the content of a tag editable in the browser:
    1. Open html5-how-we-got-here/Demos/html5-layout.html in your browser.
    2. Click on the content in the HTML5 Training section and start editing.

Modernizr

Modernizr is a relatively small JavaScript file that checks the user's browser for HTML5 feature support. The name is a bit of a misnomer as it doesn't actually modernize the browser. It doesn't add any missing features, it just gives developers an easy way of figuring out if the browser supports a given feature, so they can write conditional code like this:

if (Modernizr.canvas) { //use canvas to create awesome drawing application } else { alert("Go get yourself a browser that supports canvas."); }

We use Modernizr in this course (see html5-common/modernizr.min.js in your class files. For the latest version, check http://www.modernizr.com/.

If you are curious what features your browser supports, check out http://www.html5test.com.

The HTML5 Spec(s)

There are two official HTML5 specifications:

  1. WHATWG
  2. W3C

The history is a bit complex - a lot of fighting and bickering. But the end result is that we have two specifications, both with the same editor: Ian Hickson. WHATWG seems to be sort of a playground, which the editor and his contributors use to innovate. We expect that the W3C specification will ultimately be considered authoritative.

The HTML5 specs are incredibly long, but most of it is describing how user agents should deal with HTML5. Don't be afraid to use it as a reference. It can be intimidating at first, but can be very useful once you get used to it.

Current State of Browser Support

Browser support is coming along surprisingly quickly considering HTML5 reached Candidate Recommendation in December 2012 won't reach full Recommendation for some time. However, the reality is that browsers that don't support HTML5 very well still make up a significant share of the market. For example, as of this writing, versions of Internet Explorer prior version 9 still occupy a significant market share. See the chart below: Browser Share August 2013

That said, we can start playing with HTML5 now and even developing full-fledged applications. We just need to be aware of browser limitations and attempt to degrade gracefully.