HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 28, 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardized in 1997.

On 18 January 2011, the W3C introduced a logo to represent the use of or interest in HTML5. Unlike other badges previously issued by the W3C, it does not imply validity or conformance to a certain standard. As of 1 April 2011, this logo is official.

Note: "The term "HTML5" is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG, in some cases in conjunction with the W3C and IETF." (WHATWG Is this HTML5?)

Compared to its predecessors (HTML 4.1 and XHTML 1.0) HTML5 introduces new elements, and also some JavaScript features, including:

• <video> and <audio> elements for native media playback.
• <canvas> element for procedural drawing.
• New form elements.
• New input types and attributes.
• New semantic structural elements like <header>, <footer>, <nav>, <section>, and <article>
• Drag and Drop feature.
• Local storage API's.
• An offline web applications API.
• Device APIs such as Camera API, Location API, etc.
• 3D, Graphics, & Effects.

The HTML5 Definition, with Canvas 2D, has been declared complete in December 2012, and the next round of W3C HTML standardization is now available as the draft of HTML5.1.

HTML5 <video> Element

The <video> element specifies video, such as a movie clip or other video streams.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.

The <video> element is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

HTML5 <audio> Element

The <audio> element defines sound, such as music or other audio streams.

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg.

The <audio> element is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.

HTML5 <canvas> Element

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

HTML5 New Form Elements

HTML5 has the following new form elements:

• <datalist>
• <keygen>
• <output>

Note: Not all major browsers support all the new form elements. However, you can already start using them; If they are not supported, they will behave as regular text fields.

HTML5 <datalist> Element:

The <datalist> element specifies a list of predefined options for an <input> element.

The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of predefined options as they input data.

Use the <input> element's list attribute to bind it together with a <datalist> element.

HTML5 <keygen> Element:

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> element specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

HTML5 <output> Element:

The <output> element represents the result of a calculation (like one performed by a script).

HTML5 New Form Attributes

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

• autocomplete
• novalidate

New attributes for <input>:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

1. autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

Note: The autocomplete attribute works with and the following types: text, search, url, tel, email, password, datepickers, range, and color.

2. novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

3. autofocus Attribute

The autofocus attribute is a boolean attribute.

When present, it specifies that an <input> element should automatically get focus when the page loads.

4. form Attribute

The form attribute specifies one or more forms an <input> element belongs to.

Tip: To refer to more than one form, use a space-separated list of form ids.

5. formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

Note: The formaction attribute is used with type="submit" and type="image".

6. formenctype Attribute

The formenctype attribute specifies how the form-data should be encoded when submitting it to the server (only for forms with method="post")

The formenctype attribute overrides the enctype attribute of the <form> element.

Note: The formenctype attribute is used with type="submit" and type="image".

7. formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

Note: The formmethod attribute can be used with type="submit" and type="image".

8. formnovalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the <input> element should not be validated when submitted.

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

Note: The formnovalidate attribute can be used with type="submit".

9. formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

Note: The formtarget attribute can be used with type="submit" and type="image".

10. height and width Attributes

The height and width attributes specify the height and width of an <input> element.

Note: The height and width attributes are only used with <input type="image">.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

11. list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

12. min and max Attributes

The min and max attributes specify the minimum and maximum value for an <input> element.

Note: The min and max attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

13. multiple Attribute

The multiple attribute is a boolean attribute.

When present, it specifies that the user is allowed to enter more than one value in the <input> element.

Note: The multiple attribute works with the following input types: email, and file.

14. pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against.

Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

15. placeholder Attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The hint is displayed in the input field when it is empty, and disappears when the field gets focus.

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

16. required Attribute

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

17. step Attribute

The step attribute specifies the legal number intervals for an <input> element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

Note: The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

There are several HTML5 introduction sites like Dive into HTML5 or HTML5 Rocks.

Each feature has varying levels of support in different web browsers. CanIUse.com and HTML5Test has great cross-browser compatibility information.

HTML5 includes the previous standards; therefore, it is backwards compatible with existing content. However, deprecated elements are now classified as obsolete.

The W3C has released the specification for HTML5 here.

The WHATWG actively works on HTML5 in what it terms the HTML Living Standard and the two paths have diverged somewhat.

Resources

• Mozilla MDN
• html5rocks
• HTML5 Introduction
• HTML5 Wikipedia Article
• W3C HTML5 Documentation
• HTML5 Logo FAQ

Books

• Dive into HTML5