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.
<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.
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.
‘meter,’ ‘time,’ ‘mark,’ and ‘progress’ could be used to represent figures, date, time, lists, or progress bars, and wrap semantic content.
<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.
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.
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.
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.’
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.