HTML5 New tags

Table of Contents

  1. Introduction
  2. New Tags for better structure
  3. New Tags for media content
  4. New Tags to make drawings on a web application
  5. New Form Tags
  6. New Input attribute types
  7. Additional Resources


Introduction

The new HTML5 standard defines a number of new tags to enable web applications to enrich and simplify their content. These tags create many possibilities, as well as creating better outlines for your application. Here is a list and a small description of those new tags brought by HTML5. Unless stated otherwise, most tags are supported by all major browsers.

New elements for better structure:

<article> - creates a meaningful section for stories, also useful for syndication.
For more information and examples on <article> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<aside> - a section considered related but not part of the main content, like side notes or archives.
For more information and examples on <aside> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<bdi> - stands for Bi-directional Isolation. The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it. It is currently not supported by any major browser.

<command>  - defines a command (a radiobutton, a checkbox, or a command button) that the user can invoke. Currently only supported by Internet Explorer.

<details> - specifies additional details that the user can view or hide. Currently only supported by Chrome.

<summary> - defines a visible heading for the <details> element. The heading can be clicked to view/hide the details. Currently only supported by Chrome.

<figure> - defines graphic elements contained in the document.
For more information and examples on <figure> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<figcaption> - defines caption text for figure elements.
For more information and examples on <figcaption> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<footer> - represents an ending message, usually copyright or contact information.
For more information and examples on <footer> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<header> - helps to create the outline of the document flow within the page.
For more information and examples on <footer> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<hgroup> - the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

<mark> - highlights parts of the text.

<meter> - defines a scalar measurement within a known range, or a fractional value.

<nav> - defines the area where links for the page are. For more information and examples on <nav> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<progress> - represents the progress of a task. Currently supported in Firefox, Opera, and Chrome.

<ruby> -  indicates ruby annotations, used for East Asian typography, to show the pronunciation of East Asian characters. For more information and examples on <ruby>, see http://software.intel.com/en-us/articles/html5-ruby-tag

<rt> - defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

<rp> - defines what to show if a browser does not support ruby annotations.

<section> - a generic section inside of the document, with its own structure.
For more information and examples on <section> tag, see http://software.intel.com/en-us/articles/html5-section-tags

<time> - defines either a time (24 hour clock), or a date, optionally with a time and a time-zone offset. Currently not supported in any of the major browsers.

<wbr> - specifies where in a text it would be ok to add a line-break. If a word is too long, this indicates where a word break would be possible to the browser.

New Tags for media content:

<audio> - defines a sound, music or audio stream.

<video> - defines a video resource

<source> - used to specify multiple media resources for media elements, such as <video> and <audio>.  Also allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.

<embed> - defines an area where to include external applications or interactive content

<track> - specifies text tracks for media elements. Currently not supported in any of the major browsers.

New Tags to make drawings on a web application

<canvas> - defines an area where it’s possible to draw things on the fly via scripting. For more information on <canvas>, see http://software.intel.com/en-us/articles/my-first-steps-towards-html5-trying-out-canvas

New Form Tags

<datalist> - specifies a list of pre-defined options for input controls. Used together with <input>. Currently only supported by Firefox and Opera.

<keygen> - specifies a key-pair generator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server.

<output> - represents the result of a calculation, like on performed by a function

New Input attribute types:

These values are added to the existing types for the <input> tag, used to allow user to enter data. For more information, see http://software.intel.com/en-us/articles/forms-encapsulator-support

tel – used for telephone numbers

search – includes a text field used for search

url – indicates a text field for urls

email – used for entering e-mail addresses

date – defines a date field with date picker

month – defines a date field with date picker for months

week – defines a date field with date picker for weeks

time – defines a date field with hour, minutes, seconds and fraction of seconds

datetime – defines a date field with date and time picker

datetime-local – defines a date field with date and time picker, in local timezone

number – defines a number field with a spinner control

range – a number range with a slider

color - a color picker. Currently only supported by Opera.

placeholder – to be used with the input and textarea elements. It represents a hint intended to aid the user with data entry.

 

More resources

  1. W3C HTML 5 Diff

  2. HTML5 New Elements

For more complete information about compiler optimizations, see our Optimization Notice.