HTML5 Tutorial : http://www.w3schools.com/html5/default.asp
1. HTML5 doctype
[codesyntax lang=”html4strict”]
<!DOCTYPE html>
[/codesyntax]
2. Figure
[codesyntax lang=”html4strict”]
<figure> <img src="http://kbs.kimbs.cn/img/php5-zce-logo-new.gif" alt="About image" /> <figcaption> <p>This is an image.</p> </figcaption> </figure>
[/codesyntax]
3. Small
[codesyntax lang=”html4strict”]
<small>© Copyright</small>
[/codesyntax]
4. No “type” any more
[codesyntax lang=”html4strict”]
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
[/codesyntax]
5. Unnecessary quotes (different from XHTML)
[codesyntax lang=”html4strict”]
<p class=myClass id=someId> Start the reactor. </p>
[/codesyntax]
6. Content editable
[codesyntax lang=”html4strict”]
<ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory </li> <li> Watch video of self </li> </ul>
[/codesyntax]
7. Email field
[codesyntax lang=”html4strict”]
<form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form>
[/codesyntax]
8. Placeholder
[codesyntax lang=”html4strict”]
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
[/codesyntax]
9. Local Storage (no time limit)
[codesyntax lang=”javascript”]
<script> // the localStorage object alert(localStorage); // page visit count in local storage if (localStorage.pagecount) { localStorage.pagecount = Number(localStorage.pagecount) + 1; } else { localStorage.pagecount = 1; } document.write("Visits " + localStorage.pagecount + " time(s)."); </script>
[/codesyntax]
10. Session Storage (clear when closing brower)
[codesyntax lang=”javascript”]
<script> // the sessionStorage object alert(sessionStorage); // page visit count in current session storage if (sessionStorage.pagecount) { sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1; } else { sessionStorage.pagecount = 1; } document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script>
[/codesyntax]
11. Header and Footer
[codesyntax lang=”html4strict”]
<header> this is the header </header> body <footer> this is the footer </footer>
[/codesyntax]
12. HTML5 and IE (announce those elements)
[codesyntax lang=”css”]
header, footer, article, section, nav, menu, hgroup { display: block; }
[/codesyntax]
[codesyntax lang=”javascript”]
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");
[/codesyntax]
13. The h group
[codesyntax lang=”html4strict”]
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>
[/codesyntax]
14. Required attribute
[codesyntax lang=”html4strict”]
<form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required="required" /> <button type="submit">Go</button> </form>
[/codesyntax]
15. Autofocus
[codesyntax lang=”html4strict”]
<input type="text" name="someInput" placeholder="Douglas Quaid" autofocus="autofocus" />
[/codesyntax]
16. Audio
[codesyntax lang=”html4strict”]
<audio autoplay="autoplay" controls="controls"> <source src="audiofile.ogg" /> <source src="audiofile.mp3" /> <a href="file.mp3">Download this file. (for compatibility)</a> </audio>
[/codesyntax]
17. Video
[codesyntax lang=”html4strict”]
<video> <source src="videofile.ogg" /> <source src="videofile.mp4" /> </video>
[/codesyntax]
18. Video preload
[codesyntax lang=”html4strict”]
<video preload="preload"> <source src="largevideo.ogg" /> <source src="largevideo.mp4" /> </video>
[/codesyntax]
19. Video controls
[codesyntax lang=”html4strict”]
<video preload="preload" controls="controls"> <source src="largevideo.ogg" /> <source src="largevideo.mp4" /> </video>
[/codesyntax]
20. Pattern
[codesyntax lang=”html4strict”]
<form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required /> <input type="submit" /> </form>
[/codesyntax]
21. Attributes support checking
[codesyntax lang=”javascript”]
<script> if (!'pattern' in document.createElement('input') ) { alert("Your brower does not support this attribute!"); // do client/server side validation } </script>
[/codesyntax]
22. Mark
[codesyntax lang=”html4strict”]
<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
[/codesyntax]
23. Articles
[codesyntax lang=”html4strict”]
<article> <a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers">Netscape is dead</a> <br /> AOL has a long history on the internet, being one of the first companies to really get people online..... </article>
[/codesyntax]
24. navigation
[codesyntax lang=”html4strict”]
<nav> <a href="default.php">Home</a> <a href="previous.php">Previous</a> <a href="next.php">Next</a> </nav>
[/codesyntax]
25. Use descriptive tags instead of <div> for layout
[codesyntax lang=”html4strict”]
<header> header </header> <nav> the navigation </nav> <aside> extra information or related links </aside> <article> main content </article> <footer> footer </footer>
[/codesyntax]
26. Canvas API
[codesyntax lang=”html4strict”]
<canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0,0,80,100); </script>
[/codesyntax]
27. Price range
[codesyntax lang=”html4strict”]
<input type="range" name="price" min="100" max="10000" />
[/codesyntax]
Resources :