Web Development

10 new HTML5 tags you need to know about

HTML5 offers new tags and attributes that provide more power, efficiency, and flexibility for your Web development. Here are 10 tags you'll want to check out.

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 JavaScript or browser plug-ins like Flash and Silverlight to handle. 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 the controls, and the content can be manipulated through JavaScript. 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 used to require JavaScript. There is a wide variety of type attributes, and learning them (and the additional attributes that go with some of them) will eliminate the need for a lot of JavaScript work.

3: <canvas>

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.

6: <output>

The new <output> tag is unique, in that it expects its content to be generated dynamically with JavaScript. It has a value attribute, which can be manipulated through the DOM with JavaScript to change what is displayed on the screen. This is much more convenient than the current ways of doing things.

7: <details>

It seems like every Web site needs to have an expanding/collapsing block of text. While this is easy enough to do with JavaScript or 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 soon.

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.

10: <datalist>

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 JavaScript (or JavaScript libraries) to handle but that can be done natively with HTML5.

Other tags?

What other new tags have you found especially useful? Share your HTML5 experiences with fellow TechRepublic members.

About

Justin James is the Lead Architect for Conigent.

12 comments
Htalk
Htalk

In light of browser stagnation (especially IE), the big question is WHEN can we use any of these tags? Otherwise we're still building two (or more) sites every time: one for old browsers and one for new browsers???whether the code is commingled or separated.

ramjet
ramjet

Why do we have to cater to 4 or more formats for each file???? I run a personal website, Thus the cash for that "Cheap" storage space you tout comes out of my personal hobby budget, not some company expense account. I put up Jpg, gif, gifanim, AVI and Mpg files, Whatever I have the source data in. Can't view them? Sorry, Get a real computer. And I still use a 27 year old Amiga 4000 with a video toaster too. It can view them all so I have no mercy. End of Line.

designova
designova

Thanks a lot for such a nice article, very useful.

JoeyD714
JoeyD714

Currently if I have 25 Meg video and I want EVERYONE to be able to see it, I have to have at lesat 4 different versions, and FLV, an MPG, an OGG and a WEBM a different version for each type of device, Desktop, iPad,iPhone, Clonefone, whatever. so a 25 Meg video takes 100Meg or more on the server. This wastes Space, costs more hosting space money and is a lot of work for me to do to create all these different versions and test them on each type of device. Why should the world bend over for apple? Force them to make their products comply with existing web standards. Can you imagine a new car company comes out with a new car, but it requires the roads be made out of a new special material just for it, and existing cars can't drive on it?? How far would that go? OK now that the world has decided to bend over for apple, can they at least make a newer version of HTML5.5 and a new spec for servers so that when a device requests a video the SERVER checks what kind of device it is and automatically converts the video for that device on the fly so I can just produce 1 video and the server worries about making it work on the requesting device so everyone's happy?

amxtaylor
amxtaylor

I love all the new features of HTML5, but it certainly be useful to understand where browsers do and do not support the functionality. This type of conditional programming has long been a ugly reality.

SanjaiKV
SanjaiKV

Hi Team - Today i happened to vist the TechRepublic Website and looks like the page has been revamped giving a elegant classy stylish look with links to vidoes , articles, journal etc. Well done .

Lamine Kacimi
Lamine Kacimi

The aside tag is also worth looking at. It would be very nice to write about other nice features of HTML5 . workers .web sockets. . SVG

eddyminet
eddyminet

You surely wanted to say "The venerable element now has new possible values for its (already existing) type attribute" ....... ?

Justin James
Justin James

... but most of these can be used *now* with varying degrees of support... and the nice thing is, older browsers won't break on them. J.Ja

Justin James
Justin James

... from the current situation? Unless you ponied up the cash for Flash, or are using Silverlight or something similar, you are already needing to cater to different browsers/OS's/etc. regarding not only format, but also the HTML needed to show them on the screen because of the different plugins out there. Show me a universal way to display movie content... there is none. The HTML5 spec gives you something you didn't have before, a way of showing multimedia content without needing to rely on a local plug in. If you want to be freed of the issues around storage and codecs, upload it to YouTube, Vimeo, etc. and wash your hands of it. Or keep doing it the way you are already doing it, which will continue to work. J.Ja

Justin James
Justin James

"OK now that the world has decided to bend over for apple, can they at least make a newer version of HTML5.5 and a new spec for servers so that when a device requests a video the SERVER checks what kind of device it is and automatically converts the video for that device on the fly so I can just produce 1 video and the server worries about making it work on the requesting device so everyone's happy?" That's not going to work out so well: * Format conversion can take a lot longer than the download can take. * Unless you cache it (using up that drive space you are concerned about), you need to convert it on EVERY download, instead of doing it once and storing it. * Drive space is cheap. * If you are so concerned about saving the 100 MB or even 500 MB or 1 GB on the file, it means that you are either hosting a TON of files, or on a very low resource server... probably a shared server... which is a guarantee that you won't have the CPU to do this, let alone on multiple files at once. Also, the format issue is much, MUCH deeper than "the world bending over for Apple". Microsoft wasn't running to Ogg either, and there are a lot of patent and royalty issues around ALL formats. J.Ja

Justin James
Justin James

Yes, that's a better wording, and reflects what I *meant* to say, thanks! J.Ja