Introduction to HTML5

Tuesday, October 2, 2012


HTML5 is the newest version of the HTML standard. Up to the time of this writing, HTML5 is still currently under development. HTML5 offers new features to provide rich media support as well as enhanced support for creating web applications that can interact with the user more effectively. Because HTML5 is still in the design stage, further changes to the specification are expected. Because of this, not all of its features are yet supported by any modern browser. However, this doesn't mean that there is no support for HTML5. Many of the modern browsers have some support for HTML5. As you develop your HTML5 skillset, you will learn about which HTML5 elements are supported across the major browsers so that you can begin to integrate new HTML5 elements into your projects.


The Web Hypertext Application Technology Working Group (WHATWG) began work on the new HTML standard in 2004. The current HTML 4.01 standard has not been updated since before the year 2000. However, during the time when HTML5 came about, the W3C was focusing on XHTML 2.0. In 2009, the XHTML 2.0 Working Group was discontinued and the W3C and WHATWG began working together on the development of HTML5. HTML5 is not expected to become a standard until sometime in 2014. Some of the key objectives that the working group is focusing on are:

  • Features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the requirement for external plugins such as Flash
  • Provide better error handling
  • More elements to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

New Features

As you go through the various tutorials in this series, you will learn about the new elements and other features that are being introduced with HTML5. Some of the new exciting elemtns include the <canvas> element for two dimensional (2D) drawing as well as the <video> and <audio> elements for media playback. In addition, HTML5 is introducing some new semantic elements which will help web developers add meaning to the content these new elements will contain. Some of the elements are <article>, <footer>, <header>, <nav>, and <section>.

Basic HTML5 Syntax

The HTML document is very similar to any other HTML document. You may notice some slight changes in the DOCYTPE and <head> section.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>Example document</title>
    <p>Example paragraph</p>

I always use XHTML 1.0 syntax on my HTML5 documents. If you are not familiar with XHTML, the two main rules are to not leave any tags open and use lowercase syntax for your elements. Although you can use HTML syntax; that is, uppercase attribute and tag names, unclosed tags and no quotes for wrapping the values of the specified attributes’ values. In the syntax example I provided, you can easily have written DOCTYPE as doctype, or left the <meta> tag unclosed. You may also want to note that the DOCTYPE is not required for HTML5. We include it in our documents to ensure that the browser switches to "standards" mode.


The first line of your HTML5 document should be the Document Type Declaration, or doctype. This declaration tells browser what type of document it is looking at. The doctype should always be the first item at the top of all your HTML files. Previous to HTML5, the doctype declaration was a long and hard-to-remember string of characters. This is no longer the case for HTML5

The html Element

The first element defined in any HTML document is the <html> element. In the example above, the lang attribute with a value of en (lang="en") specifies that the document is in English. With or without this attribute, the document will be loaded correctly.

The head Element

After the opening <html> tag, comes the <head> section. The first line inside the head is the one that defines the character encoding for the document. This is another element that has been simplified. HTML5 improves over the HTML 4.01 standard by reducing the character encoding <meta> tag to the bare minimum as shown in the example. In nearly all cases, utf-8 is the value you will be using in your documents.

The body Element

The <body> element has not really changed other than its contents. In the upcoming articles in this series, we will be covering specific topics related to HTML5. If you are not yet familiar with HTML, you may want to consider learning some HTML basics before continuing in this series.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Head First HTML5 Programming: Building Web Apps with JavaScript HTML5: The Missing Manual