Enhancing Web Page Structure - HTML5 - page 244

<li><a href=”products.htm”>Products</a></li>
<li><a href=”services.htm”>Services</a></li>
<li><a href=”about.htm”>About Us</a></li>
</ul>
</nav>
</header>
One of the major benefits for using the <nav> tag over a generic <div> tag is that it is easier to find
for assistive technology like screenreaders. Because the site navigation can literally be located any-
where on a web, the current methodology is to create a named anchor called a skip link at the top
of the page that connects to the <div> tag with the navigation. This allows anyone using a screen-
reader to quickly access the primary links in a site. The <nav> tag has the potential to render the
skip link unnecessary because, once the <nav> tag is supported by the assistive technology, screen-
readers will be able to find the primary navigation without the extra guidance.
establishing articles
The content in an <article> tag differs from the general content contained within a <section> tag
in a very important way: It's self-contained and able to be repurposed. Examples of content ideal for
the <article> tag are blog posts, forum posts, or comments — any bit of independent content.
Here's an example of how the <article> tag might be used with a blog post:
<article>
<header>
<h1>Why Our Stuff is the Best</h1>
<p>by Simon Stuffy, CEO of Good Stuff, Inc.</p>
<p class=”post-date”>March 31, 2011</p>
</header>
<p>Our stuff is truly the best you'll find anywhere. Why? Because we give hire
the best people to create our stuff, from the best materials anywhere. Then we
test our stuff under a wide range of conditions to be sure that it's really
the best stuff around.</p>
<footer>
<p>Copyright &copy; 2011 Good Stuff, Inc.</p>
</footer>
</article>
As you can see, the content within the <article> tag is ready to be published in any other web
page. There is also a <header> , complete with author name and date of publication, a content
area, and a footer with copyright details (the <footer> tag is covered later in this lesson). All of it
wrapped up in a neat little <article> tag.
HTML5 also includes a new tag designed to make dates and time machine readable while maintain-
ing a customizable human aspect as well. The <time> tag is most frequently seen in an <article>
tag, although it is not restricted to that placement. The <time> tag is quite flexible and allows the
coder to depict a date, a time, or both. Here's how I might change the date in the previous example
to use the <time> tag:
<header>
<h1>Why Our Stuff is the Best</h1>