What is HTML5 & how is it useful?

HTML5 is not software that has to be installed but rather an up gradation or new version of HTML.

HTML5 introduces many cutting-edge features that enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications.

However, 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.

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.

HTML5 is basically a new version of the language HTML, with new elements, attributes, and behaviors.

It uses a broader set of technologies that enable not only diverse, but also much more powerfully equipped Web sites and applications.

The features and uses of HTML5 are:

  1. Progressive and Semantic Navigation (nav):

The sheer diversity of the number of browsers available across different platforms can sometimes be a bit overwhelming.

However, if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end we can get a good result.

One of the new elements for HTML 5 is the <nav> element which allows you to group links together; resulting in a higher semantic markup and extra structure which may help screen readers.

The ‘nav’ element represents a section of a page that links either to other pages or to parts within the page. Not all the ‘groups’ of links on a page need to be in a nav element; only those sections that consist of major navigation blocks are appropriate for the ‘nav’ element.

2. Common navigation:

Every navigation menu will probably have links in it. But these links are not like the links we see in the main body of the page, which are blue, underlined and distinguishable from the surrounding text. Rather, links in the navigation will stand alone, and their function will be obvious.

  3. CSS Style and Reset:

CSS selection styling is just another one of those simple touches you can add to make your website look more refined and vibrant.

Browsers have different default styles for the elements, so understanding this and getting all of the elements to look the same is important.

 You can either deal with these individually or, if you’re project includes more than just one navigation, use a reset to clear all of the styles and start fresh.

  4. Forms in HTML5:

A look at the improvements to web forms in HTML5:

Constraint validation API, several new attributes, new values for the <input> attribute type and the new <output> element.

The constraint validation API gives you powerful tools for handling custom validation. The API allows you to do things like set a custom error.

The ‘formnovalidate’ attribute can be applied to input or button elements. If it's present, then a form submission validation is disabled.

Here's an example where submitting a form via the ‘Submit’ button requires valid input, but submitting via the ‘Save’ button does not.

5.  Image Optimization:

Images have always been the heaviest component of websites.

Optimizing an image like this would be a real pain because it contains a lot of red colour (which causes more artifacts in JPEG) and noise (which creates awful artifacts in JPEG and is bad for PNG packing).

The goal of a web browser is to pass a noiseless image to the user and then add noise to the image right in the Web browser. This will greatly reduce the downloading time and make the Web page perform better.

6.  Embedding a Video:

In HTML5, embedding a video essentially comes down to using a single tag: <video>.

However, as with any HTML tag; you have a lot of options for parameters.

Here are the essentials within the tag itself.

src: the location and name of the source video- it works the same as the src parameter for the <img> tag.