1.Basic blocks of HTML 5 page
<!DOCTYPE html> <html> <head> </head> <body> <header> <!-- header content goes in here --> </header> <nav> <!-- navigation menu goes in here --> </nav> <section id="sidebar1"> <!-- sidebar content goes in here --> </section> <section id="main"> <!-- main page content goes in here --> </section> <aside> <!-- aside content goes in here --> </aside> <footer> <!-- footer content goes in here --> </footer> </body> </html>
2. Web Forms 2.0
Input element with new types:
|datetime||A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.|
|datetime-local||A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.|
|date||A date (year, month, day) encoded according to ISO 8601.|
|month||A date consisting of a year and a month encoded according to ISO 8601.|
|week||A date consisting of a year and a week number encoded according to ISO 8601.|
|time||A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.|
|number||This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.|
|range||The range type is used for input fields that should contain a value from a range of numbers.|
|This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.|
|url||This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.|
New output tag in forms.
And additional attributes:
autofocus, required, and placeholder.
3. Some new HTML5 markup elements
<article>, <aside>, <bdi>, <command>, <details>, <figure>, <figcaption>, <summary>, <header>, <footer>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <section>, <time>,
4. What’s Page Visibility API?
The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. When the user minimizes the webpage or moves to another tab, the API sends a
visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it would pause the moment the user looks at another browser, and plays again when the user returns to the tab. The user does not lose their place in the video and can continue watching.
5. HTML 5 Render Engines
6. HTML5 Offline Storage
7. Web page communication cross tabs ?
Use localStorage, window.postMessage
8. Web Workers
A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.
- Prefetching and/or caching data for later use
- Code syntax highlighting or other real-time text formatting
- Spell checker
- Analyzing video or audio data
- Background I/O or polling of webservices
- Processing large arrays or humungous JSON responses
- Image filtering in <canvas>
- Updating many rows of a local web database
Here’s a summary of what Web Workers do and don’t have access to.
- Can use:
importScripts()method (for accessing script files in the same domain)
- Can’t use:
- The DOM
- The worker’s parent page (except via
9. Video tag usage
<video width="640" height="360" controls> <source src=""> </video>
<canvas id="myCanvas" width="200" height="100" > </canvas>
11. Geolocation API
getCurrentPosition, watchPosition, clearWatch
Lat/Lng/alt detection, speed detection, tracking
12. Realtime API
WebSockets and Server-Sent Events