HTML5 Interview Questions
1 .
What are Waves in HTML ?

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.

2 .
What is HTML5 Drag and Drops ?
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.
3 .
What is Details Tag in HTML5 ?
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.

4 .
What is Dialog Tag in HTML5 ?
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.
5 .
What is Progress Tag in HTML5 ?
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.
6 .
What are the various tags provided for better structuring in HTML5 ?
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. 

7 .
What is SVG ?
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.

8 .
What is Geolocation API in HTML5 ?
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.
9 .
What is image map in html5?
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.
10 .
How to optimize website assets?
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