HTML5 Interview Questions
1 .
What is the use of MathML Element in HTML5?
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.
2 .
Why do we use HTML5?
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
3 .
Explain HTML5 Graphics.
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.
 
<!DOCTYPE HTML>
<html>
  <head>
   <style>
    #mycanvas{border:2px solid pink;}
   </style>
  </head>
  <body>
    <canvas id = “mycanvas” width = “150” height = “150”></canvas>
  </body>
</html>
 
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>
<html>
  <body>
     <svg width = “400” height = “150”>
       <rect width = “400” height = “150” style = “fill:rgb(200,220,255);stroke-width:10;stroke:rgb(0,0,0)”/>
     </svg>
  </body>
</html>
4 .
How many web browsers does HTML5 support?
Most of the latest versions of Apple Safari, Google Chrome, Opera, Edge and Mozilla Firefox are supported by HTML5.
5 .
Which element provides the autocomplete feature in a textbox?
In HTML5 <Datalist> element, provides the autocomplete feature in a textbox.
6 .
What is Microdata in HTML5?
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.
7 .
What is an API and list the API's available in HTML5?
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 SSE
* HTML Geolocation
8 .
How do you optimize a website's assets & reduce page load time?
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
9 .
What is the difference between the SVG and Canvas?
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
10 .
What are the different types of storage in html5? Explain
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.