The document discusses HTML5 as the latest web standard, emphasizing its simplicity, ease of adoption, and mobile readiness. It outlines the benefits of transitioning to HTML5, which include improved code clarity, cross-browser support, and enhanced security features. The document also details how to convert existing websites to HTML5 by introducing new elements and removing outdated ones.

1. Webinar
The Ideal Web Platform
Cygnet Infotech Pvt. Ltd.

2. HTML 5 – The Ideal Web Platform
• What is HTML 5?
• Why to move to HTML 5 Right now?
• How to convert current websites to HTML5?
• What are New/Removed elements?
• Additional Highlights
• Q&A

3. What is HTML 5?
• New developed HTML Standard
• Fifth revision of the HTML Markup Language
• Simple Technology
• Collection of advanced features, technologies
and APIs
• Increasing strength of interactivity and
connectivity

4. What is HTML 5? - History

5. Why to move to HTML 5 Right now ?
• Easy to adopt
• Simple & Cleaner code
• Impossible to possible
• Most mobile ready tool
• Cross Browser support
• Modern Trend
• Lower Cost and Easier maintenance
• Security
• Its THE future!

6. Easy to adopt
• HTML 5 is very easy to understand, especially for those who have already
worked on html, it is a small upgrade to get the power of HTML 5.

7. Simple & Cleaner code
• HTML5 allows us to write clear,
descriptive and semantic code that
allows a reader to easily separate
meaning from style and content.
• Example

8. Impossible to possible
• Accessible video/audio using HTML tag only
• More faster than before
• No Nasty coding
• See Example

9. Most mobile ready tool
• All Mobile browsers have fully adopted HTML5
• Create fully responsive website
• Uses of mobile devices continue to grow very
rapidly
• Using media queries can make one website for
web browser, tablet, and mobile
• Reduced cost & efforts, Less maintenance
• Example

10. Cross Browser support
• All modern & popular browsers i.e.: Chrome, Firefox, Safari, IE9 and Opera
• For older IE add java script allow to recognized browser to new HTML elements.
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
• Major element support
• Let’s see the browser support chart for well known browsers

11. Ref: http://valiancesolutions.com/blog/

12. Modern Trend
• No one would like to be left behind the
current trends
• Multiple benefits of HTML5 to adopt
• It’s fad..!
• Start to Use and fall in love with it!

13. Lower Cost and Easier maintenance
• HTML5 applications are cheaper to run across multiple platforms
• Improve the productivity
• No need to create special applications for mobile too

14. Security
• Many HTML5 standards made the web safer
• Many of the powerful new APIs unrelated to
providing security are designed to be safer.
• Browser vendors have adopted APIs and
policies that protect the user, such as the
Safe Browsing API, the Content Security
Policy, and XSS filters.

15. Its future! Let's walk with it!
• HTML5 help us to build modern, faster
applications/sites
• More and more companies and development
teams have started to deliver in HTML5

16. Convert current websites to HTML5
• Add / replace tags
• E.g. doctype, header, section, article, embed
tag, footer etc…
• Example

17. New Elements
• <article> Defines an article
• <aside> Defines content aside from the page content
• <bdi> Isolates a part of text formatted in a different direction from other text outside it
• <command> Defines a command button that a user can invoke
• <details> Defines additional details that the user can view or hide
• <dialog> Defines a dialog box or window
• <summary> Defines a visible heading for a <details> element
• <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
• <figcaption> Defines a caption for a <figure> element
• <footer> Defines a footer for a document or section
• <header> Defines a header for a document or section
• <hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
• <mark> Defines marked/highlighted text
• <meter> Defines a scalar measurement within a known range (a gauge)

18. New Elements
• <nav> Defines navigation links
• <progress> Represents the progress of a task
• <ruby> Defines a ruby annotation (for East Asian typography)
• <rt> Defines an explanation/pronunciation of characters (for East Asian typography)
• <rp> Defines what to show in browsers that do not support ruby annotations
• <section> Defines a section in a document
• <time> Defines a date/time
• <wbr> Defines a possible line-break
• <audio> Defines sound content
• <video> Defines a video or movie
• <source> Defines multiple media resources for <video> and <audio>
• <embed> Defines a container for an external application or interactive content (a plug-in)
• <track> Defines text tracks for <video> and <audio>
• <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

19. Removed Elements
• <acronym> • <font>
• <applet> • <frame>
• <basefont> • <frameset>
• <big> • <noframes>
• <center> • <strike>
• <dir> • <tt>

20. Additional highlights
• Storage
• Connectivity
• File Access
• Performance
• Graphics

21. Questions…?

22. Thank You 
Engage with us:
www.cygnet-infotech.com
inquiry@cygnet-infotech.com
Twitter: @cygnetinfotech
Skype: cygnet.infotech-pvt-ltd
INDIA - 2A, Manikyam, Opp Samudra Annexe, Navrangpura, Ahmedabad 380009
Tel: +91-79-30487400; Fax: +91-79-30487422
USA - Mack-Cali Centre III, 140 East Ridgewood Avenue, Suite 415 ST, Paramus, NJ 07652
Tel: +1-201-995-7444; Fax: +1-201-221-8516