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 :
HTML5 Grayscale Image Hover
end
