Aligning graphics using the aside tag_HTML5 Multimedia Development Cookbook-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

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.