Fast, Secure, Responsive, Interactive, Stunningly beautiful. These are words that were not associated with the web until HTML5. Html5 is Hypertext markup language version 5 that includes CSS3, and series of JavaScript APIs. What we need of it and what it gives us.
HTML5 introduces many cutting-edge features that enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications. But unlike desktop applications, apps built on the web platform can reach a much broader audience using a wider array of devices. HTML5 accelerates the pace of your innovation and enables you to seamlessly roll out your latest work to all your users simultaneously. HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.
You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. HTML5 is not one big thing; it is a collection of individual features. So you can’t detect “HTML5 support,” because that doesn’t make any sense. But you can detect support for individual features, like canvas, video, or geo-location .
You may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a VIDEO tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the VIDEO tag itself.
Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. HTML5 builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period.HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms today, even if some of your visitors are stuck on IE 6.
In HTML5, there is only one doctype: (— !DOCTYPE html —)
Upgrading to the HTML5 doctype won’t break your existing markup, because obsolete elements previously defined in HTML 4 will still render in HTML5. But it will allow you to use — and validate — new semantic elements.
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.
Many of existing web sites today contains HTML code like this: div id=”nav”, div class=”header”, or div id=”footer”, to indicate navigation links, header, and footer.
HTML5 offers new semantic elements to clearly define different parts of a web page:
Article – Mark up parts of the content that is independent, for instance blog post, article etc.
Aside – Used to mark up relevant additional information, like a sidebar.
Figure – to mark up a photo in a document:
Figcaption – defines a caption for a figure element.
Footer – The counter-part to header; could be used for any footer section per context.
Details – specifies additional details that the user can view or hide on demand
Summary – defines a visible heading for the details element. The heading can be clicked to view/hide the details.
Mark– tag if you want to highlight parts of your text.
Audio – Used for natively including audio in a web page.
Hgroup – Used for grouping several headers, for instance, a main heading and a sub-heading.
Video – Used for natively including video in a web page – lots of interesting work is coming along here in terms of web browser support.
Time – Used to mark up a time or date.
HTML5 New Form Elements
datalist—— Specifies a list of pre-defined options for an input element
keygen—— Specifies a key-pair generator field in a form
output——- Represents the result of a calculation
Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas, video, geolocation, local storage, and more. Google already supports microdata annotations.
Even Microsoft — rarely known for blazing the trail of standards support — supports most HTML5 features in Internet Explorer 9.
HTML5 New Form Attributes
New attributes for Form:
Autocomplete — autocomplete “on” for the form, and “off” for specific input fields, or vice versa.
Novalidate — it specifies that the form-data (input) should not be validated when submitted.
New attributes for input:
autocomplete — form action=”demo_form.asp” autocomplete=”on”
autofocus ——– input type=”text” name=”fname” autofocus
form —— Last name: input type=”text” name=”lname” form=”form1″
formaction —- input type=”submit” formaction=”demo_admin.asp”
formenctype ——- input type=”submit” formenctype=”multipart/form-data”
formmethod — input type=”submit” formmethod=”post” formaction=”demo_post.asp”
formnovalidate input type=”submit” formnovalidate value=”Submit without validation”
formtarget —- input type=”submit” formtarget=”_blank”
list —-for datalist
min and max — specify the minimum and maximum value for an input element
multiple — Select images: input type=”file” name=”img” multiple
pattern (regexp) — specifies a regular expression that the input element’s value is checked against.
Placeholder —- specifies a short hint that describes the expected value of an input field
Required — it specifies that an input field must be filled out before submitting the form.
Step – specifies the legal number intervals for an input element.
Canvas drawing API:
The canvas element and associated API allows you to define an area of the page to draw on, and use JavaScript commands to draw lines, shapes and text, import and manipulate graphics and video, export in different image formats, and a whole lot more. For more on HTML5 canvas, start with HTML 5 canvas – the basics.
Web Sockets:
This API (defined in the Web Sockets specification, separate from the HTML5 specification) allows you to open a continuous connection between a server and a client on a specific port and send data in both directions until the port is closed. This improves the efficiency of web applications a great deal, as data can be continuously and accurately exchanged between client and server without constant page reloads, and without constantly having to poll the server to see if updates are available. Introducing Web Sockets will start you off nicely.
Offline web applications:
HTML5 provides a number of features to allow web applications to run offline. Application Caches allow you to save a copy of all the assets and other files needed to run web applications locally, and Web SQL databases allow you to save a local copy of a web application’s data. Together, these allow you to continue using an application when it goes offline, and then synchronize changes with the master version on the server when the network is available again.
Web Storage:
Cookies allow us some degree of local data storage, but their use is fairly limited. HTML5 Web Storage allows us to store a lot more data, and do a lot more with it.
Web workers:
A common problem encountered by web applications is that their performance suffers when a lot of data processing is required, due to the fact that everything happens in a single thread/process (only one load of processing can happen at once). Web Workers mitigates this problem by allowing us to create background processes to take care of some of the number crunching, allowing the main process to get on with other things.
Geolocation:
The Geolocation specification (again, not a part of the HTML5 specification) defines an API that allows a web application to easily access any location data that has been made available, for example by a device’s GPS capabilities. This allows you to add all kinds of useful location-aware features to your applications, for example highlighting content that is more relevant to your location. New DTD:
Google, Mozilla, Adobe, and other technological leaders agree that the web platform is being built on HTML5, and they are collaboratively pushing the boundaries of browser capabilities. With HTML5, you can deliver new kinds of experiences to your users over the web. It’s no future dream coming to a theater near you in 2015. HTML5 is here, now. Being implemented across all modern browsers.