main element in the HTML5

BEST PRACTICE:

For accessibility matters, a best practice is to split your page content into “regions” defined by the five 5 elements (aside, footer, header, main and nav) like:

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.      <title>Some title</title>
  5.    </head>
  6. <body>
  7. <header>header text:
  8.    <nav>
  9.      <h2>Click these links to navigate…</h2>
  10.      <ul>
  11.         <li><a href=“link1.html”>link1</a></li>
  12.         <li><a href=“link1.html”>link2</a></li>
  13.         <li><a>TEST</a></li>
  14.      </ul>
  15.    </nav>
  16. </header>
  17. <main>
  18.   <h1>link1</h1>
  19.   <nav>
  20.      <h2>Please choose:</h2>
  21.      <ul>
  22.         <li><a href=“#1”>1</a></li>
  23.         <li><a href=“#2”>2</a></li>
  24.         <li><a href=“#3”>3</a></li>
  25.      </ul>
  26.   </nav>
  27.   <h2 id=“1”>1</h2>
  28.   <p>1.1</p>
  29.   <p>1.2</p>
  30.   <p>1.3</p>
  31.   <p>1.4</p>
  32.   <p>1.5</p>
  33.   <h2 id=“2”>2</h2>
  34.   <ul>
  35.      <li>2.1</li>
  36.      <li>2.2</li>
  37.      <li>2.3</li>
  38.      <li>2.4</li>
  39.      <li>2.5</li>
  40.      <li>2.6</li>
  41.   </ul>
  42.   <h2 id=“3”>3</h2>
  43.   <ul>
  44.     <li>3.1</li>
  45.     <li>3.2</li>
  46.     <li>3.3</li>
  47.   </ul>
  48. </main>
  49. <footer>Copyright 2012 B.lawson</footer>
  50. </body>
  51. </html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s