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
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.
Use for content, but as a reference from an external source.
Use for content to indicate how its related to the surrounding content.
Include a sound, music or audio file.
A button, radio button, or checkbox.
Data options for input values.
To give more details about the current document.
Embed an application or plug-in.
Used for grouping a section of content.
Use with the <figure> tag, but as a caption of the section.
To indicate the footer section on the page.
To indicate the header section on the page.
An element to group your headings, such as <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Generates key values.
Highlight your content.
Measure the minimum and maximum values specified in the document.
To indicate the navigation section on the page.
To specify a different type of output.
Indicated the progress of the page.
Ruby Annotations (Chinese Characters).
Comment on Ruby Annotations.
Indicates if internet browser does not support the <ruby> tag.
Indicated a section on the page.
Indicate the media resource.
A quick summary inside the current element.
Give a time stamp on the page.
Include a video, movies, or stream file.
Input Type Attributes
These are the new HTML5 input types and attributes you can use to specifiy what type of information you are collecting.
Input value for hexadecimal color.
Input value for date.
Input value for data / time.
Input value for local data / time.
Input value for email.
Input value for month.
Input value for number.
Input value for range.
Input value for search.
Input value for telephone number.
Input value for time.
Input value for URL.
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.
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.
Dynamic values will be required to make it move.
HTML5 Canvas Tutorial
var CanvasBox = document.getElementById("canvas");
var myBox= CanvasBox.getContext('2d');
myBox.fillStyle = 'blue';
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.
What Do You Think?