HTML5 Multimedia Development Cookbook

4 (1 reviews total)
By Dale Cruse , Lee Jordan
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Structuring for Rich Media Applications

About 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.

Publication date:
May 2011
Publisher
Packt
Pages
288
ISBN
9781849691048

 

Chapter 1. Structuring for Rich Media Applications

In this chapter, we will cover:

  • Setting up an HTML5 test area

  • Using the header tag for logos and site titles

  • Creating a table of contents using the nav tag

  • Using section tags to structure areas of a page

  • Aligning graphics using the aside tag

  • Display multiple sidebars using the aside tag

  • Implementing the footer tag

  • Applying the outline algorithm

  • Creating a stylish promo page in HTML5

 

Introduction


"Who dares, wins." - unknown

Don't listen to the naysayers: Many aspects of HTML5 (no space) are here, ready for us to use. Despite what some people might think, there's no far-flung date at which time you can start using this collection of new technologies. The truth is, the next generation of web markup isn't a distant dream on the horizon — it is here now, ready to explore and use.

No website can exist without at least some simple HyperText Markup Language. This open technology is that important. If you've been using HTML to create and publish websites and applications for years, you might feel as though you've mastered the language by now. You already know the benefits of semantic markup, separation of content, presentation and behavior, and are well versed in accessibility concerns. Things might be feeling a bit dull and boring. You're ready for a new challenge.

Or perhaps you're a young developer building your first website and need to know the ins and outs of using the latest and greatest technologies and have an eye to the future of web development.

Either way, your path is clear: Building on your existing HTML and related technology coding abilities, this book will push your skills to the next level and quickly have you creating amazing things HTML was never capable of before.

If you're feeling complacent, read on. The truth is there has never been a more exciting time to be a web developer. Richer interfaces, the ubiquity of the Internet, and the rise of mobile devices are just the kind of new challenges for which you're looking.

Fortunately, HTML5, a liberal helping of Cascading Style Sheets, and a dash of JavaScript, rise to meet those new challenges. The latest innovations in web development make this a new golden age for online publishers. After what was a lull for many of us, we are now quickly discovering that developing for the web is fun again! After all, HTML5 represents evolution — not revolution.

Over the course of several successful high-profile client projects, I've used a custom JavaScript methodology to deploy aspects of HTML5 and still support older browsers, including Microsoft Internet Explorer 6.

In the recipes contained within, you'll learn this powerful methodology and how to use many of the still developing HTML5 standards and features in a real-world, live production environment.

When we develop with HTML5, we take the basic principle of semantic naming (naming things what they are instead of naming things how they appear) to a whole new level. This is the key factor that makes HTML5 different from all of its predecessors. Throughout the course of this book you will find yourself rethinking and optimizing many of your code-naming conventions.

Though the HTML5 proposed recommendation from the Web Hypertext Application Technology Working Group (WHATWG) is not slated for full implementation until 2022, thanks to forward-thinking browser manufacturers, there is no reason you cannot start using it now and reap the benefits of better semantic naming, enhanced accessibility, and much, much more.

So let's get cooking!

In this chapter, we will show you how to set up your development environment including using the appropriate DOCTYPE and which browsers to utilize, and how to use specific new tags including:

  • <header> - a group of introductory or navigational aids

  • <nav> - for navigation lists

  • <section> - to differentiate between areas of a page

  • <aside> - to align specific elements

  • <footer> - the bottommost information on a page or in a section

Finally, we will put all those elements together to create a stylish professional promo page all with HTML5.

 

Setting up an HTML5 test area


If we're going to build new and exciting projects using HTML5, we need to set ourselves up for success. After all, we want to ensure that what we build will display and behave in a predictable way for ourselves and our clients. Let's build a test suite with a code editor and at least one web browser.

Getting ready

There are a few things we need to get started. At minimum, we all need a code editor and a browser in which to view our work. Seasoned professionals know we really need an array of browsers that reflect what our audience uses. We want to see things the way they do. We need to see things the way they do.

How to do it...

Many web developers say they're capable of writing code using nothing but plain text software like Notepad for Microsoft Windows or TextEdit for Mac OSX. That's great, but despite the bragging, we don't know a single web developer who actually works this way day in, day out.

Instead, most use some sort of development application like Adobe Dreamweaver (available for Windows and Mac) or Aptana Studio (available for Windows and Mac and Linux) or Coda (my personal preference, which is Mac only) or TextMate (also Mac only).

Let's start by downloading at least one of these applications:

Application icons for the most common web editors are shown here:

How it works...

In order for the code we create to render properly, we're going to need a web browser — probably more than one. Not all browsers are created equal. As we will see, some browsers need a little extra help to display some HTML5 tags. Here are the browsers we'll use at a minimum.

If you use OSX on a Mac, Apple Safari is already installed. If you're a Microsoft Windows user, Internet Explorer is already installed.

If you use a modern mobile device like an iPhone or Android for development, it already has at least one browser installed too.

Since we'll do our actual coding on the desktop, let's get started by downloading a few browsers from the following locations. Note: Microsoft Internet Explorer is PC only.

Application icons for the most common desktop web browsers are shown here:

There's more...

Why do we need more than one browser? Two reasons:

  • These applications have different rendering engines and interpret our code in slightly different ways. That means no matter how valid or well intentioned our code is, sometimes browser behavior is unpredictable. We have to plan for that and be flexible.

  • We can't always predict which browser our audience will have installed and on which device so we need to be one step ahead of them as developers to best serve their needs as well as our own.

WebKit rendering engine

Luckily, Safari and Chrome use the same WebKit rendering engine. Mobile Safari for iPhone and iPad, as well as the web browser for Android mobile devices, all use a version of the WebKit rendering engine also.

Gecko rendering engine

Firefox and its mobile version both use the Gecko rendering engine.

Trident rendering engine

I just wanna tell you how I'm feeling. Gotta make you understand: Microsoft has changed and updated its Internet Explorer rendering engine named Trident several times over the years, making our lives as developers quite difficult. We often feel like we're aiming at a moving target. With Internet Explorer 10 on the horizon, it appears that won't change any time soon.

See also

Camino (Mac only) and Opera (for Microsoft Windows, Apple OSX, Linux, and mobile devices) both produce excellent alternative browsers that support many of HTML5's features. Consider adding these browsers to your test suite as well.

Application icons for the Camino and Opera web browsers are shown here:

Now that we have a development environment and more than one browser, let's create some code!

Note

Progressive Enhancement

We're going to build our page using the concept of progressive enhancement, which means starting with plain old HTML for markup, then layering CSS for presentation and lastly adding a touch of JavaScript for behavior. One of the best analogies we've heard is that basic HTML is like black and white TV. Adding CSS is like adding color and adding JavaScript is kind of like adding high definition.

 

Using the header tag for logos and site titles


"The <header> element represents a group of introductory or navigational aids. A <header> element is intended to usually contain the section's heading (an <h1> - <h6> element or an <hgroup> element), but this is not required. The <header> element can also be used to wrap a section's table of contents, a search form, or any relevant logos." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

The first thing you'll notice about HTML5 is the DOCTYPE. If you're a veteran of web development, you'll be glad to know we no longer have to use such long, convoluted DOCTYPEs as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

or:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5 eliminates the need for Strict, Transitional, and Frameset DOCTYPEs. Actually, it eliminates the need for DOCTYPES altogether. Without one, older versions of Internet Explorer slip into Quirks mode and no one wants that. Instead, we can use the simple:

<!DOCTYPE html>

Finally, one DOCTYPE to rule them all.

Let's start with a basic bare bones page structure with which we should all be familiar:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Quotes were necessary to create valid XHTML, but because HTML5 is not coupled to XML, those are optional in the HTML5 specification. However, the author would recommend quoting attributes whenever possible.

Keen eyes will also note the <meta name="viewport" content="width=device-width, initial-scale=1.0">. That isn't going to do much for us just yet, but will be vital when previewing your work on mobile devices.

Closing our tags is optional as well. Though it's a good practice, you should weigh whether it's worth the development time and added page weight.

You'll also notice a conditional comment checking to see if the user is using Internet Explorer. If so, we tell the browser to execute Remy Sharp's "HTML5 Shiv" script, which simply tells IE to behave: <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>.

Darn that Internet Explorer. It lacks discipline.

How to do it...

We're going to create a single-page professional web portfolio for a young developer named Roxane. Let's say that Roxane is a talented web developer with a lot of skill, just like you. She deserves a professional single-page portfolio site worthy of her talent and so do you. Feel free to substitute your information for hers in the following examples.

Let's start by using the first new <header> tag to define the topmost area of our overall page.

While we're at it, we're going to incorporate the new <hgroup> tag to contain the headers in our new <header> tag.

<!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]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
</body>
</html>

"The <hgroup> element represents the heading of a section. The element is used to group a set of <h1> - <h6> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

How it works...

The new <header> is where we often store things like logos, company slogans, and other types of branding usually associated with mastheads. It is often the first block-level element on an HTML5 page and is commonly used for headings like <h1>, <h2>, and so on. The result is a more semantically rich code base from which to build.

There's more...

Before HTML5, all <div>s were given equal weight by the browser software as well as by leading search engines like Google, Yahoo!, and Bing. But we know the intent of <div id="header"> just isn't as obvious as the new <header>. Instead, the HTML5 specification prefers to name things what they actually are. Now, HTML5 recognizes that not all <div>s are created equal by replacing some with more semantic terms like the new <header> and <nav> and <footer> for more data richness.

Use <header> elsewhere

Interestingly, the masthead isn't the only place you can use the new <header> tag. In HTML5, it's also perfectly acceptable to use the new <header> tag inside just about any block-level element.

Content, not position

The new <header> tag does most often appear at the top of a web page, but it doesn't always have to appear there. Remember that semantically, the new <header> tag is defined by its contents, not its position.

Semantic naming

Semantic naming also makes our jobs as web developers much easier. The intent of something like the new <footer> tag is much more obvious labeled like the ambiguous <div id="belowleft"> for example.

Note

The Key to Semantic Naming

Name things what they - are not how they appear.

See also

We will continue to reference the WHATWG's HTML5 Draft Standard at http://whatwg.org/specs/web-apps/current-work/multipage, as it is an essential guide to the HTML5 evolution.

 

Creating a table of contents using the nav tag


"The <nav> element represents a navigation section where only sections that consist of primary navigation blocks are appropriate for the <nav> element." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Like the new <header> tag replacing outmoded naming conventions like <div id="header">, we can also replace <div id="nav"> with the simple new <nav>. Makes much more sense, doesn't it? We think so too.

Getting ready

We're going to add the primary navigation bar like we so often see on web pages. This enables users to easily maneuver from page to page or, in this case, within the same page. Roxane wants to showcase her biographical information, work samples, and ways to contact her, so we'll use those as our anchors.

How to do it...

Let's create our navigation bar using the two most typical elements:

  1. 1. An unordered list

  2. 2. Accompanying hypertext links

    <!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]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <header>
    <hgroup>
    <h1>Roxane is my name.</h1>
    <h2>Developing websites is my game.</h2>
    </hgroup>
    </header>
    <nav>
    <ul>
    <li><a href="#About">About</a></li>
    <li><a href="#Work">Work</a></li>
    <li><a href="#Contact">Contact</a></li>
    </ul>
    </nav>
    </body>
    </html>
    

How it works...

Previously, we would have used something like <div id="nav"> to store our navigation list in it. But with HTML5, the new <nav> tag is all that's necessary.

When we apply CSS, we'll float those list items and make them appear more like a traditional web navigation bar.

There's more...

The beauty of naming things more semantically is that now portions of our pages do exactly what we think they should do — a <header> contains heading information, <nav> contains navigation aids, and so on. Eschew obfuscation.

Use <nav> elsewhere

Like <header>, <nav> can appear in more than one place on a page.

More semantic = more gooder

Remember also that more semantic naming can usually lead to shorter, leaner code. After all, <nav> is certainly shorter than the common <div id="nav">. And it makes more sense to both humans and machines. That means less for us to write, which saves us time. That also means less code for the browser to interpret and display, which saves download and render time. It also gives meaning and structure to the content, similar to the way an outline provides meaning and structure to a research paper. Everybody wins.

Still evolving

Originally, the new <nav> element was only for "primary" navigation blocks. However, Ian Hickson, the driving force behind HTML5, updated the specification to be "major" navigation blocks instead.

See also

Since it's a still-evolving standard, you're encouraged to contribute to the evolution of HTML5 and help shape the language. Join the WHATWG's mailing list to make suggestions and ask questions. Instructions for signing up are at: http://whatwg.org/mailing-list#help.

 

Using section tags to structure areas of a page


"The <section> element represents a generic document content block or an application block. A <section>, in this context, is a thematic grouping of content, typically with a heading. " - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

Let's add the new <section> tags for each of the primary areas of Roxane's single-page portfolio site. These <section>s will then be used as containers, each with a heading and generic content that will contain her biographical information, work examples, and contact methods.

How to do it...

The use of the new <section> tag can be tricky. There are a number of things it isn't, but only certain things that it is.

<!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]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
</body>
</html>

How it works...

We've used the new <section> tag not as a generic replacement for the <div>, but instead in the semantically correct way as a related grouping that usually contains a heading.

There's more...

If the content grouping isn't related, it probably shouldn't be a <section>. Consider a <div> instead.

Section doesn't equal div

Remember: If it doesn't have a <header>, it probably doesn't need a <section>. Use <section> to group content, but <div> when grouping items purely for stylistic reasons.

Section guidelines

Still aren't sure if <section> is the right tag to use? Remember these guidelines:

  • Are you using it solely for styling or scripting? That's a <div>.

  • If any other tag is more appropriate, use it instead.

  • Use it only if there's a heading at the start of the content.

Still evolving

HTML5 is a constantly evolving set of standards. The latest bit of guidance from the WHATWG suggests:

"Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element."

Publishing an about page? That's probably going to be a good <section> candidate.

See also

The new <section> tag can also support the cite attribute for citations.

 

Aligning graphics using the aside tag


"The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the <aside> element, and which could be considered separate from that content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

Let's use the new <aside> tag in a common way: to create a sidebar of thumbnail images listing what Roxane has been busy reading recently.

How to do it...

In the past we floated images or lists to the right or left of our text. That still works, but now we can make better use of the improved semantics in HTML5 by using the new <aside> tag to accomplish a similar visual effect. Let's use:

  • An ordered list

  • Thumbnail images

  • Book titles

<!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]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
<aside>
<h4>What I'm Reading</h4>
<ul>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
</ul>
</aside>
</body>
</html>

Note: In this case, quote marks are needed around ALT tags to ensure validity.

How it works...

The <aside> tag is effectively used to place items like images and text that are often less important than the primary page content.

There's more...

Semantically, <aside> is similar to a sidebar. That doesn't necessarily refer to position but instead to tangentially related content.

Not all <section>s are alike

Though <section> is a generic hunk of related content, think of <header>, <nav>, <footer> and <aside> as specialized types of <section>.

Tip to remember

Content can live without the <aside> tag, but the <aside> tag can't live without content.

Aside from <aside>

The <aside> tag definition has been broadened to include not just information about an <article> to which it may be related, but to also include information related to the site itself, like a blogroll.

See also

Jeremy Keith penned the outstanding "HTML5 For Web Designers" which is considered the least you need to know to understand the new group of technologies. Find it at: http://books.alistapart.com/products/html5-for-web-designers.

 

Displaying multiple sidebars using the aside tag


"The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the <aside> element, and which could be considered separate from that content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

It seems like every blog and many other types of websites have sidebars filled with all sorts of information. Here, we're going to add an additional sidebar to Roxane's single-page portfolio site using the new <aside> tag.

How to do it...

Roxane wants to let people know where else she can be reached, and so do you. Let's use the <aside> tag to create a sidebar and draw attention to her web presence:

<!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]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
<aside>
<h4>What I'm Reading</h4>
<ul>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
</ul>
</aside>
<aside>
<h4>Elsewhere</h4>
<p>You can also find me at:</p>
<ul>
<li><a href="http://linkedin.com/in/">LinkedIn</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</aside>
</body>
</html>

How it works...

Building on the success we had previously with the <aside> tag, we've used it again to align information that is subsequent to the main information.

There's more...

Just because a design calls for a sidebar, don't automatically reach for the <aside> tag. Carefully consider your content before considering position.

Pull quotes good for <aside>

Pull quotes are common in news articles, and therefore prime candidates to be contained by the <aside> tag.

Remember to validate

We need to add quotes around those anchors to make them valid.

See also

Together, Bruce Lawson and Remy Sharp penned the outstanding Introducing HTML5 reference available at: http://peachpit.com/store/product.aspx?isbn=0321687299

 

Implementing the footer tag


"The <footer> element represents a footer for the completed documented or its nearest ancestor sectioning content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

We've all used footers on our web pages — typically for things like secondary navigation and more. This contains all the information you typically see at the bottom of a page, like a copyright notice, privacy policy, terms of use, and many more. Like the new <header> tag, the new <footer> tag can occur in more than one place.

How to do it...

In this case, we're going to use the new <footer> tag to place Roxane's copyright information at the bottom of the page.

Note

And that's one to grow on

Remember: Copyright does not mean you have the right to copy it!

<!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]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
<aside>
<h4>What I'm Reading</h4>
<ul>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
<footer> tagimplementing</ul>
</aside>
<aside>
<h4>Elsewhere</h4>
<p>You can also find me at:</p>
<ul>
<li><a href="http://linkedin.com/in/">LinkedIn</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</aside>
<footer>
<h5>All rights reserved. Copyright Roxane.</h5>
</footer>
</body>
</html>

How it works...

Though this <footer> is located at the bottom of Roxane's single-page portfolio site, it can be used elsewhere on a page, such as at the bottom of a <section> tag to contain information like author, publication date, and so on. The result is more flexible than something like the old <div id="footer"> allowed us. In this and many other instances, HTML5's new tags allow us to place appropriate tags where they make the most sense, based on our content, not our layout.

There's more...

The HTML5 specification suggests author information be included in the new <footer> tag no matter if the <footer> is part of a <section> or <article> or even at the bottom of the page.

This happens usually

The vast majority of the time, you'll use the <header> tag at the top of your document, the <footer> tag at the bottom, and <aside> tags for the sides.

Flexible footer content

When the <footer> element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

More flexible footer content

The new <footer> tag can also contain information like author attribution, links to related documents, copyright, and so on.

See also

Mark Pilgrim created a terrific free online HTML5 reference Dive Into HTML5 located at: http://diveintohtml5.org.

 

Applying the outline algorithm


Luckily for us, HTML5 now has a method of assembling an outline of our pages in browsers, so search engines as well as accessibility technologies can make better sense of them. We're going to make use of the HTML5 Outliner at: http://gsnedders.html5.org/outliner

Getting ready

To use the HTML5 Outliner, we can use HTML stored on our local computer or code visible via a URL. Make sure to save the code we've been creating locally or upload it to a publicly accessible web server for this step.

How to do it...

Let's make sure to save this document either on a local hard drive or remote server. We'll visit http://gsnedders.html5.org/outliner to create our outline.

Using our previous code example, we can generate the following code outline:

  1. 1. Roxane is my name.

  2. 2. Untitled Section

  3. 3. About

  4. 4. Work

  5. 5. Contact

  6. 6. What I'm Reading

  7. 7. Elsewhere

  8. 8. All rights reserved. Copyright Roxane.

How it works...

"It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk." - WHATWG

There's more...

It's assumed that content following any heading is related to that heading. Therefore we can use many of the new HTML5 tags like <section> to explicitly demonstrate the beginning and ending of related content.

Are you sure?

If the HTML5 Outliner tool displays messages like "Untitled Section" you should rethink how you're using each of your tags and ensure your approach matches the intent of the specification.

An exception

"Untitled Section" messages should be treated as warnings instead of errors. While <section> and other new HTML5 tags require a heading tag, it's perfectly valid not to have one for <nav> areas.

Remember accessibility

The outline created ensures us that the code we've created is compliant with the W3C's standards for markup, as well as advanced technologies like WAI-ARIA for accessibility requirements.

Note

Good accessibility design is good web design.

See also

The http://html5doctor.com site is a terrific interactive reference written by seven thought leaders including Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

 

Creating a stylish promo page in HTML5


Our pal Roxane's single-page portfolio site has come together using more than a few of the new HTML5 elements. She's ready to show the world she's a forward-thinking web developer, ready to tackle advanced projects.

Getting ready

We've done the prep work by assembling much of the content for the single-page portfolio site. It isn't very stylish just yet, but when we layer CSS on top of it, this will really come together and be as stylish as our imaginations will allow.

How to do it...

Here's the code we have so far. It's valid against the World Wide Web Consortium's HTML5 and Section 508 accessibility tests. This unstyled code should be easily viewable in any modern web browser whether it's on the desktop or a mobile device.

<!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]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
<aside>
<h4>What I'm Reading</h4>
<ul>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
</ul>
</aside>
<aside>
<h4>Elsewhere</h4>
<p>You can also find me at:</p>
<ul>
<li><a href="http://linkedin.com/in/">LinkedIn</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</aside>
<footer>
<h5>All rights reserved. Copyright Roxane.</h5>
</footer>
</body>
</html>

How it works...

A single-page portfolio site makes a lot of sense for a developer or designer, as all the information is quickly available to those in hiring positions, like human resources teams or recruiters.

There's more...

This is exactly the kind of professional single-page portfolio site Roxane needs to demonstrate she's a forward-thinking developer learning to wield the next generation of web standards.

Try sans shiv

As an experiment, turn off the "HTML5 Shiv" JavaScript reference in the code and see how various versions of Internet Explorer treat our new HTML5 tags.

Mobile first

Remember to consider mobile displays when creating this and other websites. There's almost never a good reason to block entire groups of people from seeing your content.

IE evil?

Over the past 15 years or so, we've spent a lot of time and effort bashing Microsoft Internet Explorer for its lack of standards support and buggy interpretation of the box model. The upcoming IE10 brings us closer to a more unified web development world, but we still remain years away from being free of cursing IE.

See also

For lots of single-page portfolio and other website inspiration, visit the http://onepagelove.com gallery.

The unstyled single-page portfolio as it displays on most major modern desktop web browsers:

About the Authors

  • Dale Cruse

    Since 1995, Boston-area web developer Dale Cruse has been publishing websites for high-profile clients ranging from the U.S. Army to Bloomingdale's. He has been a guest lecturer at the Art Institute of New England & is currently pursuing speaking opportunities. Contact him at http://dalejcruse.com. He is also the author of the Champagne blog Drinks Are On Me at http://drinksareonme.net.

    Browse publications by this author
  • Lee Jordan

    Lee Jordan is a web developer with a large collection of web technology acronyms on her resume that sound like the names of laundry detergents and cause glazed expressions in school children. She designs and maintains internal and external enterprise-level websites and web-based applications as part of a project team for a privately held technical services company. Her work includes proposing, writing, and editing web content and user guides people actually read. She began her career in 1997 as a web designer after graduating from Florida State University with a Bachelor of Fine Arts, where she swears that she missed at least one home football game while in the computer lab. Lee later convinced Seminole Community College to give her a Web Programming degree in 2003, even though her final project was a Java-based application that actually contained a usable help file. Web development topics or whatever she can think of at the time are posted on her blog at http://leejordan.net.

    Browse publications by this author

Latest Reviews

(1 reviews total)
More screenshots should be made available for each coding section
HTML5 Multimedia Development Cookbook
Unlock this book and the full library for FREE
Start free trial