HTML5 is the fifth major version of the core markup language of the World Wide Web used for providing the document structure of web pages. In all versions of HTML (including HTML5), the different parts of web documents, such as headings, paragraphs, images, and so on, are delimited by different opening and closing tag pairs (between the < and > signs, and a / preceding the closing tag), which makes it possible for web browsers, such as Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Safari, to display the web pages correctly. For example, paragraphs are delimited by <p> and </p>. Similarly, a level 1 heading is written between <h1> and </h1>. The definition of these tags is provided in the HTML specifications as elements (head, body, title, h1, p, etc.), that together form the HTML vocabulary. The rules and restrictions of using these elements are controlled by the HTML grammar, which, when followed, results in standard-compliant (valid) HTML documents, that can be used on most browsers and rendering engines regardless of the computing platform or operating system (high interoperability). Some core structuring elements, such as html, head, and body, must be used in all HTML documents, but the other elements are optional, and are used or omitted depending on the content of the web page. The main structure can be demonstrated by the so-called HTML5 skeleton document (see Listing 1).
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 © 2015 John Smith.
</footer>
</body>
</html>
The Short History of HTML5
Over the years, two types of markup languages have been developed and adopted widely: the ones based on SGML (HyperText Markup Language, or HTML for short), and the ones based on XML (eXtensible HyperText Markup Language, XHTML). The HTML documents can be processed and displayed (i.e., parsed) by HTML parsers, and the XHTML documents can be parsed by XML parsers, making a huge difference in the required precision. The HTML line of markup languages is more permissive than the very strict XHTML languages, so that a single character in the wrong location in the XHTML markup might result in an error message, rather than the actual content of the web page (white screen of death). This is one of the main reasons why the HTML languages became more popular, however, the valid (error-free) XHTML documents might be better for some research and professional applications, such as medical web sites, where there is no room for error.
In the late 1990s, the infancy of the Web, HTML has evolved to version 4.01, whose vocabulary was used in the XML serialization (“flavor” or format) of HTML, XHTML, since 2000. The second major version, XHTML 2.0, has never been standardized, because till then all markup languages were too document-centric, and couldn’t match the growing needs for dynamic contents, multimedia, video streaming, chat and interactive contents. The result was HTML5, a new generation of markup languages.
HTML5: The New Generation of Markup Languages
HTML5 has an extended vocabulary with new structuring (section, article) and multimedia elements (canvas, audio, video), and new attributes, along with new event handlers. Some elements and attributes of older HTML versions are obsolete or deprecated in HTML5. The new features of HTML5 make it possible to create structured, accessible markup providing interactive and multimedia contents on web pages without Adobe Flash, which was the most popular technology for almost a decade for these kinds of contents. HTML5 also has a strong focus 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. However, the full potential of HTML5 can be achieved through the use of additional technologies only, including CSS3, server-side scripts, JavaScript transformations, Java, and XSLT.
Polyglot HTML5/XHTML5 Documents
The HTML5 vocabulary (set of elements and attributes) can be used both in HTML and XHTML documents (HTML or XML serialization). If the HTML5 elements and attributes are written as HTML, the document is called an HTML5 document, if the HTML5 elements and attributes are written as XHTML, the document is called an XHTML5 documents. In fact, the same document can be both HTML5 and XHTML5 at the same time, meaning that the same document can be parsed in HTML parsers as HTML5, and in XML parsers as XHTML5, and generate the same Document Object Model (DOM) tree either way. These documents are called polyglot documents.
HTML5 Modules
In contrast to the previous versions of HTML, HTML5 is modularized, meaning that specific features that would slow down standardization are identified, developed and standardized separately. The results are the subversions, such as HTML 5.1 and HTML 5.2.
Extending the Core HTML5 Vocabulary
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, as shown 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.
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. A native drawing API, native sockets, and other HTML5 APIs, 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>
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.
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)
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 (see 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.
HTML5 Microdata
HTML5 also provides a native metadata format, HTML5 Microdata, for machine-interpretable annotations, which can be processed automatically by software agents, such as next-generation search engines. For example, the Google Knowledge Panel and Google Knowledge Carousel display Google Knowledge Graph data derived from a variety of resources, including Schema.org and other machine-readable annotations of web sites written in HTML5 Microdata and JSON-LD.
You can master HTML5 from the book “Web Standards: Mastering HTML5, CSS3, and XML”.