Building HTML5 Apps

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>&copy; 2012</p>
</div>
	
<footer>
    <p>
        &copy; 2012
    </p>
</footer>

A few special characters

&copy; = ©
&amp; = &
&rarr; = →
&larr; = ←
Quotation marks ' ' and " "

&lsquo; = ‘
&rsquo; = ’
&ldquo; = “
&rdquo; = ”

Mobile Forms input

type="text"
android keyboard on input type text
Android Device
type="number"
android keyboard on input type number
Android Device
type="email"
iphone keyboard on input type email
iPhone Device
type="tel"
iphone keyboard on input type tel
iPhone Device

Froms