What is new in HTML5?

There are a number of new elements, element attributes, javascript API's and storage technologies available to HTML5. There are many helpful aspects of HTML5 but not everything has been implemented or accepted in every browser, making it critical to check for support before choosing an implementation. As a user interface developer, I generally prefer technologies that are considered wide spread and have been accepted by the mainstream community allowing for a high probability of success from any device or browser.

New Elements

  • Article: self contained set of information, logicle seperator
  • Aside: used when referencing related content
  • Audio, video: Now has the ability to play media native in the browsers
  • video>track: allows for tracks
  • bdi: bi-direction text, left to right or right to left text
  • canvas: integrated with javascript api, used with grid matrix, can paint on screen based on pixels.
  • datalist: new form element, allowing for lists
  • details: used with summary, and p, for the common drop down
  • embed: used to be in favor of the object element, like flash
  • figure, caption: can be used with images or other uses
  • header, footer: used to demonstrate the header and footer areas of a document
  • main: pages main content
  • math: allows us to use mathematical equations
  • mark: allows us to highlight or bold text, or style it differently
  • meter: usually displayed as a meter on the page
  • nav: represents the container for the main navigation links
  • output: used to output the calculation of an equation
  • progress: used to display a progress bar
  • section: used to create logical container around a set of elements, create groups around elements
  • time: marks a specific point in time
  • wbr: word break element, if wrapping is necessary, will break the text correctly.

New Javascript API's

  • contacts: local repository, not well supported by browsers.
  • file api: gives browser ability to sandbox files on users computer, need to check support on this, sounds unsafe.
  • forms api: built in validation
  • geolocation api: opportunity to get location information from user, lattitude and longitude.
  • indexedDB: local storage in the browser, store sizeable amounts of structured data. can store mb's of data. Kind of an object database. browser support is so/so
  • Media capture: access camera / webcam
  • Microdata api: meta information presented specifically for machines, machine readable
  • Messanging api: used in conjunction with other apis
  • Offline web applications: can help server up specific pieces of the website even when offline.
  • Selection: allows for selection similar to jquery but is native
  • Server-sent events: can send data from server to clients, via http.
  • Web Notifications: still experimental via WC3
  • Web sockets: can send information to and from the server, such as a chat application, socket connection
  • Web Storage: session storage, and local storage, as long as they have the same session the data persists. If they leave the browser is removed.
  • Web workers: allows for multiple threading of processes, can execute in its own context. can run resource intensive operations on the side.
  • XMLHttpRequest Level 2, or AJAX: can allow for cross domain posting, but has a security layer to allow this to happen.


Use Modernizer library, in order to detect whether a browser feature is available. You use the modernizer for boolean values in javascript, not as polyfills, in order to actually support the particular feature.

DOM Selection

Native dom selection right in the browser, but honestly I would still just use jquery.

Form Changes

There are some new input type="xxx", which will natively display something different. This can be a very useful feature especially for mobile phones. Some mobile devices will also alter the soft keyboard based on the type you choose, giving the user a better experience (making it more convenient for them).

  • color: native color picker
  • datalist: will display some suggestions, such as colors
  • date: choose a date
  • time: choose time
  • datetime-local
  • month: allows us to choose a specific month from years
  • week: choose a week within a year
  • email, url, telephone: native support to understand this type of input
  • range: creates a slider to choose a number from a range of numbers
  • number: can choose a number from a nice native ui
  • search: type in a search term, and put a small x in the top right, allowing us to clear the screen.

input attributes

  • autofocus: allows for a particular element to have the focus of the user upon initial load. only use this once
  • form "novalidate": tells browser not to use native validation on it
  • input "required": tells browser it must be filled out
  • min, max, step, value: step will move the increment when the user hits the up or down button.
  • input list="colors": used with a datalist id="color", will display the colors as the options to user
  • pattern: can put in a regex pattern directly on the input
  • range: will display the input as a range

Input Attribute Browser Testing

Note: each browser will treat the native html5 attributes differently, so it is important to check for browser support for all abilities.

HTML5 Media

Media elements and supported media types. Media formats are constantly changing due to society reasons.

Native video formats WebM, MP4, Ogg theora.

Native Audio formats WebM, AAC, WAV, MP3, Ogg Vorbis, Ogg Opus

Server content types must be correct.

It is possible to modify and add additional scripting to the video/audio controls.


Video courtesy of Big Buck Bunny


Canvas API

Drawing surface that an artist might have that paints pixel by pixel control of the drawing surface. Canvas element + javascript API working together.