A Beginners Look Into HTML5

by on January 11th, 2011 3 comments
HTML5, which has been in development for more than six years, comes with a great number of new elements. These new elements are supported by almost all of the popular browsers. The latest versions of Safari and Chrome are the two browsers that support most of the HTML5 and CSS3 features, followed by Firefox, and even Internet Explorer 9, which was released in beta in September 2010, is also almost fully HTML5-compliant. But what is new in HTML5?

New Multimedia Elements

The <audio> and <video> tags allow webmasters to add sound and videos to a webpage, without having to use lengthy embed codes. The <video> tag comes with ‘control,’ ‘autoplay,’ ‘src,’ ‘height,’ ‘width,’ ‘loop,’ ‘preload,’ and ‘audio’ attributes, and allows adding text between the opening and closing tag as well. The <audio> tag works in a similar fashion for sound content and has five attributes on its own.

New Site Structure Elements

<section>, <footer>, <header>, <nav>, <article>, <aside>, and <figure> are the new structure tags, which define the different sections of a webpage, and come with their own and support standard and event HTML5 attributes.

New Form Elements

While the <input> tag remains valid, it comes with five new type elements, which make the web forms even more flexible: ‘date,’ ‘datetime,’ ‘datetimelocal,’ ‘time,’ ‘month,’ ‘week,’ ‘url,’ ‘range,’ ‘number,’ and ‘email’ are the new input types and together with the already existing ones, make the total of supported types twenty three.

New Inline Elements

‘meter,’ ‘time,’ ‘mark,’ and ‘progress’ could be used to represent figures, date, time, lists, or progress bars, and wrap semantic content.

New Graphic Element

<canvas> is used to display graphics, has its own height and width attributes, and supports the HTML5 events and standard attributes. It is accessed by Javascript via its drawing functions and could serve as a 2D drawing surface for presenting graphics, games, animations, and image compositions.

New Interactive Elements

<datagrid> could be used to provide interactive set of data, while <details> could be used to provide tips and other useful information. The previously deprecated <menu> is back with new functionality, has ‘label’ and ‘type’ attributes, and is used to define menu lists with command elements.

New Charset and Doctype

The charset is defined with the easy to remember <meta charset=”UTF-8″> tag, while the new DTD is <!doctype html>, which is also much shorter.

New attributes for already existing elements

HTML5 adds a few new attributes to elements that are supported by HTML4. The <a> and <area> elements have now ‘media’ attribute, the <base> element has a ‘target’ attribute, and the <meta> element has a ‘charset’ attribute. Certain attributes such as the ‘start’ attribute of the <ol> element, the ‘target’ attribute of the <a> and <area> elements, and the ‘value’ attribute of the <li> element are no longer deprecated.

Dropped elements

The following elements are no longer supported in HTML5:  ‘acronym,’ ‘applet,’ ‘basefont,’ ‘big,’ ‘center,’ ‘dir,’ ‘font,’ ‘frame,’ ‘frameset,’ ‘isindex,’ ‘noframes,’ ‘noscript,’ ‘s,’ ‘strike,’ ‘tt,’ and ‘u.’

Changed elements and attributes

The <a>, <address>, <cite>, <b>, <hr>, and other elements have been slightly modified, and certain attributes such as the ‘language’ attribute of <script>, ‘border’ attribute of <inc>, ‘name’ attribute of <a>, and the ‘type’ attribute of <style> and <script>.

For detailed listing of all the differences between HTML5 and HTML4, please visit: http://dev.w3.org/html5/html4-differences
For quick overview of HTML5, please visit: http://en.wikipedia.org/wiki/HTML_5
Learn how to use some of the most exciting HTML5 features: http://diveintohtml5.org
For the latest on HTML5, articles, tips, news, and more, please head over to http://html5doctor.com
Find out if your browser supports most of the HTML5 elements: http://html5test.com

This was just a high level look into what is new in HTML5. In future posts we will dive deeper into each of the elements and explore them a bit more.

Do you use HTML5 to design websites? What is your favorite HTML5 resource? Please share with us in the comments.