HTML5 Tutorial

Introduction to HTML5: The HTML5 Tutorial for Beginners

HTML, which serves as the foundation of the internet, has undergone numerous changes since its inception in 1991. The markup language has seen its share of ups and downs over the years, but the introduction of what is being referred to as “HTML5” is a welcome and much anticipated addition of new semantic capabilities and valuable APIs to the web.

While HTML has seen its fair share of ups and downs, the introduction of “HTML5” is a welcome and eagerly anticipated addition of new semantic capabilities and valuable APIs to the HTML language.

What Exactly Is HTML5?

When it comes to online browsers today, HTML5 is an assortment of new components, enhancements to existing elements, and new JavaScript APIs that are all accessible through current web browsers. In order to provide the most accurate description of what HTML5 is, it may be helpful to begin with a few characteristics of what HTML5 is not in order to paint the most accurate picture.

HTML5 is not the next revision of the XHTML markup language. The truth is that many of the rules that you are accustomed to because of your knowledge with XHTML have been altered in HTML5. We as software developers may be delighted by the promise of XHTML’s standards compliance and strict validation, but the practical outcome of broken layouts and validation errors bubbling up to users has produced an unexpected result: programmatic perfection does not translate into a user-friendly web experience. XHTML is not a long-term standard for a variety of reasons.

The real world of the web comprises a vast number of ill-formed HTML pages, most of which were made by tools and people who did not adhere to the same high standards as the diligent web developer. However, while this may appear to be a negative development, non-code aficionados are frequently tasked with developing content for the web and have little interest in worrying about whether or not every HTML property has a value in their markup, for example.

When it comes to HTML5 tutorial, it goes beyond the utopian dream of tight adherence to a schema and places the highest value on the website’s user rather than the HTML craftsperson.

HTML5 focuses the greatest emphasis on the website’s user, rather than the HTML craftsman who created it.

The term “HTML5” is no longer in use. Although technically correct, the term “HTML5” is a misnomer because there are no longer independent versions of HTML available. When HTML5 was first proposed, there was a notion that the next version of HTML would be referred to as HTML5. This notion was later abandoned. The designation “HTML5” gained traction in the industry and began to be used essentially as an umbrella word for “the latest thing” in online development, a practice that continues today. According to Ian Hickson’s blog entry HTML is the New HTML5 (http://blog.whatwg.org/html-is-the-new-html5), the standards document formerly known as “HTML5” is currently being maintained under the auspices of the plain name “HTML” as a fluid specification, rather than the previous moniker “HTML5”. Due to the fact that HTML5 has become a catchall word for many different technologies, and that different browser vendors are implementing different elements of the specification, this is the case in this case. As a result, the notions of “detection of HTML5” and “supporting HTML5” are based on flawed reasoning. Rather of searching for HTML5 in its entirety, developers would be better served by identifying the specific HTML5 capability that their application need in order to run.

So, if HTML5 isn’t just XHTML with a few flashy new capabilities, then exactly is it? Quite simply, HTML5 is a new HTML standard that incorporates many of the features and capabilities of HTML4 while also introducing new semantic markup and a number of new JavaScript APIs.

For the sake of clarity, this article will continue to refer to the mix of markup changes and new JavaScript APIs as HTML5 in order to make it easier to distinguish between new technologies.

Semantic Markup

It is impossible to overstate the importance of semantic markup on the web. When you take into consideration many of the changes associated with semantic markup, you may notice that there appears to be very little difference. It may not appear revolutionary at first glance, but the true benefit lies in the page’s capacity to more clearly define the objective of the containing information by using new tags rather to old ones, as opposed to the old ones. Ultimately, pages with inherent meaning will outperform pages with no inherent meaning in search engines since they are easier to digest on the client and easier for external machines to comprehend and understand.

The semantic shifts are the result of design patterns that have been implemented. Contributors to the HTML5 specification include firms such as Google, Microsoft, and Apple, as well as the majority of the major browser vendors and literally hundreds of smaller organizations. Using the huge array of markup available on the online, these contributors sought to create new HTML elements that reflected the intent of the present web composition.

So, while the addition of additional components may not appear revolutionary, the benefit is that it allows you to contribute more intrinsic meaning to your HTML pages, resulting in a more open and useful online. Table 1 contains a list of several of the HTML elements that were added in HTML5.

APIs for JavaScript

If the markup is the first half of the HTML5 equation, then the new JavaScript APIs are the second half of the equation. HTML5 is a two-part equation. In fact, the more you learn about HTML5 application development, the more you discover that the majority of the new capability is contained within the browser’s newly enhanced scripting capabilities.

While browser support for each script API varies from one browser to the next throughout the browser landscape, Table 2 describes the potential of each API once it is fully supported by a browser.

Browser Support and the Beginning of a New Era of “Browser Warfare”

The browser environment resembled something out of the Wild West in the early days of the web. Each browser vendor, in an attempt to capture the greatest amount of market share, began integrating new features as rapidly as possible, frequently using proprietary APIs. As a result of this fragmentation in the market, websites may only function correctly in a single browser, or development teams may be compelled to duplicate their efforts in order to provide the same functionality for different browsers. For the most part, the scenario was a lose-lose situation for both web developers and website visitors alike.

The growing power of the Web Standards Project, which worked tirelessly to persuade browser manufacturers to agree to work within the established standards, marked the beginning of the end of the browser wars.

As a result, the difference between the push and pull toward full HTML5 compatibility today is that each browser manufacturer is implementing against the same specification. Those days are long gone when, in order to implement the same functionality on a page, you had to code for both the Netscape API and the Internet Explorer API. As long as the APIs are well-known and established, the dance is simply a means of compensating for the period of time when a user’s browser may not be able to support the standard.

There are two sites that are absolutely essential in helping you develop applications in HTML5 that are both free and open source:

  •     Modernizr: Modernizr is a JavaScript library that implements detection features for different areas of the HTML5 specification. Rather than asking a browser whether or not it supports HTML5, you use Modernizr to find out if the particular feature you are expecting in the browser is supported. <a href="http://www.modernizr.com/";>http://www.modernizr.com/<;/a>
    
  •     CanIUse.com: The website http://caniuse.com/ attempts to match different capabilities with different web browsers. If you need to know if an area of HTML5 will work for your target users, this website will help you make that decision.
    

HTML5 in Action

Assuming you’ve already had a chance to familiarize yourself with the overall background of HTML5 and a review of the fundamental building elements, the remainder of this article will be devoted to examples demonstrating how you may make advantage of the new capabilities.

Convert an XHTML page to an HTML5 page

Showing a page that has been built before and after utilizing new markup is a good approach to demonstrate some of the fundamental changes between the markup you may be used to writing today and HTML5.

Coding for a short document that includes a number of aspects that are common to many web pages may be found in Listing 1. First, take note of the DOCTYPE, which is located at the top of the document. Following the standard requirements for an XHTML page, this element lists a namespace that will be used to specify the level of validation enforcement that will be utilized across the document.

Other well-known practices are as follows:

  1. Making use of the necessary MIME types when constructing STYLE and SCRIPT tags
  2. Using DIV elements to structure the page and descriptive class names to apply to the elements
  3. Making use of the SMALL element for purposes of display

Table 1: Listing of new HTML elements found in HTML5.

Element Description
article The article wraps the primary content of a web page. Often there is only one article per page, but there is no formal restriction to the number of occurrences on a page.
aside As the article content represents the primary content on the page, an aside is meant to contain information peripherally related to the main content of the page.
audio The audio element renders a media player specifically tailored for presenting audio files to the user.
canvas The canvas element is a pixel-based drawing surface manipulated through a JavaScript API.
command Used to add responsiveness to the user interface, the command element acts as a container for common functionality on the page and returns state information indicating whether or not the command is enabled or disabled.
datalist The datalist element enumerates a set of predefined options available in input fields.
details Used in conjunction with the summary element, the details element contains information that is alternatively displayed and hidden from the user when the summary element is clicked.
embed The embed element is a new tag that defines a plugin or other external content to the page.
figcaption Used along with the figure element, the figcaption serves as a container for a short description for the related figure.
figure The figure element contains content like screenshots or code listings within a page.
footer The footer element is a logical container for content that concludes a logical section. Common content found at the bottom of a page, like navigation and copyright information, are often associated with the footer element at the page root.
header The header element is a logical group that introduces another logical section. The header at the root of the document wraps common navigation, logo and other elements often found at the top of a web page.
hgroup The hgroup element acts as a container for H1 – H6 HTML heading elements creating a semantic link between the headings.
keygen Used for cryptography, the keygen element generates a private key stored on the user’s machine and a public key which is sent to the server.
mark The mark element is intended to facilitate highlighting text from a search.
meter The meter element is created to represent values in between a known minimum and maximum range.
nav Providing semantic meaning to a site’s navigation, the nav element wraps navigation elements in context of the site.
output The output element is used to represent the output of script calculation on the page.
progress The purpose of the progress element is to display the ongoing advancement of a task as the result of a script on the page.
rp The rp element is used to display parenthesis around ruby text that is not supported by a browser. (If ruby and rt elements are supported then rp should be hidden via the style sheet.)
rt The rt element identifies the actual ruby text section of a ruby annotation.
ruby The ruby element contains text with ruby annotations to support character-based languages like Chinese or Japanese.
section The section element is used to delineate logical segments in a page.
source The source element is used in conjunction with the audio and video elements to define the source media for the players.
summary Used in combination with the details element, the summary element wraps content that is alternately displayed and hidden to the viewer based on whether or not content in the details element is clicked.
time The time element is used to mark up a single point in date and time.
video The video element renders a media player specifically tailored for presenting audio files to the user.
wbr Used to provide hyphenation guides for long words, the wbr element (or “word break”) helps the page decide where to break long words if necessary.

Table 2: New JavaScript APIs found in HTML5.

Element Description
Canvas 2D Context Providing a 2D drawing context native to the browser, the Canvas API is the interface to the new Canvas element.
Contacts The Contacts API is an interface to a unified address book on the client.
File APIs The collection of new File APIs grants read/write access to sandboxed files and folders on the client’s machine.
Forms The Forms API extends the input type to recognize custom data types, enforces validation and adds new additional features to improve the user experience of web forms.
Geolocation Geolocation is an API that manages scripted and verified access to the user’s physical location.
~Indexed Database Providing the interface for a client-side database, the Index Database API exposes both index and key-based access to data in the database.
Media Capture The Media Capture API creates a channel to the device’s audio, image and media capabilities.
Messaging The Messaging API exposes an interface to the devices messaging capabilities including SMS, MMS and email.
Microdata The Microdata API enables web pages to easily be both human and machine-readable.
Offline Web Applications Taking browser cache to the next level, Offline Web Applications create useable pages when the client is disconnected from the web.
Selectors Level 1 & 2 Updates to the Selectors engine bring CSS3 selectors to first-class DOM selection in JavaScript.
Server-Sent Events The Server-Sent Events API allows push notifications from the server to be consumed on the client in the form of DOM elements.
Web Notifications Web Notifications define a structured way to display messages to the user and provide the appropriate events for the page to respond.
Web Sockets The Web Sockets API allows for two-way communication between the client and server.
Web Storage Implemented as local or session storage, Web Storage provides a key/pair persistence location for a web page.
Web Workers Web Workers brings threading capabilities to the UI layer.
XMLHttpRequest Level 2 The HTMLHttpRequest Level 2 API enhances ‘Ajax’ to support cross-origin requests, progress events, and handling byte streams for sending and receiving data to and from the server.

Table 3: New optional input attributes.

Attribute Description
autofocus Enabling autofocus will bring focus to an input element on the page when the page loads. Each page may have one and only one element using the autofocus attribute.
placeholder Adding a placeholder to an element will create a “watermark” or text that will appear in the element only when there is no value entered. Once the user brings focus to the element, the placeholder value disappears.
pattern The pattern attribute enforces a regular expression validation rule against the input element.
required The required attribute enforces a required field validation rule against the input element.