offers new tags and attributes that provide more power, efficiency, and
flexibility for your Web development. Here are 10 tags you’ll want to
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!), display data
more uniquely, and take on some of the load that has required complex
Here are 10 new items in HTML5 that will make it easier for you to write
your Web sites.
1: <video> and <audio>
One of the biggest uses for Flash, Silverlight, and similar
technologies is to get a multimedia item to play. With HTML5 supporting
the new video and audio controls, those technologies are now relegated
to being used for fallback status. The browser can now natively display
Don’t let the codec confusion scare you away. You can specify multiple
sources for content, so you can make sure that your multimedia will play
regardless of what codecs the user’s browser supports.
2: <input> type attributes
The venerable <input> element now has a number of new values
for the type attribute, and browsers do some pretty slick things
depending on its value. For example, set type to "datetime” and browsers
can show calendar/clock controls to pick the right time, a trick that
and learning them (and the additional attributes that go with some of
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
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.
The new <output> tag is unique, in that it expects its content
is displayed on the screen. This is much more convenient than the
current ways of doing things.
It seems like every Web site needs to have an expanding/collapsing
server-side code, the <details> tag makes it even easier. It does
exactly what we’ve all been doing for years now: makes a simple block
that expands and collapses the content when the header is clicked. The
<details> tag does not have widespread support yet, but it will
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.
The <datalist> tag acts like a combo box, where the system
provides a pre-made list of suggestions, but users are free to type in
their own input as well. There are tons of possible uses for this, such
as a search box pre-populated with items based on the user’s history.
This is another one of those things that currently requires a bunch of
natively with HTML5.