Book Image

HTML5 Multimedia Development Cookbook

Book Image

HTML5 Multimedia Development Cookbook

Overview of this book

HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. This cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. HTML5 is the future.Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications. Many of the new key features of HTML5 are covered, with self-contained practical recipes for each topic. Forget hello world. These are practical recipes you can utilize straight away to create immersive, interactive multimedia applications. Create a stylish promo page in HTML5. Use SVG to replace text dynamically. Use CSS3 to control background size and appearance. Use the Canvas to process images dynamically. Apply custom playback controls to your video.
Table of Contents (16 chapters)
HTML5 Multimedia Development Cookbook
Credits
Foreword
About the Authors
About the Reviewers
www.PacktPub.com
Preface

Using hgroup to create accessible header areas


Remember hgroups? Sure you do. We looked at those in a previous chapter as a way to group related heading tags logically. Now, we will look at how that new HTML5 element can have added accessibility benefits.

Getting ready

Previously, we looked at Roxane's portfolio as an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roxane</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
</body>
</html>

In the past, we might have coded the body area of her site this way:

<body>
<div>
<div>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</div>
</div...