HTML 5 Tutorials

Learn how to build an HTML5 document from scratch. The ending document doesn't look terribly enticing because there are no styles attached, but it is a valid HTML5 document.

HTML5 outlines are one of the background processes that are supposed to be done automatically by web browsers in the background when loading an HTML5 page. Learn why HTML5 outlines are important and what you need to do to build them.

HTML5 adds a new feature to the anchor (a) tag: the ability to create placeholder links by simply removing the href attribute. But what are they for? Find out how to use HTML5 placeholder links.

The canvas tag is a great way to get dynamic, scripted images up on your web pages. You can show stock quote graphs that update periodically, or an analog clock that shows the current time. I've even seen people create games with the canvas tag and scripts. Now you can draw on your web pages using the HTML 5 tag: canvas.

HTML 5 layout tags include header, section, footer, article, aside, nav, and figure. And until all browsers support these tags reliably, we have to do some things to make sure that they display them correctly. Luckily, there is an easy trick with CSS that you can use to get most modern browsers to display these tags correctly.

The HTML5 HGROUP element allows you to collect multiple headings into one outline segment. This makes your pages more accessible and the HTML5 outlines they generate easier to read. Learn how to use the HGROUP element in this tutorial

HTML5 speech input lets you set up speech-enabled forms. Learn how to use the speech input feature of HTML5 to collect form data from your readers. This demonstration will show you how to search Google using voice input. And best of all it works right now in Chrome.

Using the HTML 5 canvas tag gives you to opportunity to draw on your web pages with vector graphics (SVG). The easiest thing you can draw on an HTML 5 canvas is a rectangle. This tutorial will show you how you can draw different rectangles on a canvas and even how to draw a simple bar graph using the canvas tag.

When using the HTML 5 canvas tag, you have to specify a context. Currently, the only context supported is 2-dimensions or flat images. Learn about 3D canvas and whether or not you will be able to design 3-dimensional images in your HTML 5 canvas.

Adding video to Web pages is not easy. Most people who have tried it quickly give up and use a service like YouTube. But with HTML 5 it's only 3-4 lines of HTML. Creating, editing, and encoding the video are all harder than the HTML required. This tutorial will take you through all the steps to get video to play on your Web pages in all the...

Find out what other designers are using for their video options right now and what they plan to use in the future. Share your opinion of HTML5 video, Flash video, and the various codecs like ogg/Theora, WebM, and H.264.

When you are working with HTML5 video there are a number of things you need to be aware of, not least of which is what video format you are going to encode your video in. There are essentially three video codecs you should be aware of, not including Flash: WebM, H.264, and ogg/Theora. Find out the differences between the three and how to choose...

HTML5 changes the specification to allow tables be used for layout and presentation. Learn how you can define your table as a layout table or a data table.

Adding sound with HTML5 is very easy. You just save your sound file in a few formats and then use the AUDIO element to play it. This article will teach you how to do it.

HTML5 sectioning elements create outlines of your web pages. Sectioning roots help you divide your pages into areas that are outlined and areas that are separate from the main outline.