Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Semantic Elements

Idan Gazit
October 25, 2011

HTML5 Semantic Elements

An introduction to HTML5's new semantic elements, including webforms 2.0. Delivered at the ISOC HTML5fest 2011 (www.w3c.org.il/HTML5fest/)

Idan Gazit

October 25, 2011
Tweet

More Decks by Idan Gazit

Other Decks in Programming

Transcript

  1. <div class="header"> <h1>BEST BLOG IN THE WORLD</h1> <div class="nav"> <ul>

    ... </ul> </div> </div> <div class="maincontent"> <h2>My Posts</h2> <div class="post"> <h3>A post</h3> ... </div> </div> <div class="footer"> <p>&copy; Natan Alterman</p> </div>
  2. <div class="header"> <h1>BEST BLOG IN THE WORLD</h1> <div class="nav"> <ul>

    ... </ul> </div> </div> <div class="maincontent"> <h2>My Posts</h2> <div class="post"> <h3>A post</h3> ... </div> </div> <div class="footer"> <p>&copy; Natan Alterman</p> </div>
  3. <header> <h1>BEST HTML5 BLOG IN THE WORLD</h1> <nav> <ul> ...

    </ul> </nav> </header> <section class="maincontent"> <header><h1>My Posts</h1></header> <aticle> <h1>A post title!</h1> ... </aticle> </section> <footer> <p>&copy; Natan Alterman</p> </footer>
  4. <header> <h1>BEST HTML5 BLOG IN THE WORLD</h1> <nav> <ul> ...

    </ul> </nav> </header> <section class="maincontent"> <header><h1>My Posts</h1></header> <aticle> <h1>A post title!</h1> ... </aticle> </section> <footer> <p>&copy; Natan Alterman</p> </footer>
  5. • BEST HTML5 BLOG IN THE WORLD • My Posts

    - A post title! - Another post title! - A really old post. http://gsnedders.html5.org/outiner/ http://dev.w3.org/html5/spec/Oveview.html#outine
  6. <input type="date"> <input type="time"> <input type="datetime"> <input type="datetime-local"> <input type="month">

    <input type="week"> DATE AND TIME visit with a webkit browser, ike chrome: http://bit.ly/html5-input-tests