HTML5

Introduction

The document shows a few of the HTML5 features that might be of interest to you. HTML5 provides extra functionality and also deprecates some earlier features. If you have old HTML files there are several reasons why you might want to upgrade them

• Changing input types from text to the more specific url, date, number, etc is easy to do.
• Features like <blink>, <center> and <tt> may already not work any more.
• Old pages often have hacks to cope with various browser quirks. These hacks may soon become less necessary
• The ease of using <video> may alone be enough to warrant an upgrade
• The <canvas> feature may transform your pages.
• You may find that your old pages already perform poorly on smartphones
• Outlining and other activities that require knowledge of the document structure will benefit from HTML5 sectioning commands.

Now may be time to announce the discontinuation of support for some ancient browsers.

Though HTML5 became finalized pro tem only in 2014, some browsers have supported assorted features for a while. You can use the modernizr test to assess the features of your browser. You can use the Modernizr code to check the capability of the user's browser from your code. If the browser lacks a features there's usually a fallback option.

HTML5 works best when used with CSS3, Javascript (needed for canvasses) and DOM. If you don't know what they are, have a look at documents like DHTML. Below is a list of items of interest -

Major new features

• <canvas>...</canvas> provides an area on which graphics can be drawn using Javascript, and SVG (Scalable Vector Graphics) is supported. One advantage of vector graphics is that resolution won't be lost if a line-drawing is scaled up. Simple effects are easily produced. Here are 2 examples using the svg tag (which offers similar facilities without the need to use Javascript, though it's not part of HTML5). n.b. Some browsers require the XML namespace to be defined for SVG - i.e. "xmlns="http://www.w3.org/2000/svg" is needed.

  • <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
    

  • <svg width="400" height="180">
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
     style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    </svg>
    

  SVG is XML based, which means that every element is available within the SVG DOM (and can be changed using Javascript). The box below, produced using SVG, can have its properties changed by clicking on it, thus running the javascript code.

  <svg version="1.1" baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"       
       width="200px" height="50px" viewBox="0 0 200 50"
       font-family="Times, serif" font-size="15px">
  
  <script type="text/javascript">
  function changeColor(evt){
     var myrectangle = document.getElementById("MyRectangle");
     myrectangle.setAttributeNS(null, "fill", "green");
  }
  </script>
  
  <g id="Button" onclick="changeColor(evt)">
     <rect id="MyRectangle" x="0" y="0" width="200" height="50" stroke="blue" stroke-width="5px" fill="purple"/>
     <text x="100" y="25" text-anchor="middle" pointer-events="none">Click me to make me go green</text>
  </g>
  </svg>
  

  Rather than create inline SVGs, SVG files can be loaded in. Many graphics programs can produce them. Here's the HTML5 logo as an SVG file, loaded in an <img ... >. Note that not all browsers support this feature yet

  The following canvas

  is created empty using

  <figure>
  <canvas id="canvas1" width="100px" height="100px">
  </canvas>
  <figcaption>A canvas in a figure with a figcaption</figcaption>
  </figure>
  

  (<figure> and <figurecaption> are new in HTML5) and filled in by this javascript code that's called because this document's body tag has

        onLoad="thecanvas.showcanvas()"
  

  It uses DOM to find the canvas by its ID, then gets its graphic context, after which it sets some values then calls the fill function to make the change happen.

  thecanvas=new Object();
  thecanvas.showcanvas = function()
  {
    c=document.getElementById("canvas1");
    thecontext=c.getContext('2d');
    thecontext.fillStyle='red';
    thecontext.fillRect(5,5, 100,50);
    thecontext.fill();
  }
  

  Libraries like bonsai have been created to make complex graphical tasks easier - see a piechart demo

• <video>...</video> makes insertion of video far easier
• <audio>...</audio> makes audio easier.

Structuring commands

<div> was being used for many reasons, much of the time for some standard purposes. There are now specific tags for some of those standard purposes.

• Each <article></article> in a document can have an h1 tag
• <header></header> and <footer></footer> exist
• <section></section> can be used to define an area that's a unit which might be used from elsewhere - perhaps <section><h2> ... </h2> ...</section>
• <nav></nav> is for elements (buttons, menus, etc) that are for navigation purposes.
• There's an <aside></aside> tag.

Geolocation

Users can always say no if asked for their location even the browser is capable of displaying it. The sort of code you'll need isn't difficult. It's roughly as follows

function get_location() {
  navigator.geolocation.getCurrentPosition(show_map);
}

function show_map(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  // let's show a map or do something interesting!

}

You can try clicking this button to get your coordinates. If it works (and with smartphones there's a good chance that it will), your latitude and longitude will be displayed.

Input

Rather than a generic "text" input, more specific options are available, and there are "placeholder" and "autofocus" fields. An advantage of providing the more specific option is that error checking might be done. Smartphone in particular might offer a specialised input mode (a special keyboard maybe) to deal with each type of user input -

Like the options above but moreso, the appearance of the following date input will depend on the browser. You may get a graphical calendar. The following has a Javascript callback to show you what's been accepted, so press the return key (or click on an ok button) when you've chosen the input.

Misc

• Begin with <!DOCTYPE html> on the first line with no spaces before it, because otherwise browsers might ignore it. Default is often a quirks mode.
• Setting the charset remains a good idea - default is UTF-8
• For quoted texts you can use <q></q> - if your browser supports it this text should be quoted
• There's a <command></command> tag. If your browser supports it this text should be formatted like a command
• There's a progress tag. If it works in your browser, this code - <progress value=2 max=5>fail</progress> - will show a progress bar at the end of this item, otherwise you'll see the word fail. fail
• <wbr> can be used to mark a place where a line-break can optionally be created by the browser
• local storage - a new feature; like cookies, but heavy duty
• webworkers - a new feature; background jobs that can be run from Javascript
• Use "#" as a target for links if a target's required but you don't yet want to provided one. It will produce no error message
• Transparency is possible with canvasses (but not css3) - use something like rgba(125,125,125,0.5) (grey with 50% opacity)
• iframe is back in favour (as a sandbox, for example, or a target). An iframe is here and these links (try clicking on them) use the iframe as their targets - green, light blue, dark blue
• Drag and drop is easier - put the ball in the box (see the Javascript in this page's header for the code. The image has its draggable property set to true, and ondragstart="drag(event)". The box has ondrop="drop(event)" ondragover="allowDrop(event)")
• With CSS3, multi-column text is possible with some browsers. The following text uses this style column-count:3; -moz-column-count:3; -webkit-column-count:3; column-width:180px; column-gap:10px; -
  lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and lots of text and

var xhr = new XMLHttpRequest();
xhr.open('get', 'data.html');
// Now wait for a reply and look at xhr.responseText