Return to Course Content Home

HTML 5

Required Reading

The January 2008 document by W3C on HTML 5 changes, https://www.w3.org/TR/html5-diff/

HTML 5 New Elements, https://www.w3schools.com/html/html5_new_elements.asp

Changes

HTML 4.0 came out in 1997, which is a long time ago in web-years. Originally, the World Wide Web Consortium (W3C) was working on XHTML 2.0, but in 2006 they decided to work on HTML 5.0 insted. HTML 5 supports XHTML format, but it does not require it. When you consider how much has changed in the years since HTML 4 was approved, you realize a great deal has been demanded from browsers.

The HTML 5 standard had several goals:

Besides cleaning up HTML in general, a lot of work been done in the area of browser capabilities. There is a lot in your browser that depends on plug-ins, and the W3C wanted to remove the need for common plugins in current browsers.

Okay, why did we cover HTML 4 first? Well, because for a lot of people and sites, HTML 4 just works fine. HTML 5 puts support in for a lot of new features, but it doesn't mean the HTML 4 is broken. Plus, you might be surprised how often a little bit of "good old HTML 4" get inserted into non-obvious we code.

Syntax

Since HTML 5 is a follow-on to HTML 4, the syntax is still much the same. The W3C document in the required reading shows the following examples of HTML and XHTML syntax for HTML 5. A sample HTML file looks like this:

<!doctype html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Example document</title>
    </head>
    <body>
      <p>Example paragraph</p>
    </body>
  </html>

The XHTML version is as follows:

<?xml version="1.0" encoding="UTF-8"?>
  <html xmlns="https://www.w3.org/1999/xhtml">
    <head>
      <title>Example document</title>
    </head>
    <body>
      <p>Example paragraph</p>
    </body>
  </html>

Note the differences in the first line of the documents. The HTML version has the <!doctype html> tag, whereas the XHTML requires the <?xml version="1.0" encoding="UTF-8"?> tag and the modified <html> tag that contains the xhtml attribute <html xmlns="https://www.w3.org/1999/xhtml">. You no longer need to put the long version/encoding information into the first line!

Also note that the charset in the HTML version uses a simpler meta tag to specify UTF-8 encoding. There are two other means of setting the character set, and they are covered in the reading.

Content

I'm not going to repeat everything in the required reading, but I will point out a couple of the BIG changes.

Document markup

First, there are a lot more document elements that allow you to break up your HTML in a more logical way than getting carried away with <div> tags. The HTML parser knows where to put each type of tag and the algorithm will lay out your document. For example, the following graphics shows how some of the tags are positioned.

HTML 5 document layout

Multimedia

One of the biggest is native audio and video support within HTML 5.

Input elements

You'll notice there are some FORM type of input types, notably the datalist type to make combooxes

Graphics

There is a canvas object that can be used for rendering dynamic images on the fly. Rather than try to copy over a great tutorial on using the <canvas> tag, I'll include this link:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
for you to view the tutorial. Those of you with Java AWT experience will notice quite a few similarities with the Java2D graphics calls. The canvas element has no drawing abilities on its own, you use JavaScript to do all the drawing.

Items no longer supported

Just as important as added features, are features no longer supported. You'll notice that things like ,center> and <font> are omitted, as well as frames and the applet tag (actually, applets are still possible, you just use the <object> tag instead). In addition many attributes on tags have also been omitted in favor of using CSS. These include align, background, bgcolor, height, style, width and many others.

APIs

Another big change is the APIs provided by HTML 5. Some of the big ones are:

Many of these are not implemented (yet) in current browsers. One interesting item of the above is the Persistent storage. HTML5 offers two new methods for storing data on the client:

The w3schools website notes that in HTML 4 and earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.

The data is stored in different areas for different websites, and a website can only access data stored by itself.

How do I know what my browser supports?

Well, first of all, you'll need a browser that supports HTML 5.0. Now as with all great tests, it all depends on what "supports" means. In most cases, "supports" means the browser doesn't completely choke, it doesn't means it supports ALL of the HTML 5 standard. There is a great link you can go to to see how your browser implements HTML 5. Try going to https://html5test.com/

As of Dec 2018, the "Other Browser" tab shows the following scores for all of the major browsers. Sadly this hasn't been updated since then. However Chrome 80 got a 533/555 and Firefox 75 got a 515/555, so there has been progress.

Other Browsers