HTML5 Tutorial


Overview

HTML5 was initially proposed by individuals from Apple, Mozilla Foundation, and Opera Software, known as the Web Hypertext Application Technology Working Group (WHATWG) [1]. Later, W3C took notice of the WHATWG proposal and announced a restart of an HTML specification effort [2]. WHATWG found XHTML 2.0 too document-centric and thus inappropriate for blogs, forums, web stores, and multimedia sites. Their major concern was to create a platform for dynamic web applications [3].

In spite of the tricky name, HTML5 is not just another HTML language. It is often used in the context of web applications. It is the complete reformulation of HTML with new capabilities. Still, HTML5 is designed to be backward-compatible with older browsers. Moreover, HTML5 uses an HTML syntax that is compatible with both HTML and XHTML documents. However, processing instructions are not supported. Beyond the well-known text/html media type, a new media type called text/html-sandboxed can also be used, which makes it possible to interpret a file without giving the content access to the rest of the web site. Because of a new approach that separates authoring and rendering conformance requirements, deprecated tags are not needed anymore.

During the upcoming years when earlier browser versions will still be present, HTML5 support can be critical. There are services such as the “HTML5 test” that checks HTML5 support in the browser they are opened [4]. As for the markup contributors, several tests are available on the W3C testing web page, where current tests can be reviewed, and new tests submitted [5].

HTML5 focuses strongly not only on structural and multimedia elements in the markup but also on application programming interfaces (APIs); thus, web developers with some programming knowledge can develop applications for their web sites. HTML5 applications are accessible and device-independent, and codes can be reused easily. Additionally, these web applications need declarative programming (and thus much less coding) compared to traditional procedural programming [6]. However, a large share of HTML5 functionalities can be achieved through the use of additional technologies, including CSS3, server-side scripts, JavaScript transformations, Java, or XSLT.

Listing 1 shows an HTML5 skeleton document.

Listing 1. An HTML5 Skeleton Document


<!DOCTYPE html>
<html>
  <head>
    <title>Sample HTML5 document</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <header>
      <h1>Document sample</h1>
    </header>
    <section>
      <article>
        <h2>Article1</h2>
          The first article of the document.
      </article>
      <article>
        <h2>Article2</h2>
          The second article of the document.
      </article>
    </section>
    <footer>
      Copyright © 2011 John Smith. All rights reserved.
    </footer>
  </body>
</html>

HTML5 also supports external vocabularies, such as Scalable Vector Graphics (SVG) and MathML, both of which can be embedded directly into the HTML5 markup. For example, an SVG image can be embedded between the <svg> and </svg> tags such as in Listing 2.

Listing 2. Directly Embedded SVG in HTML5


<svg xmlns="http://www.w3.org/2000/svg">
  <rect stroke="black" fill="blue" x="50px" y="50px" width="300px" height="150px" stroke-width="2">
</svg>

MathML equations can be embedded similarly. These elements can also be nested for more complex content [7].

HTML5 APIs

HTML5 provides much more than just new structuring elements. HTML5 supports many features that were available originally through plug-ins or sophisticated code only [8]. Beyond markup elements and attributes, HTML5 specifies scripting application programming interfaces (APIs) as well [9]. A native drawing API, native sockets, and so on, eliminate the problems associated with plug-ins, such as missing or disabled support to vulnerability issues.

Some HTML5 APIs are under W3C standardization, while others are under WHATWG development. Two frequently used APIs are discussed in the following sections.

The HTML5 Canvas API

The canvas markup element has been introduced in HTML5. It allows dynamic, scriptable rendering of 2D shapes and bitmap images.

Note. The HTML5 canvas has no built-in scene graph, which is a general data structure to arrange the logical (and often spatial) representation of a graphical scene. The scene graph is commonly used by vector-based graphical systems, including SVG. In SVG, all drawn shapes are stored as an object in the scene graph or the DOM and then rendered as bitmap graphics. Consequently, if the SVG object attributes are changed, the browser can automatically rerender the scene, which is not possible on the canvas. From this point of view, SVG graphics are more advanced than shapes on the HTML5 canvas.

In Listing 3, you can see how to draw a simple triangle on the HTML5 canvas. First, a custom-size canvas is declared with alternate textual content for older browsers that do not support the HTML5 canvas. Second, a script element specifies two variables to shorten the code, a two-dimensional canvas, an emerald fill color, the coordinates of the three corners of a triangle, and the triangle with the fill color.

Listing 3. Drawing on the HTML5 Canvas

	
<canvas id="samplecanvas" width="200" height="100">
  A triangle (requires HTML5 Canvas support)
</canvas>
<script>
  var mycanvas = document.getElementById("samplecanvas"),
  context2d = mycanvas.getContext("2d");
  context2d.fillStyle = "#2ad3a8";
  context2d.beginPath();
  context2d.moveTo(100, 0);
  context2d.lineTo(0, 55);
  context2d.lineTo(165, 100);
  context2d.fill();
</script>
	

A triangle (requires HTML5 Canvas support)

The HTML5 canvas is supported by IE9+, Firefox 3.0+, Chrome 1.0+, Safari 3.0+, and Opera 9.5+.

The HTML5 File API

The HTML5 File API provides easy-to-use file control in web browsers. The File API is being standardized by the World Wide Web Consortium [10].

The code in Listing 4 creates an interface to choose files either through browsing the directories on your computer or by using drag and drop. The name, size, and MIME type of the selected files will be retrieved using the HTML5 File API.

Listing 4. File API Demonstration

	
<h1>Choose file(s)</h1>
<p>
  <input id="upload" type="file" multiple="multiple">
</p>
<div id="drop">
  You can also drag and drop your files here
</div>
<h1>Retrieved file information</h1>
<ul id="fileList">
  <li class="no-items"><no files uploaded yet></li>
</ul>
<script>
  (function () {
    var filesUpload = document.getElementById("upload"),
    dropArea = document.getElementById("drop"),
    fileList = document.getElementById("fileList");
    function fileTransfer (files) {
      var li,
      file,
      fileInfo;
      fileList.innerHTML = "";
      for (var i = 0, fl = files.length; i < fl; i++) {
        li = document.createElement("li");
        file = files[i];
        fileInfo = file.name; // Name
        fileInfo += " (" + file.type + "), "; // Type
        fileInfo += file.size + " bytes"; // Size
        li.innerHTML = fileInfo;
        fileList.appendChild(li);
      };
    };
      filesUpload.onchange = function () {
        fileTransfer(this.files);
      };
      dropArea.ondragenter = function () {
        return false;
      };
      dropArea.ondragover = function () {
        return false;
      };
      dropArea.ondrop = function (evt) {
        fileTransfer(evt.dataTransfer.files);
      return false;
    };
  })();
</script>
	
Choose file(s)
You can also drag and drop your files here
Retrieved file information
  • <no files uploaded yet>

The division representing the drop area in the previous example (<div id="drop">) should be styled either with a border or with a background color to make it visible (Listing 5).

Listing 5. CSS Ruleset for the Previous Example

						
#drop {
  border: 2px dashed #f00;
  padding: 10px;
}
						
					

The File API is supported by Firefox 3.6+, Chrome 6.0+, and Opera 11.5. Safari partially supports the File API from version 4.0 and will support fully in version 6.


You can learn more HTML5 APIs from the book “Web Standards – Mastering HTML5, CSS3, and XML”.
Caution! In contrast to the common misconception, HTML5 is not a standard yet! The different modules of the specification are in various stages of development, and you might see misleading labels such as “living standard,” most of which refer to the corresponding module only. According to the W3C expectation, HTML5 will probably become a W3C Recommendation in 2014 [11].


References

  1. [1] Hickson I (2010) The HTML5 Draft Standard. Web Hypertext Application Technology Working Group. www.whatwg.org. Accessed 09 September 2010
  2. [2] Hickson I (2007) W3C restarts HTML effort. In: The WHATWG Blog, 07 March 2007. Web Hypertext Application Technology Working Group. http://blog.whatwg.org/w3c-restarts-html-effort. Accessed 09 September 2010
  3. [3] Hickson I (2008) Relationship to XHTML2. In: HTML 5. A vocabulary and associated APIs for HTML and XHTML, W3C Working Draft. World Wide Web Consortium. www.w3.org/TR/2008/WD-html5-20080122/#relationship0. Accessed 09 September 2010
  4. [4] Leenheer N (2010) The HTML5 test – How well does your browser support HTML5? Niels Leenheer. www.html5test.com. Accessed 19 January 2011
  5. [5] Hickson I (2010) W3C (2011) Testing – HTML Wiki. World Wide Web Consortium. www.w3.org/html/wiki/Testing. Accessed 19 January 2011
  6. [6] Pemberton S (2010) XML and Applications. World Wide Web Consortium. www.w3.org/2010/Talks/11-11-steven-applications/. Accessed 11 November 2010
  7. [7] Van Kesteren A (2010) HTML5 differences from HTML4. World Wide Web Consortium. www.w3.org/TR/2010/WD-html5-diff-20100624/. Accessed 23 September 2010
  8. [8] Lubbers P, Albers B, Salim F (2010) Pro HTML5 programming – Powerful APIs for Richer Internet Application Development. Apress Media LLC, New York
  9. [9] van Kesteren A, Pieters S (2011) APIs. In: HTML5 differences from HTML4. World Web Web Consortium. http://dev.w3.org/html5/html4-differences/#apis. Accessed 22 August 2011
  10. [10] Ranganathan A, Sicking J (2010) File API. World Wide Web Consortium. www.w3.org/TR/FileAPI/. Accessed 22 August 2011
  11. [11] Le Hégaret P, Jacobs I (2011) FAQ for HTML5 Last Call. World Wide Web Consortium. www.w3.org/2011/05/html5lc-faq.html. Accessed 14 August 2011