HTML5 Quick Guide

User Manual: Pdf

Open the PDF directly: View PDF PDF.
Page Count: 62

Scroll down to view the document on your mobile browser.
http://www.tutorialspoint.com/html5/html5_quick_guide.htm Copyright © tutorialspoint.comHTML5 - QUICK GUIDEHTML5 - QUICK GUIDEHTML5 - OVERVIEWHTML5 - OVERVIEWHTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, andXHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.HTML5 is a cooperation between the World Wide Web Consortium W3C and the Web HypertextApplication Technology Working Group WHATWG.The new standard incorporates features like video playback and drag-and-drop that have beenpreviously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight,and Google Gears.Browser SupportThe latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support manyHTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all haveexcellent support for HTML5.New FeaturesHTML5 introduces a number of new elements and attributes that helps in building a modernwebsite. Following are great features introduced in HTML5.New Semantic Elements − These are like <header>, <footer>, and <section>.Forms 2.0 − Improvements to HTML web forms where new attributes have been introducedfor <input> tag.Persistent Local Storage − To achieve without resorting to third-party plugins.WebSocket − A a next-generation bidirectional communication technology for webapplications.Server-Sent Events − HTML5 introduces events which flow from web server to the webbrowsers and they are called Server-Sent Events SSE.Canvas − This supports a two-dimensional drawing surface that you can program withJavaScript.Audio & Video − You can embed audio or video on your web pages without resorting tothird-party plugins.Geolocation − Now visitors can choose to share their physical location with your webapplication.Microdata − This lets you create your own vocabularies beyond HTML5 and extend yourweb pages with custom semantics.Drag and drop − Drag and drop the items from one location to another location on a thesame webpage.Backward CompatibilityHTML5 is designed, as much as possible, to be backward compatible with existing web browsers.New features build on existing features and allow you to provide fallback content for olderbrowsers.It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.
If you are not familiar with any previous version of HTML, I would recommend to go through ourHTML Tutorial before you explore further concepts of HTM5.HTML5 - SYNTAXHTML5 - SYNTAXThe HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1documents published on the Web, but is not compatible with the more esoteric SGML features ofHTML 4.HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names,quoting our attributes,an attribute had to have a value and to close all empty elements.But HTML5 is coming with lots of flexibility and would support the followings −Uppercase tag names.Quotes are optional for attributes.Attribute values are optional.Closing empty elements are optional.The DOCTYPEDOCTYPEs in older versions of HTML were longer because the HTML language was SGML basedand therefore required a reference to a DTD.HTML 5 authors would use simple syntax to specify DOCTYPE as follows −<!DOCTYPE html>All the above syntax is case-insensitive.Character EncodingHTML 5 authors can use simple syntax to specify Character Encoding as follows −<m eta charset="UTF-8">All the above syntax is case-insensitive.The <script> tagIt's common practice to add a type attribute with a value of "text/javascript" to script elements asfollows −<script type="text/javascript" src="scriptfile.js"></script>HTML 5 removes extra information required and you can use simply following syntax −<script src="scriptfile.js"></script>The <link> tagSo far you were writing <link> as follows −<link rel="stylesheet" type="text/css" href="stylefile.css">HTML 5 removes extra information required and you can use simply following syntax −<link rel="stylesheet" href="stylefile.css">HTML5 Elements

Navigation menu