html 5 features and benefits
TRANSCRIPT
HTML5Name: Amir khanzada
ID : 6268
What is HTML5?
What is HTML5?
HTML5 is the new standard for HTML.
The previous version of HTML was – HTML 4.01, came in 1999.
HTML5 is designed to deliver almost everything you want to do online without requiring additional plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated applications that run in your browser.
HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a notebook, notebook or a Smart TV).
Differences Between HTML4 and HTML5
Top 5 Benefits of Using HTML5
Built-In Video/Audio Playback Offline Caching Cleaner Code Browser Cross-CompatibilityMobile Optimization
Built-In Video/Audio Playback
In previous HTML versions, webmasters were forced to use third-party programs, such as Adobe Flash Player, QuickTime or Silverlight, in order to play video and video. This was a messy, archaic method for web-based media playback that often resulted in errors. HTML5 has solved this problem with its full support for video and audio.Here's an example of HTML5 video playback code:<video poster="movie.jpg" controls><source src=”movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the <code>video</code> element.</video>Notice how there are two files in the above code? This allows browsers to choose the one that's compatible. If a visitor's web browser doesn't support .ogg format, it will move on to the next file listed (.mp4).
HTML5 also offers offline caching, meaning visitors can load certain elements on a webpage without an active internet connection – assuming they've visited the site in the past. If a visitor's internet connection happens to go down, he or she can still load core elements of the site.With HTML5, webmasters can define which files visitors' browsers save. Offline caching is something that's entirely new with HTML5.
Offline Cache
Don't you hate looking at a long sheet of messy HTML code? Trying to make even basic changes to a website built with bad code can be a nightmare. HTML5 is designed to offer cleaner code that's not only easier for developers, but also optimized for improved search engine readability. And when search engine are able to 'understand' the content of a website more easily, it usually translates into higher search rankings.
Cleaner Code
A fourth benefit of HTML5 is the simple fact that its cross-compatible with all of the major web browsers, including Firefox, Internet Explorer, Chrome, Safari and Opera. This doesn't necessarily mean that all of these browsers will support every new element introduced in HTML5, but they will be able to read the doctype at the very least.
Browser Cross-Compatibility
If you still need another reason to use HTML5, here's one: it's optimized for the creation of mobile websites and applications. Responsive websites are easily built using HTML5, offering full functionality across all types of devices. Without the need for horizontal scrolling, mobile internet users can browse websites more efficiently.Adobe has since discontinued support for their mobile Flash Player, paving the way for HTML5 to handle interactive tasks on mobile devices.
Mobile Optimization
Browser Support for HTML5
Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
HTML5 Document
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype>declaration, and it is very simple:
<!DOCTYPE html>
Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title of the document</title></head>
<body>Content of the document......</body>
</html>
Removed Elements
The following HTML 4.01 elements are removed from HTML5:• <acronym>• <applet>• <basefont>• <big>• <center>• <dir>• <font>• <frame>• <frameset>• <noframes>• <strike>• <tt>
HTML5 Video
HTML5 Video
Many modern websites show videos. HTML5 provides a standard for showing them.
Video Formats and Browser Support
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox
NOUpdate: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4
YES YES
Safari YES NO NO
Opera NO YES YES
HTML5 Audio
HTML5 Audio
HTML5 provides a standard for playing audio files.
Audio Formats and Browser Support
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox
NOUpdate: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
YES YES
Safari YES YES NO
Opera NO YES YES
HTML5 Input Types
HTML5 Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation.• color• Date• datetime• datetime-local• email• month• number• range• search• tel• time• url• week
HTML5 Semantic Elements
HTML5 Semantic Elements
• A semantic element clearly describes its meaning to both the browser and the developer.
• Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
• Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
HTML5 Semantic Elements
• HTML5 offers new semantic elements to clearly define different parts of a web page:
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure>
• <footer>