What’s New In HTML5

There’s a lot of hype about HTML5, but what is it? Is it time to switch?

First and foremost, HTML5 is the newest specification for HTML. Although it’s not a complete specification yet, it’s widely supported. My advice is, if you’re starting a new project, you should take advantage of the features available in HTML5. I’m going to try to cover some of the new elements you’re most likely to use.

The DocType

The good news with HTML5 starts right at the top of the document. Remember the long DocType strings no one could remember? No more. Your new DocType is <!DOCTYPE html>.

Next there are new, semantic tags available in HTML5.

The article element

An article is a chunk of content. Examples include a blog post, a news article or a user comment.

The aside element

An aside is a section of a page that is somehow tangentially related to the content around it. Examples include sidebar navigation or pull quotes.

The audio element

The audio element is just what you would think it is. Modern browsers support audio streaming natively. That means you can stream audio without using Flash. The bad news is that browser vendors have not decided on an audio codec. That means Chrome, Firefox & Opera support .wav and .ogg files. Safari supports .wav and .mp3 files and Internet Explorer (9+) supports .mp3 and AAC in an mp4 container.

HTML5 audio and video are topics sufficient for future blog posts.

The b element

That’s right, the b is back but it doesn’t mean bold anymore. It’s meant as a generic, inline container to stylistically offset content without conveying extra importance. If you want to hang bold styles on a b tag, you can, but for conveying semantic importance, you should still use strong or em.

The canvas element

The canvas is just what it sound like. It’s a container for bitmap graphics that are generated on the fly using JavaScript.

The canvas element is also deserving of its own blog post.

The footer element

You don’t need to create footer div‘s anymore. Footers are their own element. Which leads us to…

The header element

Same as the footer.

The hgroup element

Use the hgroup element to group headings when there is no content in between. For example:

<hgroup>
    <h1>Section Title</h1>
    <h2>This is the tag line</h2>
</hgroup>

The i element

That’s right i is back too! Guess what? Like b, it no longer means italic. It’s meant to denote an alternate voice or mood.

The nav element

Use nav as a wrapper for site navigation. Like header and footer, nav is a more semantic container for elements that are commonly enclosed in div‘s.

The video element

Like audio, video supports native video streaming in the browser. Again, no need for Flash to play your video file. Also like audio, there is some disagreement about which video codec to support. My sources say h.264 has mostly won that battle. That means .mp4 video files will generally work.

Still, video deserves greater attention in a future blog post.

Internet Explorer

HTML5 is supported by Internet Explorer 9 and up, but if you have users who still use older versions, you’ll need a JavaScript polyfill. The most popular polyfill to make IE 6-9 support HTML5 is the html5shiv library. Use it and you’ll be able to take advantage of these new elements in older browsers.

Support is now broad enough for HTML5 that you should begin using it in your projects. There are other new tags in the specification that are not covered here, but these are the most common ones. I’ve found that HTML5′s semantic tags make writing styles easier and my document structure is less convoluted. Go on. Give it a try.

Other Resources

Tags: ,

Comments are closed.


Web People is proudly powered by WordPress
Entries (RSS) and Comments (RSS).