官术网_书友最值得收藏!

首頁(yè) >

HTML5 Multimedia Development Cookbook

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 >LinkedIn</a></li>
<li><a >Twitter</a></li>
<li><a >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

主站蜘蛛池模板： 拉萨市| 伊川县| 炎陵县| 苍梧县| 郓城县| SHOW| 石棉县| 多伦县| 宾川县| 葫芦岛市| 昌平区| 游戏| 西吉县| 莎车县| 麻城市| 岳池县| 保定市| 陆河县| 财经| 崇文区| 武夷山市| 家居| 瑞安市| 白河县| 博兴县| 金川县| 来宾市| 桂阳县| 涟水县| 应城市| 保亭| 和田县| 五莲县| 土默特左旗| 海南省| 栖霞市| 海宁市| 奎屯市| 普格县| 三河市| 昌图县|