O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required