HTML5 is a new and exciting web development markup language that will be an update to the current HTML4. This isn’t a complete over hall of the old technology, but upgrades to make production easier.

For a full detailed chart of supported tags view our HTML5 cheatsheet.

New Rules and Features According to W3C

There have been some new rules that the World Wide Web Consortium (W3C) have put together for HTML5. Its features are based on HTML, CSS, and JavaScript.

This will start replacing the third party plug-in better know as Flash. HTML5 will be device independent which gives more support to mobile devices. This will give us a more stable and secure way to produce multimedia.

Now the best part of this markup language, the features. Most of the new features can be done in HTML4 with the help of other technologies. But HTML5 has made it easier, with the use of less code.

Some HTML5 examples are video and audio elements will require one line of code. Having specific elements for layouts. Such as article, footer, header, nav, and section, will give us the ability to replace div ids.

Form inputs can be specified to the type like calendar, date, time, email, URL, and search. Last but not least, the ability to draw 2 dimensional graphics.

New HTML5 Tags Released

Here is a quick list of some of the HTML5 Tag Elements that have been released as of now and what you can expect from them.

article
Use for content, but as a reference from an external source.

aside
Use for content to indicate how its related to the surrounding content.

audio
Include a sound, music or audio file.

canvas
A graphically interface to draw with the help of JavaScript.

command
A button, radio button, or checkbox.

datalist
Data options for input values.

details
To give more details about the current document.

embed
Embed an application or plug-in.

figure
Used for grouping a section of content.

figcaption
Use with the <figure> tag, but as a caption of the section.

footer
To indicate the footer section on the page.

header
To indicate the header section on the page.

hgroup
An element to group your headings, such as <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

keygen
Generates key values.

mark
Highlight your content.

meter
Measure the minimum and maximum values specified in the document.

nav
To indicate the navigation section on the page.

output
To specify a different type of output.

progress
Indicated the progress of the page.

ruby
Ruby Annotations (Chinese Characters).

rt
Comment on Ruby Annotations.

rp
Indicates if internet browser does not support the <ruby> tag.

section
Indicated a section on the page.

source
Indicate the media resource.

summary
A quick summary inside the current element.

time
Give a time stamp on the page.

video
Include a video, movies, or stream file.

wbr
Word Break

Input Type Attributes

These are the new HTML5 input types and attributes you can use to specifiy what type of information you are collecting.

color
Input value for hexadecimal color.

date
Input value for date.

datetime
Input value for data / time.

datetime-local
Input value for local data / time.

email
Input value for email.

month
Input value for month.

number
Input value for number.

range
Input value for range.

search
Input value for search.

tel
Input value for telephone number.

time
Input value for time.

url
Input value for URL.

week
Input value for week.

HTML5 Examples and Demos

Here are a few quick examples of the tags that have been released. If you are viewing this page on an HTML5 compliant browser you will see the examples. If not, you are using an incompatible HTML5 internet browser.

HTML5 DOCTYPE
No need to worry about Strict, Transitional, Frameset 1.0 or 4.0, just HTML5 DOCTYPE.

HTML5 Video Example
Including a video file on your webpage.

HTML5 Audio Example
Including an audio file on your webpage.

Progress Tag
Dynamic values will be required to make it move.

72%

HTML5 Canvas Tutorial
The canvas tag allow drawing with the help of JavaScript. Define the canvas tag with:

Then Use JavaScript to Draw inside of your canvas tag.

Your Browser does not support HTML5

HTML5 Is On The Move

There are the tags, attributes, and examples that are included in the new HTML5. One note when trying to implement some of these features is that it is not officially released. Some of your visitors may have problems rendering them correct.

If you want to get started with HTML5 I recommended using the latest versions of these internet browsers: Google Chrome, Internet Explorer, Mozilla Firefox, or Opera. All the major internet browsers have released updates that support most new HTML5 features.

For more information about HTML5, check out the W3C HTML5 Overview.