Adding Document Structure With HTML5’s New Elements | HTML5 Tutorial pdf

Adding Document Structure With HTML5’s New Elements

Problem
You want to define your document structure with the new header, footer, nav, aside, section and article elements.
Solution
Examine your content and document structure to determine which of the new elements work with your page:
<header>
Is used to contain the headline(s) for a page and/or section. It can also contain supplemental information such as logos and navigational aids.
<footer>
Contains information about a page and/or section, such as who wrote it, links to related information and copyright statements.
<nav>
Contains the major navigation links for a page and, while not a requirement, is often contained by header.
<aside>
Contains information that is related to the surrounding content but also exists independently, such as a sidebar or pull-quotes.
<section>
Is the most generic of the new structural elements, containing content that can be grouped thematically or is related.
<article>
Is used for self-contained content that could be consumed independent of the page as a whole, such as a blog entry.
A simple blog structure, with a headline, navigation, sidebar, blog posts and footer could be marked up in HTML5 as:
<header>
<h1><abbr title="Hypertext Markup Language">HTML</abbr>5, for Fun &amp; Profit</h1>
<nav>
<ul>
<li><a href="/Archive/">Archive</a></li>
<li><a href="/About/">About</a></li>
</ul>
</nav>
</header>
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean that <em>all</em> links </article>
<article>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what works best for you. So once </article>
<aside>
<h2>HTML5 Elsewhere</h2>
<p>Feed your HTML5 fix with resources from our partners:</p>
<ul>
<li><a href="http://lovinghtml5.com">Loving HTML5</a></li>
<li><a href="http://semanticsally.com">Semantic Sally</a></li>
</ul>
</aside>
<footer>
<p>Copyright &copy; 2011 <a href="http://html5funprofit.com">HTM5, for Fun &amp; Profit</a>. All rights </footer>

And, with the right CSS and supporting HTML, this markup could render on the browser as shown in Figure.

Discussion

These new structural elements were developed based on actual practices. A review of over a billion web pages (see http://code.google.com/webstats/) revealed the naming conventions markup authors were already using to structure and describe their content via class and id, including:
• Header
• Footer
• Nav

The new elements in HTML5 simply attempt to reflect what authors are already doing.

Structural Elements

Using these structural elements helps you make your markup more semantic, but they also help define the main landmarks in the document.
Consider how important it is for screen reader users and folks who navigate with the keyboard to be able to skip to different areas of the page, like the navigation.
Previously, we’ve tried to provide such functionality via “skip links” and shortcuts, but HTML5 establishes formal landmark elements that can be used.
That said, this is still a hypothetical.
As of this writing, no browsers or assistive technologies reference the structural elements for any navigational purposes.
In fact, the Web Accessibility Initiative’s Accessible Rich Internet Applications (WAIARIA) specification already addresses how to use HTML5 with ARIA landmark roles for this very purpose.

When to Use Structural Elements

How do you know when to use these new elements?
Again, focus on your content and consider the semantics of each element.
For example, most sites have an area considered a “header,” comprised of a logo, maybe the company name and a tagline. And that certainly sounds like a good case for header.
You may also have a section or aside in your document with its own set of headlines and navigation, for which header is also completely appropriate.
The same holds true for footer. While most pages have content appropriate for the new footer element author, copyrights, related information sections, articles and asides can feature the same information. And, in turn, can also include footer.
Or consider nav. You may have many groups of links on your site, some of which are for navigation, while others are external.
But nav is only appropriate for major site navigation, not search results links or a blogroll.

When to Use div Elements

As you can see from the blog markup example, the new structural elements can replace many of the non-semantic container divs that you may have grown accustomed to using. But div still has a place at the HTML5 party.
If you ever need a containing element strictly for style purposes, div is the element to use. You don’t want to use one of the new structural elements just to serve as a hook for your CSS. That is not what semantic markup is about.
Just remember to focus on your content and avoid unnecessary use of div, such as when another element is more semantic.
For example, if you have a paragraph of text, use the p element not div. Both give you block-level formatting, but p is more semantic for that particular purpose.

Styling Structural Elements

All of today’s browsers render the content contained by these new elements, however some browsers don’t recognize them and, as such, treat them like inline elements. This default rendering can cause some serious problems with styling.
Fortunately, it doesn’t take much to fix.
The current cast of browsers simply needs to be told to treat the elements as block-level elements:
header, footer, nav, article, aside, section {
display: block;
}

And with that single CSS declaration, you can happily style the structural elements.
Well, almost.
In versions of Internet Explorer (IE) prior to IE9 you have to add a bit of JavaScript to your document so IE recognizes the elements and allow you to style them:
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
</script>

Any time you add a new HTML5 element to your document, you need to add this document.createElement if you want cooperation from Internet Explorer before version