- HTML5 Multimedia Development Cookbook
- Dale Cruse Lee Jordan
- 371字
- 2021-04-02 19:27:36
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.