HTML5: List of New Features
1. In HTML5, there is only one <!doctype> declaration: <!DOCTYPE html>
2. HTML5 is totally based on HTML, CSS, DOM, and JavaScript.
3. HTML5 includes new elements for better structure, better form handling, drawing, and for media content.
4. HTML5 has much more markups to replace scripting.
5. HTML5 has new form controls, like calendar, date, time, email, url, search.
6. HTML5 has new content-specific elements, like <article>, <aside>, <footer>, <header>, <nav>, <section>, <details>, <summary>, <figure>, <progress> etc.
7. Media Elements: HTML5 eliminates the need of Flash. HTML5 has added new media elements like <video>, <audio>, <source>, <embed>, <track> for media playback.
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The control attribute adds audio controls, like play, pause, and volume.
You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.
The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.
8. Canvas Element: HTML5 has <canvas> element for 2D drawing. The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
You can use following javascript code to draw a 2 dimensional rectange and fill it with red color:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
The default fillStyle is #000000 (black).
The default fillStyle is #000000 (black).
9. Local Storage: HTML5 supports local storage and replaces the need of cookies. With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself.
10. HTML5 Web Worker Feature: A web worker is a javaScript running in the background, without affecting the performance of the page. When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a javaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
11. HTML Server-Sent Events(SSE) Feature(One Way Messages): A server-sent event is when a web page automatically gets updates from a server. This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
12. HTML5 Application Cache Feature: HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
- Offline browsing - users can use the application when they're offline
- Speed - cached resources load faster
- Reduced server load - the browser will only download updated/changed resources from the server
13. Geolocation: HTML5 supports Geolocation API which is used to get the geographical position of a user.
14. Drag and Drop: HTML5 supports Drag and Drop feature.
15. SVG: HTML5 has support for inline SVG(Scalable Vector Graphics).
16. HTML5 is device independent.
17. HTML5 has better error handling.
18. Removed Elements: HTML5 has removed <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike> and <tt> elements.
No comments:
Post a Comment