<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Test 0314</title>    
  </head>
  <body>
    <div id="b" role="banner">
      <p>Here is a banner for this page.</p>
    </div>
    <div id="toc" role="contentinfo">
      <p>Here is some information about the page's contents:</p>
      <ul id="contents" role="list">
        <li role="listitem"><a href="#s1">Section 1</a></li>
        <li role="listitem"><a href="#s2">Section 2</a></li>
        <li role="listitem"><a href="#a1">Appendix 1</a></li>
      </ul>
    </div>
    <div id="main" role="main">
      <p>This is the primary content of this page.  It has some sections.</p>
      <div id="s1" role="section">
        <h1 role="heading">Some contents that are a header</h1>
        <p>Section 1 needs some content!</p>
      </div>
      <div id="s2" role="section">
        <h1 role="heading">This is Section 2</h1>
        <p>Section 2 is pretty boring.</p>
      </div>
      <div id="a1" role="appendix">
        <h1 role="heading">This is Appendix 1</h1>
        <p role="note">It is a note about the document - not a primary content
        item.</p>
      </div>
    </div>
  </body>
</html>
