Understanding the Importance of HTML5 and Making It Work for You

HTML4 has already been around for almost a decade and has started to constrain publishers and designers from creating new ways to increase functionality. HTML5 is finally starting to get more interest from a majority of designers. HTML5 has primarily come from the WHATWG or Web Hypertext Application Technology Working Group. HTML5 started to come to form in 2004 because some people were worried about the emphasis on XHTML and lack of focus of HTML and the needs of web developers.

The big push for HTM5 started once again in July, 2009 because W3C decided that XHTML2 was being canceled in favor of a renewed focus on HTML. This means that for better or for worse, HTML5 is the future of web design. It's most basic focus in on extending HTML/XHTML by adding more elements that are considered to be more semantically rich as well as deprecating attributes, while adding new attributes. HTML5 also has altered how some elements and attributes are to be used.

One the reasons that HTML5 has had growing support is because it was designed to be backwards compatible and work effectively with web browser that are already on the market. It does this by using new elements that do not have any inherent look or behavior attached to them. Instead they offer more semantic richness and then allow you to use CSS to style them the way you want to.

The transition from XHTML to HTML5 is relatively simple. As long as your XHTML is well organized and is valid, all you need to do is remove a majority of the doctype declaration as well as rearranging some of the meta elements. If you are only using traditional meta elements, you should not have any significant problems.

The larger concern is the transition from HTML4 to HTML5.

Currently there are 26 new elements that have been introduced by HTML5.

1. Article – This tag defines an article or other article-like external content. It could be from any external source such as a news feed, blog, or even a forum.
2. Aside – This tag defines content aside from the content that it is placed in. This content should be related to the content surrounding it. This type of content is often placed as a sidebar in an article.
3. Audio – This tag defines any sound that is added to a web page such as music, sound effects, live audio steams, and much more. You can also write text inside an audio tag so that older browsers know that they do not support this tag.
4. Canvas - This tag is utilized to display graphics. It is only a container for graphics so you must use a script to actually create or paint the graphic.
5. Command – This tag is used to define any command button such as a check box or radio buttons. This element must be placed inside a menu element otherwise it will not be displayed.
6. Datalist – This tag is used to define a set of options. It should be used in conjunction with the input element in order to define what values the input element will have. The datalist itself will not be displayed rather it is a list of legal input values.
7. Details – This tag should be used when describing details about a full document or parts of a document. This tag should be used with the legend tag in order to make a header for the details. Then the header will be shown and the details will only be seen when a user clicks on the header.
8. Dialog – This tag help defines any dialog, such as a conversation.
9. Embed – This tag is used to define any embed content, most commonly a plug-in. You cannot write any text between the start and end tags in order to show browsers that they do not support this tag, unlike what is commonly done with the audio and video tags.
10. Figure – This tag allows you to group elements. The content within the figure element is independent content that is used to explain a section of the document. It can also move from the document and be placed elsewhere.
11. Footer – This tag defines the footer of any sections or documents. It normally contains reference information such as the name of the author, date it was written, and contact information. The address element is often inserted into the footer.
12. Header – This tag is used for the introduction of a document or the header section of a page.
13. Hgroup – This tag allows you to define the heading of a section or document. It is used to group headers, h1-h6, the largest is the main heading of the section and then progresses into sub-headings.
14. Keygen – This tag defines any generated key, normally within a form.
15. Mark – This tag defines marked text. It is normally used to highlight portions of the text.
16. Meter - This tag is used to define measurements. It is only useful if both the minimum and maximums are known. This means that both the minimum and maximum must be defined either within the text of the element or with min/max attributes.
17. Nav – This tag is used to define navigation sections. If you are using “previous” and “next” buttons for your documents, they should be located within the nav element.
18. Output – This tag is used to define different types of output. It is commonly used to define out written by a script.
19. Progress – This tag is used to define “work-in-progress”. This element displays the progress of any time consuming function in JavaScript. It is commonly used to display the progress of a download.
20. RP – This tag is used for ruby annotations. It will define what to show the browsers that do not support a ruby element. A browser that does support the ruby element will not show any of the content within the RP element.
21. RT – This tag defines a pronunciation or explanation of characters, specifically Chinese notes and characters.
22. Ruby – This tag defines a ruby annotation.
23. Section – This tag defines sections within a document. It is often used to define chapters, headers, footers, and other sections that a document may be broken into.
24. Source – This tag defines any media resources for media elements that are used such as audio and video.
25. Time – This tag will define the time, date, or both.
26. Video – This tag defines any type of video, such as movie clips and video streams. It is recommended to insert text within this element to show older browsers that they do not support this tag.

There are also a number slightly modified elements and attributes when making the transition from HTML4 to HTML5. There are approximately 10 elements that have modified meanings to better reflect how they are used. There are also a number of attributes and elements that have been eliminated in HTML5 because:

• The overall functionality can be increased when they are handled by CSS.
• Their usage was negatively affecting the end user
• They simply were not used often or consistently created confusion.

HTML5 is here to stay. It is ready to be used today and is compatible with a majority of web browsers.

• BrowserShots: Free Browser Compatibility Testing
• Fixed and Fluid Website Design: Benefits and Drawbacks
• Is Your Website Viewable with Any Browser?
• jQuery: The JavaScript Developer’s Best Friend
• Useful CSS3 Generators: Follow the Easy Path to Web Design
• Write HTML Quickly With Zen-Coding
• 11 Innovative HTML5 Websites
• 5 Top Web Design Trends for 2012