A Beginners Look Into 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.
