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.
Modernizer
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.
