HTML 5 tutorials Part 4 - Introduction to HTML5

Initial 3 parts Part1, Part 2 and Part 3 we talked about the basics of HTML. I know most of the developers usually know about this stuff but it is always to brush up the basics before talking about the new stuff.

From this part we will start more on HTML5. First question that come to mind is what are the problems that are being solved by HTML5?

What is HTML5?

HTML5 is combination of new html elements and lots of new JavaScript APIs. I know this not a definition you were expecting but in reality this is it. So do we really need to call it HTML5? I think we can just say HTML as there will be new development but I guess there won't be any HTML6. It will be called on HTML.

Problems solved by HTML5

SEO

Previous we use one tag mostly in the web page design, I guess you know it is div. So for search engine to identify different parts of the page is by scanning the ids. So we need to keep consistent ids across the web pages. How this is solved by HTML5?

HTML5 provide us different html tags like header, main, footer which are used to specify the header content, main content and footer content of the page. Which makes is easy for the search engines to find specific contents of the page. It provides semantics for the web pages.

Mobile Friendly

Billions of people are now using mobile device and we want to make sure that our web pages are more suitable for mobile. If you open up a web page on mobile than you get an option to make the web page mobile friendly and read in mobile mode. As soon as you click on this option the web page completely change the design as per the mobile form factor. So it is easy to develop the web page for vast variety of mobile form factors.

Multi Media

HTML5 provide tags which can be used to host the multi media content like music, video, graphs and games. Now developer can develop a full fledged  game only in HTML5 and supporting CSS3 and javascript. So we do not need to use Flash or Silverlight to show videos or animated stuff on web pages. 

we will discuss these features in details as we move along the tutorials. I am sure there are other many important things which can be done easily in HTML5. Please add these to comments to share with others.

So here is the basic structure of HTML5 page that you can see.

There are many new elements and APIs available in HTML5 and the browsers does not support all the features. You can go to caniuse website to check whether you can use a particular feature on specific browser or not.

The above structure show the basic elements constitutes the structure of a web page there are many more elements which can be used in the structure of html page which we will discuss in future posts.

There are html elements which have JavaScript apis like Canvas, video, audio.

There are elements which can be used to support the form structure and elements which are used to show the visuals like progress bar using the progress element. math element can be used to render a math formula and make sure it is visually appear as math formula.

There are elements which are used for user inputs like datalists which can used to show the editable dropdown lists.

 These are the basic HTML elements in HTML5 but there are lot of enhancements in the JavaScript side as well. I will list down the different JavaScript feature in the different categories.

New Javascript APIs

Graphics and Typography using the Canvas and Web animations. Now animations are done using JavaScript APIs and CSS animations.

Interations, Events and Messaging APIs include apis like Battery Status, Clipboard and events apis which helps with access to the clipboard and cross document messaging help in sending messages to one page to other. Device and screen orientation apis help in finding the current orientation of the mobile device and current screen attributes. We can run the applications in FullScreen mode. Geolocaiton apis help in find the user location. Media capture apis help in native features. There are many other apis which help us to work with mobile devices like notification, and touch.

Storage and file apis helps to work with browser storage using Blobs URLs, File API, File Reader, IndexedDB or Local Storage. IndexedDB can be used to store the data on the browser storage and query it whenever required. Local storage can be used to store the data for a particular session in the browser storage. 

Communication APIs can be used to send messages from server to client. 

Push API can be used to send message to client even if the client browser is running in the background. 

Server-sent events and Web sockets can be used to receive message from server and have two way communication between server and client respectively. 

Web components is term used for Custom Elements which can used to encapsulate standard html markup. We will discuss more about this in future posts. 

Shadow DOM is way to encapsulate html markup. Another way is using the templates which can be used to define a html markup and easily fill it with data before rendering it on the web page.

So there is a lot of stuff we have to go through. So we know one thing that we need to care about in web applications is Performance. We do not want our web pages to be slow right. So HTML5 provide us different APIs to measure the performance of the page. 

High resolution time apis to measure time with millisecond accuracy. For page loads we can use Navigation timing apis to check the page load. 

Page Visibility api can be used to check the active state of the page like which the video is paused. Web workers can be used to create a separate thread to run some background threads which are separate from the main thread.

With performance we want to make sure that our pages are secure and users privacy is intact. Basic attack in web pages is XSS. 

We can use Content security policy to create white-list of the sources of pages. 

Referrer policy can be used to set the amount of data. 

Web Cryptography can be used to encrypt the content completely on the use web browser.