Building HTML5 Apps
Semantic HTML5
Semantic HTML5
HTML is...
Accessiblity is key!
Screen readers, search engines, mobile users
<div id="header"> <h1>My Weblog</h1> <p class="tagline"> A lot of effort went into making this effortless. </p> </div>
<header> <hgroup> <h1>My Weblog</h1> <h2> A lot of effort went into making this effortless. </h2> </hgroup> </header>
<div class="entry"> <p class="post-date">October 22, 2009</p> <h2>Travel day</h2> ... </div>
<article> <header> <time datetime="2009-10-22" pubdate>October 22, 2009</time> <h1>Travel day</h1> </header> ... </article>
<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>
<nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav>
<div id="footer"> <p>© 2012</p> </div>
<footer> <p> © 2012 </p> </footer>
A few special characters
© = © & = & → = → ← = ←
Quotation marks ' ' and " " ‘ = ‘ ’ = ’ “ = “ ” = ”
type="text"
type="number"
type="email"
type="tel"