HTML5 Skills

HTML5 Tutorial :

1. HTML5 doctype

<!DOCTYPE html>

2. Figure
    <img src="" alt="About image" />
        <p>This is an image.</p>

3. Small
<small>© Copyright</small>

4. No “type” any more
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. Unnecessary quotes (different from XHTML)
<p class=myClass id=someId> Start the reactor. </p>

6. Content editable
<ul contenteditable="true">
    <li> Break mechanical cab driver. </li>
    <li> Drive to abandoned factory </li>
    <li> Watch video of self </li>

7. Email field
<form action="" method="get">
    <label for="email">Email:</label>
    <input id="email" name="email" type="email" />
    <button type="submit"> Submit Form </button>

8. Placeholder
<input name="email" type="email" placeholder="" />

9. Local Storage (no time limit)
// the localStorage object

// 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).");

10. Session Storage (clear when closing brower)

// the sessionStorage object

// 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.");

11. Header and Footer
this is the header
this is the footer

12. HTML5 and IE (announce those elements)
header, footer, article, section, nav, menu, hgroup {
    display: block;


13. The h group
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>

14. Required attribute
<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>

15. Autofocus
<input type="text" name="someInput" placeholder="Douglas Quaid" autofocus="autofocus" />

16. Audio
<audio autoplay="autoplay" controls="controls">
    <source src="audiofile.ogg" />
    <source src="audiofile.mp3" />
    <a href="file.mp3">Download this file. (for compatibility)</a>

17. Video
    <source src="videofile.ogg" />
    <source src="videofile.mp4" />

18. Video preload
<video preload="preload">
    <source src="largevideo.ogg" />
    <source src="largevideo.mp4" />

19. Video controls
<video preload="preload" controls="controls">
    <source src="largevideo.ogg" />
    <source src="largevideo.mp4" />

20. Pattern
<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" />

21. Attributes support checking
if (!'pattern' in document.createElement('input') ) {
    alert("Your brower does not support this attribute!");
    // do client/server side validation

22. Mark
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23. Articles
    <a href="">Netscape is dead</a>
    <br />
    AOL has a long history on the internet, being one of the first companies to really get people online.....

24. navigation
    <a href="default.php">Home</a>
    <a href="previous.php">Previous</a>
    <a href="next.php">Next</a>

25. Use descriptive tags instead of <div> for layout

    the navigation

    extra information or related links

    main content


26. Canvas API
<canvas id="myCanvas"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';

27. Price range
<input type="range" name="price" min="100" max="10000" />

Resources :

HTML5 Grayscale Image Hover


Posted in DHTML | Tagged | Leave a comment