Contents

1 New semantic tags
2 New link relations
3 Microdata
4 ARIA attributes
5 New form field types

1 New semantic tags #

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>


2 New link relations #

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>


3 Microdata #

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>


4 ARIA attributes #

  • ARIA : Accessible RIA
<ul id="tree1"
      role="tree" 
      tabindex="0" 
      aria-labelledby="label_1"
      > 
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> 
  <li role="group"> 
    <ul> 
      <li role="treeitem" tabindex="-1">Oranges</li> 
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
  </ul>


5 New form field types #

  • Implemented
<input type='range' min='0' max='50' value='0'>  
<input autofocus type='search'>  
<input type='text' placeholder='Search inside'>
  • not yet
<menu>
<progress>
<input type='color'> 
<input type='number'> 
<input type='email'> 
<input type='tel'> 
<input type='time'> 
<input type='date'> 
<input type='month'> 
<input type='week'> 
<input type='datetime'> 
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2010-06-10 15:01:10
Processing time 0.0077 sec