Now we just have to add the sidebar section.
Our blog has a sidebar on the right side that contains links to the archives
for the blog. If you’re thinking that we could use the aside tag to define the
sidebar of our blog, think again. You could do it that way, but it goes against
the spirit of the specification. The <aside> is designed to show content related
to an article. It’s a good place to show related links, a glossary, or a pull quote.To mark up our sidebar that contains our archive list, we’ll use another
<section> tag and a <nav> tag.html5_new_tags/index.html
<sectionid="sidebar"><nav>
<h3>Archives</h3><ul>
<li><ahref="2013/10">October 2013 </a></li>
<li><ahref="2013/09">September 2013 </a></li>
<li><ahref="2013/08">August 2013 </a></li>
<li><ahref="2013/07">July 2013 </a></li>
<li><ahref="2013/06">June 2013 </a></li>
<li><ahref="2013/05">May 2013</a></li>
<li><ahref="2013/04">April 2013 </a></li>
<li><ahref="2013/03">March 2013 </a></li>
<li><ahref="2013/02">February 2013 </a></li>
<li><ahref="2013/01">January 2013 </a></li>
<li><ahref="all">More</a></li>
</ul></nav></section>In our case, the links in our page’s sidebar are a secondary navigation. Not
every group of links needs to be wrapped with the <nav> element; we reserve
that element specifically for navigation regions.That’s it for our blog’s structure. Now let’s turn our attention to the layout.
Styling the Blog
We apply styles to these new elements just like we’d style <div> elements.
First we create a new stylesheet file called stylesheets/style.css and attach it to
our HTML document by placing a stylesheet link in the header, like this:html5_new_tags/index.html
<linkrel="stylesheet"href="stylesheets/style.css">Chapter 2. New Structural Tags and Attributes • 22
Download from Wow! eBook <www.wowebook.com> report erratum • discuss