HTML 5 Features

CODING

We provided brief explanation of HTML 5 in our article here and below are mentioned main features that HTML5 specifications contains.

Flexible Box Model and Multi-Column Layout

You can use two new methods to create table-like layouts in HMTL5 and CSS3

New Flexible Box Model allows you to structure data into multiple rows or columns within a new display: box object.

You can organize data into multiple columns with different height and width with the multi-column layout

- Advertisement -
- Advertisement -

New User Interface Tags

HTML5 has several new UI user interface tags that can be used for richer experience.

They include:

  • mar - for higlighting
  • meter and progress - for displaying and moving progress bar
  • figure and figcaption - to provide new details to images

WHATWG has also used this opportunity to deprecate older HTML tags that have become obsolete or are simply better implemented in CSS. Some tags, e.g. font, center, frame, strike, tt, u are now ignored

New CSS3 Visual Enhancements

For CSS3, there are easier ways to locate and isolate individual tags to apply custom styles in your website. You can even create atractive 2D and 3D animations, transformations, transitions...

jQuery, Browser Events, and Custom Data Attributes

With JavaScript and jQuery library in HTML5, you can use custom data attributes, dynamically toggle (hide and show) sections of HTML code in order to create richrer user experience.

Intelligent Form Inputs

In HTML5, you can instruct the browser to restrict input fields to specific formats (e.g. numbers only, dates, email address validation...) HTML 5 supports even custom pattern and matching rules for formats restrictions.

Drag-and-Drop Events

HTML5 allows reach interaction with users using a combination of events, JavaScript and CSS. Drag and drop feature makes creating web games and applications much easier.

Canvas Graphics

With the Canvas API you have full control over pixels, animation, color. It actually represents a blank canvas for creating elements. Canvas API competes agains Adobe

Flash and many mobile platform abandoned Adobe Flash u korist HTML5. The Canvas API in HTML5 even has WebGL, an experimental specification for 3D graphics.

Built-in Audio/Video Support

The new HTML5 multimedia support is designed to replace Flash movies and multimedia. You can easily created multimedia content and reach HTML5 audience although different HTML5 browsers support different file encoding formats (codecs)

Storage Databases

HTML 5 introduces the Web SQL and IndexedDB APIs as relational databases and reimplements cookies as the Web Storage API.

Geolocation

Today, many browsers and devices have HTML5 web browsers so Geolocation API can be integrated into applications and services and provide information and guidance based on the user's physical location.

Offline Detection and Synchronization

HTML5 provides ability to create web applications capable to detect whether they are connected to Internet and, if not, tells the web browser to get website from internal app cache. After the connection is established again all data can be synchronized.

- Advertisement -

WebSockets

WebSockets represents low-level, persistent chanels for communication between a web browser and web server. WebSockets are designed to be more efficient than Ajax because it uses its own dedicated protocol and channel.

Web Workers

In contrary to JavaScript, a synchronous, signle-threaded environment, where only one script can run at a time, Web Workers are a new way to produce multiple threads that asynchronously run as separate scripts. Threads can communicate with each other, so you can optimize applications/websites to have responsive user interface sending CPU intensive process to the background.

Notifications

The Notifications API was developed by Google for displaying new email notifications on Gmail. It enables you to pop up subtle display notifictions outside of the web browser itself. It is available only in browsers based on WebKit (e.g. Chrome).

The Chrome Inspector

The Chrome Inspector, a debugger builtin into the Chrome browser, provide features for examination and manipulation of HTML, CSS and JavaScript code. It can also audit a site for resource and network activity.

- Advertisement -