Social Network for Web Professionals

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

There isn’t exactly complete list of features in HTML5 as the language is still in development phase which is known to complete somewhere around 2014.  Right now this is living technology which is going through major changes and new features; however there is wide support from latest web and mobile browsers. HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.  Here we will list some of the stable features of HTML5.  

The Semantic Layout

HTML5 Semantic LayoutSounds complicated but actually it isn’t, semantic layout is group of tags that make coding easier to understand and edit, for example these are logically grouped tags web page headers and footers can be wrapped in <header> and <footer> tags; navigation can use <nav> tags; sections are enclosed in <section>; and actual  article content is written within <article> tags.

New User Interface Tags

WHATWG has deprecated older HTML tags that have become obsolete or were implemented in CSS. Tags like <center>, <frame>, <font>, <strike>, and <u> are now ignored. Instead of this, HTML5 introduces a few user interface (UI) tags that you can be used to make browsing website a better experience. New features incorporate <figure> and <figcaption> for providing new details to images, <mark> for highlighting and <meter> and <progress> to display a moving and static progress bar.

CSS3 Visual Enhancements

CSS permit to modify any HTML element’s dimensions, font, colors, image, alignment, and layout. With CSS3, there are actually simpler methods to find and isolate specific tags to apply these customized styles in a website. You can also create 2D and 3D transformations, transitions, and even animations.

Flexible Box Model and Multi-Column Layout

Two new methods allow developing “table like” layouts in HTML5 and CCS3. The Flexible Box Model allows you to arrange website page data into multiple rows or columns inside a new display: box object. The multi-column layout allows you to construct data into multiple columns of variable height and width.

Intelligent Form Inputs

Form input fields enable your users to submit data back to your website. In HTML5, is not possible to instruct the web browser to restrict input fields to specific formats. For instance, enforcing numbers only, email addresses, URLs, etc.  You can even specify custom pattern-matching rules for obscure format restrictions. In HTML 4.01 and earlier this was a tough call, you had to sanitize data inputs in JavaScript or with web server code and in some cases the only way to do that is through regular expression.

jQuery, Browser Events, and Custom Data Attributes

In HTML5 is possible to alter web browser events, use custom data attributes, and dynamically hide and display entire sections of HTML code, excellent way to produce a dynamic user experience. jQuery is well suited for simplifying the flow of HTML5 events and custom data attributes within JavaScript, as JavaScript might be affected because of the browser.

Canvas Graphics

The Canvas API gives you full control over every single pixel, animation, color, and user interaction with the web browser; it is practically a blank canvas to develop anything.  The Canvas API was developed to compete directly with Adobe Flash, providing all logic inside the trusted and open confines of JavaScript. Practically Canvas API is complete replaced of Flash suitable for mobile web and applications. The Canvas API is restricted to 2D graphics and plotting, however HTML5 does have an experimental specification called WebGL that can generate enhanced 3D graphics

Audio/Video Support

The new audio and video support built into HTML5 replaces Flash movies and multimedia. However, different HTML5 web browsers support different file encoding formats or/and codec — it is possible easily create content and convert it into the needed formats to reach the widest-possible HTML5 viewers.

Drag-and-Drop Events

Implementing a mixture of HTML5 events, CSS and JavaScript, you can have interaction with the user in ways only encountered directly on the desktop. With drag-and-drop interface, it is possible to allow users to use their mouse or touch-screen to visually interact with website or application.  Eventually, by pairing drag-and-drop events, video, audio and the Canvas API, you have everything you require to develop HTML5 web apps and even games.

Storage Databases

Since the dawn of web, cookies have been used as a method to keep information on the user’s internet browser. Simply because a cookie is composed of only simple key/value data bits, web developers have had to work with smart methods so that they could manage more complex data structures. HTML5 re-implements cookies as the Web Storage API; it is going to another level by presenting the Web SQL and IndexedDB APIs as relational databases.

Offline Detection and Synchronization

HTML5 gives you the ability to develop a web application that will identify if it is connected on-line and or else, instruct the internet browser to get access to website from its internal app cache. While the user returns online, all data that is new on the cache may be instantly submitted and resynchronized with your web server application. This successfully creates the feeling that web app is constantly accessible, no matter of whether or not the internet is on or off. This can be very useful option for HTML5 games.

Geolocation

Latest smart phones comes with build-in mobile web browser that supports HTML5, it is possible to leverage the Geolocation API and present information and direction based on the user’s physical location. These details can easily be associated with other third-party services, such as Google Maps and Bing Maps, to deliver an immediate overhead map of the surrounding area.

Web Workers

JavaScript is a synchronous, single-threaded environment. Only one script can run at the same time on your web page. Web Workers are a new way to produce various threads with the JavaScript runtime environment, all running as independent scripts asynchronously. Every thread has the functionality to communicate to the others inside the JavaScript stack, allowing you to offload a CPU process in the background but keep user interface free and responsive.

WebSockets

Ajax is a technology that put together an asynchronous XML request towards the server over the HTTP protocol; WebSockets are intended to be extremely effective, utilizing their own dedicated channel and protocol. WebSockets were created to be low-level continual connection channels between a web server and web browser.

Notifications API

The Notifications API allows to pop-up simple screen notification messages outside of the web browser. This Notifications API originated from Google for the goal of displaying new email notifications from Gmail. This API exists only in WebKit-based internet browsers, such as Chrome and Chromium. Dissimilar to pop-up windows, that has seriously affected the Internet; this feature is off by default and can be enabled only if requested on a per-domain basis.