- HTML5 Multimedia Development Cookbook
- Dale Cruse Lee Jordan
- 308字
- 2021-04-02 19:27:36
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.
See also
Together, Bruce Lawson and Remy Sharp penned the outstanding Introducing HTML5 reference available at: http://peachpit.com/store/product.aspx?isbn=0321687299
- Flash CC中文版動畫設計與制作/微課堂學電腦
- 中文版CorelDRAW 2022基礎教程
- 中文版3ds Max 2012實用教程（第2版）
- 使用AADL的模型基工程：SAE體系結構分析和設計語言入門
- 中文版SolidWorks 2015技術大全
- Mastering phpMyAdmin 3.3.x for Effective MySQL Management
- Photoshop圖形圖像處理實用教程
- Blender 2.5 Materials and Textures Cookbook
- 蝶變：移動用戶體驗設計之道
- Microsoft SharePoint 2010 and Windows PowerShell 2.0: Expert Cookbook
- 中文版Photoshop CS6經典自學教程（培訓教材版）
- jQuery UI 1.6: The User Interface Library for jQuery
- 中文版After Effects 2020基礎教程
- 音樂制作7天速成：Studio One編曲教程
- 中文版3ds Max 2014從入門到精通實用教程（微課版）