1: video and audio
2: input type attributes
The canvas tag gives HTML a bitmapped surface to work with, much like what you would use with GDI+ or the .NET Image object. While canvas isn’t perfect (layers need to be replicated by using multiple canvas objects stacked on top of each other, for example), it is a great way to build charts and graphs, which have been a traditional weak spot in HTML, as well as custom graphics. And that is just a start!
4: header and footer
The header and footer tags are two of the new semantic tags available. These two tags do not get you anything above and beyond div for the actual display. But they will reap long-term rewards for your search engine efforts, since the search engines will be able to tell the difference between “content” and things that are important to the user but that aren’t the actual content.
5: article and section
The article and section tags are two more semantic tags that will boost your search engine visibility. Articles can be composed of multiple sections, and a section can have multiple articles. Confusing? Not really. An article represents a full block of content, and a section is a piece of a bigger whole. For example, if you are looking at a blog, the front page might have a section for the listing of all the posts, and each post would be an article with a section for the actual post and another for comments.
8: figure and figcaption
Figure is a container for content (typically images, but it can be anything), and figcaption (which gets put inside the figure tag) provides a caption or subtitle for the contents of the figure tag. For example, you could have four images representing charts of sales growth within a figure tag, and a figcaption with text like “Year-to-year sales growth, 1989 – 1993.” The images would be shown next to each other with the text running below all four.
9: progress and meter
Progress and meter are similar. You use progress for a task or a “measure how complete something is” scenario. It also has an indeterminate mode for something that has an unknown duration (like searching a database). The meter tag is for gauges and measurements of value (thermometers, quantity used, etc.). While they may look alike on the screen in many cases, they do have different semantic meanings.
What other new tags have you found especially useful? Share your HTML5 experiences in comments.