Html 5 Features And Benefits
Download as PPTX, PDF•4 likes•5,946 views
HTML5 is the new standard for HTML that provides built-in support for audio and video playback without requiring plugins, offline caching capabilities, cleaner code structure, cross-browser compatibility, and mobile-friendly design. It introduces new semantic elements, input types, and removes some deprecated elements from previous HTML versions. While browser support is still evolving, all major browsers support the core functionality of HTML5.
Html 5 Features And Benefits
- 1. HTML5 Name: Amir khanzada ID : 6268
- 3. 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).
- 4. Differences Between HTML4 and HTML5
- 5. Top 5 Benefits of Using HTML5 Built-In Video/Audio Playback Offline Caching Cleaner Code Browser Cross-Compatibility Mobile Optimization
- 6. 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).
- 7. 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
- 8. 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
- 9. 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
- 10. 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
- 11. Browser Support for HTML5
- 12. 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.
- 13. HTML5 Document
- 14. The HTML5 <!DOCTYPE> In HTML5 there is only one <!doctype> declaration, and it is very simple: <!DOCTYPE html>
- 15. 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>
- 16. Removed Elements The following HTML 4.01 elements are removed from HTML5: • <acronym> • <applet> • <basefont> • <big> • <center> • <dir> • <font> • <frame> • <frameset> • <noframes> • <strike> • <tt>
- 17. HTML5 Video
- 18. HTML5 Video Many modern websites show videos. HTML5 provides a standard for showing them.
- 19. Video Formats and Browser Support Browser MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO Update: 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
- 20. HTML5 Audio
- 21. HTML5 Audio HTML5 provides a standard for playing audio files.
- 22. Audio Formats and Browser Support Browser MP3 Wav Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO Update: 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
- 24. 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
- 26. 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.
- 27. HTML5 Semantic Elements • HTML5 offers new semantic elements to clearly define different parts of a web page: • <header> • <nav> • <section> • <article> • <aside> • <figure> • <footer>