Google News
HTML5 Interview Questions
HTML5 (No space between "HTML" and "5")is a markup language used for structuring and presenting content on the World Wide Web. It was published in 28 October 2014, W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016.

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

HTML5 provides following audio tags :

<audio>   - Defines sound content
<video>   - Defines video content
<source> - Defines multiple media resources for media elements, such as <video> and <audio> 

This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference the main flow of the document.

The new Form elements in HTML5 offers much better functionality than the earlier versions.

The tags given provided to carry out these functions are :

1) <datalist> – This tag is use to specify a list of options for input controls.

2) <keygen> – This tag represents a key-pair generator field.

3) <output> – It represents the result of any scripting calculation.

Following are the important, new data types offered by HTML5 :

  1. date : It allows the user to select a date.
  2. datetime-local : This input type allows the user to select a date and time without time zone.
  3. datetime : This input type allows the user to select a date and time with time zone.
  4. month : It allows the user to select a month and year
  5. email : These input fields used to contain an e-mail address.

Some drawbacks in cookies there are following  :

  • Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.

  • Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.

  • Cookies are limited to about 4 KB of data . Not enough to store required data.

The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies. TheWHATWG was founded by individuals from Apple, the Mozilla Foundation and Opera Software in 2004.

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM (Document Object Model) events continuously from your web server to the visitor's browser.

The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling.

Server-sent events standardizes how we stream data from the server to the client.

A sine wave is a mathematical function that is repeats at a regular interval of time. The function is used in many fields including mathematics, physics, and engineering. We can also say that a sine wave is a smooth wave.

It has the following properties :

  1. The sine wave is blue whenever the value is positive.
  2. The sine wave is red whenever the value is red.
  3. The thickness of the line is directly proportional to the absolute value of the magnitude of the wave. For example, where the sine value reaches 0, the wave is absent.

On the X-axis, we will map the angle Theta. Theta will vary from 0 degree to 1040 degrees.

On the Y-axis, we will map the sin (Theta). For this, we will use the Math function Math.sin. The Math.sin function takes angles in radiants. So the angle is first multiplied by PI / 180.

At every stage of the drag and drop operation a different event is fired so that the browser knows what JavaScript code to execute; the events are:

dragStart   :-     fires when the user starts dragging the element.
dragEnter   :-     fires when the draggable element is first dragged over the target element.
dragOver   :-      fires when the mouse is moved over an element when the drag is occurring.
dragLeave  :-     fired if the user’s cursor leaves an element when dragging.
drag   : -     fires every time we move the mouse during the dragging of our element.
drop   : -      fired when the actual drop is performed.
dragEnd  :-  fires when the user releases the mouse while dragging the object.
The HTML <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

The HTML <dialog> tag indicates a part of an application that the user can interact with. Examples of dialog could include a dialog box, inspector, or window.

The <dialog> element accepts a boolean attribute called open that sets the element to "active" and allows users to interact with it.
The PROGRESS Element is used to show the completion or progress of a specific task.

We often see on the website, while downloading some text or video,  music files and even on uploading some contents on the Internet, a progress bar comes before us and displays its current progress or completion of specific tasks.
The various tags provided for better structuring in HTML 5 are:

<article> - This tag defines an article.
<aside>   - It defines content other than the page content.
<bdi>       - This tag isolates a part of text for formatting in a different direction from other text.
<command>   -  It defines a command button to be invoked by the user.
<details>         -  It defines additional details that can be viewed or hidden by the user.
<dialog>         -  It defines a dialog box.
<figure>          -  This tag specifies content like illustrations, diagrams, photos, code listings, etc.
<figcaption>  -  It is used to provide a caption for a <figure> element
<footer>         -  This tag defines a footer for a document or section
<header>       -  This tag is used to define a header for a document or section
<hgroup>       -  When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements. 

a.  SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
b.  It is used to define vector-based graphics for the Web. All the element and attributes of SVG files can be animated.
c.  The graphics are defined in XML format.
d.  An important quality of SVG graphics is that their quality is maintained even when they are zoomed or resized.

The geolocation API allows you to easily fetch the geographical position of a user. If the browser support Geolocation API, one can easily get the Longitude and Latitude just using Javascript. The Geolocation API uses  multiple sources to determine the most accurate position of the user.   The location accuray depnds upon the best location source available.
Image maps are a combination of URL and images, where clicking on these images (clickable area of the image) will open different new web pages.
Two types of image maps are available in HTML5, i.e. client side image map and server side image map :
The client-side image map is created by using two elements <area> and <map>, where the map holds the map information and the area element takes the attributes to define each section of the map.

Server-side image map created by using <usemap> attribute, the usemap attribute is the name of our map.
We need to understand some basic optimization rules, in order to optimize website assets. Initially, we should decrease the download size and make fewer http requests.
To optimize website assets we can follow the below techniques :
* File compression
* File concatenation
* CDN Hosting
* Offloading assets
* Re-organizing
* Refining code
The word MathML (Mathematical Markup Language) is a markup language, that is used to show scientific and mathematical expression on the web. MathML is a form of XML (extensible markup language) to describe the Math notation.
We can use <math>…</math> tags inside the HTML5 documents for implementing MathML element.
Example: print a²+2b+5=0 using HTML5 code.
HTML5 supports animation, drawing, audio, video, etc and it easily embeds a video on the web page. It does not require any additional software like Flash for watching videos.
Some of the important reasons to use HTML5 are given below :
* Legacy and cross-browser support
* Better interactions
* Smarter storage
* Cleaner code
HTML5 supports two types of graphics i.e. Canvas and SVG.
a) Canvas : <canvas> element is used to design graphics on the web page, and it has several methods available for drawing circles, boxes, adding images and text. 300 px X 150 px (width X height) is the default pixel size of canvas.
Example to Draw square Box using canvas element is shown below.
    #mycanvas{border:2px solid pink;}
    <canvas id = “mycanvas” width = “150” height = “150”></canvas>
b) SVG : <svg> Scalable Vector Graphics, are mostly used for graphical application and scalable vector type diagrams, such as X, Y coordinate system, two-dimensional and pie charts. This makes it faster and lightweight. SVG follows XML format.
Example to draw a Rectangle using SVG element is shown below.
<!DOCTYPE html>
     <svg width = “400” height = “150”>
       <rect width = “400” height = “150” style = “fill:rgb(200,220,255);stroke-width:10;stroke:rgb(0,0,0)”/>
Most of the latest versions of Apple Safari, Google Chrome, Opera, Edge and Mozilla Firefox are supported by HTML5.
In HTML5 <Datalist> element, provides the autocomplete feature in a textbox.
Microdata is a new simple semantic syntax, that is used to add the nested groups of name and value pair of data to documents, that are commonly based on the page content. Microdata is used for new global attributes.
API (Application Programming Interfaces) in HTML5 is a way to build different applications using pre-built components. Developers can integrate the relevant features of existing APIs into their new websites.
The APIs in HTML5 are :

* HTML Web Workers
* HTML Drag and Drop
* HTML Application Cache
* HTML Local Storage
* HTML Geolocation
Follow these steps to optimize assets and also reduce the page load time of any website :
* Disabling etags.
* Properly naming all assets.
* Using CSS Sprites for Images.
* Minimizing the use of JS in code.
* Using a content delivery network (CDN) for media files.
* Minimizing inline CSS and using internal and external style sheets.
* Hosting assets on different domains while also reducing DNS lookups
* Using a cookie-free domain to place assets and splitting them among domains
Canvas SVG
Resolution dependent Resolution independent
No support for event handlers Provides support for event handlers
Suitable for graphic-intensive Ideal for creating graphics similar to CAD software
Works best for small rendering areas Works even for large rendering areas
In HTML5, data can be stored in 2 ways – session storage and local storage.
Session Storage : The data or details from the current browsing session are stored. Once the browser gets closer by the user, the storage data gets removed.

Local Storage : The data does not get cleared automatically when the user closes the browser.
A web worker in HTML5 is a script that runs on a separate thread in the background without the need for the main web page to wait for it to complete. Web Workers enable long tasks to be achieved without keeping the web page responsive.
The WHATWG stands for Web Hypertext Application Technology Working Group in HTML5. This is an organization which both develops and maintains the HTML and API for web applications.
HTML5 has introduced a way to let designers take charge of the web page area that is visible to the users through tags. The meta tag tells information related to an HTML document. Some of the examples are Link, Style and Title. With meta tag, we can add meta ketwords, meta description and meta title that helps for SEO Purposes.
Yes. Both <header> and <footer> tags are made to fulfill their respective purposes in relation to their parent “section”. So not only can you use both header and footer elements on a page in HTML5, but you can also use both in every <article> or <section>. A <header> tag must be present for all articles, sections, and pages, although a <footer> tag is not necessary.
In HTML 5, the manifest file is a normal text file used for listing resources in the browser which are to be cached for offline access. It also helps in loading resources faster and reducing server load time.
The character set being used by an HTML5 document is indicated using the charset attribute of a <meta> tag inside the <head> element of the HTML5 document :
<!DOCTYPE html>
    <meta charset="UTF-8">
Some of the useful APIs in HTML5 are :
Fetch : Fetch has made Http requests easier than it was with XMLHttpRequest.
Battery status : checks the battery status of the device.
Geolocation : tells the device location.
Clipboard : copy the contents to the clipboard.
Forms : new types have been added for validation and rendering.
Drag and drop : easily drag and drop items in the app.
Screen orientation : Checks the device’s screen orientation.
Web audio : Process audio on the client-side.
Internalization : International formatting and string comparison.
Web sockets : real-time communication between server and client.
This control accepts only URL value and is used for input fields that need a URL address. It will not accept any other values like text input. The accepted formats are : http://www.<webaddr> or http://<webaddr>
The events that flow from the webserver to the browsers are called server-sent events. DOM events can be continuously pushed from the webserver to the browser of a user. To use a server-sent event (SSE), you should add an <eventsource> element to the document. The src attribute of this element describes the HTTP connection location, which sends a data stream having the events.
Example : <eventsource src = "/cgi-bin/myfile.cgi" />
Vibration is a simple, nice way of alert when you get a new message or a phone call. It is especially useful when you are in a noisy environment or the place where you feel the ringing would be a distraction to others.
It is interesting to know that HTML5 is now providing us to play with the vibration on the devices but the HTML5 Vibrate API supports only the recent version of Firefox & Chrome.
To check the vibration, API support in browsers as shown below,

navigator.vibrate = navigator.vibrate || navigator.mozVibrate ||  
navigator.webkitVibrate || navigator.msVibrate;  
if (navigator.vibrate) {  
   // supports vibration API.  

Vibration Syntax : Vibration basic syntax is,
navigator.vibrate(long | [long]);
The vibrate function accepts milliseconds or an array of milliseconds.
// vibrate for 1000 ms  
// same like above but in array of ms  
In the above examples, we are setting the device to vibrate 1000 milliseconds.