HTML 5 is the new major version of HTML. HTML5 brings a host of new elements and attributes to allow developers to make their documents more easily understood by other systems (especially search engines). In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Here are new HTML5 tags that will make it easier for you to write your Web sites.
In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!DOCTYPE HTML>. It simply tells the browser that it’s dealing with an HTML-document.
<video> and <audio>
<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!
<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.
The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
<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.
The aside tag is used to wrap around content related to the main content of the page that could still stand on it’s own and make sense.
<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.
<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 with us.