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