HTML5 – Interview Questions and Answers

Preparing for an interview for a web developer or MEAN stack developer? Along with the JavaScript and other client-side and server-side technologies, developers are asked about HTML5 basic topics too. So, here are some important topics and questions that are frequently asked in an interview and the concepts that a developer must know about HTML5.

1) Once an application is offline, it remains cached until the following happens?

  a) The manifest file is modified.

  b) The application cache gets automatically cleared by the browser.

  c) The application cache is pro-grammatically updated.

  d) The user clears their browser’s data storage for the site.

Answer – A C and D


HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Using the cache interface gives your application three advantages:

Offline browsing – users can navigate your full site when they’re offline

Speed – resources come straight from disk, no trip to the network.

Resilience – if your site goes down for “maintenance” (as in, someone accidentally breaks everything), your users will get the offline experience
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they’re offline.

The cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.

Referencing a manifest file
To enable the application cache for an app, include the manifest attribute on the document’s html tag:

<html manifest=”example.appcache”>


The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself. This means that any page the user navigates to that includes a manifest will be implicitly added to the application cache. Thus, there’s no need to list every page in your manifest. If a page points to a manifest, there’s no way to prevent this page being cached.

Note: “/page-url/”, “/page-url/?something”, “/page-url/?something-else” are considered separate pages.

You can see the urls that are controlled by the application cache by visiting chrome://appcache-internals/ in Chrome.

A manifest file must be served with the mime-type text/cache-manifest

This requirement was dropped from the specification some time ago, and no longer required by the latest versions of Chrome, Safari and Firefox, but you’ll need the mime-type to work in older browsers and IE11.

Structure of a manifest file


There are a couple of things to note:

The CACHE MANIFEST string is the first line and is required.
Files can be from another domain
Some browsers place restrictions on the amount of storage quota available to your app. In Chrome for example, AppCache uses a shared pool of TEMPORARY storage that other offline APIs can share. If you are writing an app for the Chrome Web Store, using the unlimitedStorage removes that restriction.
If the manifest itself returns a 404 or 410, the cache is deleted.
If the manifest or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.

2) What is the internal format of input type=”date” in HTML5?





Answer – B

3) Which of the following method can be used to estimates the page load times?

  a) Using _gap.push([“_trackPageLoadTime”]) with Google Analytics.

  b) Page load times cannot be estimated.

  c) Using the Navigation Timing JavaScript API.

  d) Using built-in JavaScript methods.

Answer –  A, C and D

4) Assuming that some text needs to be written on an HTML5 canvas, select a replacement for the commented line below:

<canvas id="e" width="200" height="200"> </canvas>
  var canvas = document.getElementById("e");
   // insert code here
  context.fillStyle = "blue";
    context.font = "bold 16px Arial";

  a) var context = canvas.getContext();

  b) var context = canvas.getContext(“2D”);

  c) var context = canvas.getElementById(“context”);

  d) var context = canvas.getElementById(“2D”);

Answer – B

5) Which of the following is a possible way to get the fullscreen video played from the browser using HTML5?

  a) <object> <param name=”allowFullScreen” value=”true” />

  b) <video allowFullScreen=”true”>

  c) <video height=”100%” width=”100%”>

  d) None of these.

Answer – C

6) The following are valid use cases of client file/directory access in HTML5, except?

  a) Drag and drop files from the desktop.

  b) Full file system access.

  c) Use of the HTML5 File API.

  d) Use of files as HTML5 input types.


7) When does the ondragleave mouse event get fired in HTML5?

  a) It gets fired when an element has been dragged to a valid drop target.

  b) It gets fired when an element leaves a valid drop target.

  c) It gets fired at the end of a drag operation.

  d) It gets fired while an element is being dragged.

Answer – B

8) Given following HTML and CSS, what will be the height of parent element having “wrap” class?

  .wrap{ box-sizing: border-box; }
  .col{ height:100px; margin:20px;}

<div class="wrap">
  <div class="col"> </div>
  <div class="col"> </div>

  a) 260px

  b) 140px

  c) 220px

  d) 280px

Answer – C

9) Which CSS2 selector, selects all Button elements that have a space separated list of values for attr where one of those values is equal to the given value?

  a) button[attr~=value]

  b) button[attr^=value]

  c) button[attr|=value]

  d) button[attr=value]


10) Which of the following CSS rule would make all h3 tags that are immediately preceded by a section tag italic?

  a) section~h3 {font-style: italic;}

  b) section>h3 {font-style: italic;}

  c) section+h3 {font-style: italic;}

  d) section h3 {font-style: italic;}

Answer – B

11) What is the use of data list in HTML5?

  a) Enables a tag contain additional data(meta data).

  b) Provides autocomplete feature in a textbox.

  c) Provides SEO friendly markup for page context.

  d) The alternate markup for building accessible lists.

Answer – B

12)  Generally, quirks mode could be turned on when there is:

  a) NO or Incorrect DOCTYPE declaration.

  b) Spaces or illegal chars before DOCTYPE

  c) Invalid HTML – with respect to the chosen DOCTYPE

  d) All of the above

Answer – A and C


Quirks mode also known as Compatibility Mode – means your page is running without a document type declared(this is old school, so this is most likely not needed anymore) The whole
point of quirks mode is that it’s a compatibility mode for IE5

Modern browsers generally try to render HTML content according to the W3C recommendations. However, to provide compatibility with older web pages, and to provide additional “intuitive” functionality, all browsers support an alternative “quirks mode”.

Quirks mode is not, however, a standard. The rendering of any page in quirks mode in different browsers may be different. Whenever possible, it is better to adhere to the W3C standards and try and avoid depending on any past or present browser quirks.

Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML – with respect to the chosen DOCTYPE – can also cause the browser to switch to quirks mode.

13) Which CSS rule would make the fourth list item underlined if the list had a fourth item?

  a) ul li:nth(4th) { text-decoration:underline; }

  b) ul li:nth-child(4) { text-decoration: underline; }

  c) ul li:4th-child { text-decoration: underline; }

  d) ul li:nth-of-type(4) { text-decoration: underline;}

Answer – B

14) Which property specifies whether the mask should scroll or stay fixed the page is scrolled?

  a) mask-clip

  b) mask-repeat

  c) mask-attachment

  d) mask-image


15) The property defines whether or not an ellipsis should be displayed when content overflows a region?

  a) text-overflow

  b) overflow-style

  c) content-overflow

  d) overflow

Answer – D



The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (…), or display a custom string.

Both of the following properties are required for text-overflow:

white-space: nowrap;
overflow: hidden;

div {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: ellipsis;

16) Which rule is used to define the properties that will be animated in an animation rule?

  a) @transition

  b) @key

  c) @keyframes

  d) @animation

Answer – C



The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

@keyframes mymove {
from {top: 0px;}
to {top: 200px;}

17) What is the attribute used in the <video> element, that is set to the URL of an image that the browser will use in place of the video before it is loaded and playing?

  a) placeholder

  b) poster

  c) banner

  d) preload

Answer –  B



<video width=”320″ height=”240″ poster=”/images/w3html5.gif” controls>
<source src=”movie.mp4″ type=”video/mp4″>
Your browser does not support the video tag.


Further Readings

console.log : Stylize console logging in browser
console.log()¬†method logs any string to console window of the browser. But you know, there is a way to provide style to string message even we can draw images ūüėČ like in¬†facebook¬†prints in console window
facebook styled console log message

Here is console.log signature

 console.log(msg [, subst1, ..., substN]);
The first parameter is the message that you want to print in the console and the second parameter is the array of format style properties like font-color,font-size etc. This gives you additional control over the format of the output.

So to print the message like Facebook does. Here is the code

console.log("%cStop!", "color: red; font-family: sans-serif; font-size: 4.5em; font-weight: bolder; text-shadow: #000 1px 1px;");

Even we can draw images like this

(function(url) {
  // Create a new `Image` instance
  var image = new Image();
  image.onload = function() {
    // Inside here we already have the dimensions of the loaded image
    var style = [
      // Hacky way of forcing image's viewport using `font-size` and `line-height`
      'font-size: 1px;',
      'line-height: ' + this.height + 'px;',
      // Hacky way of forcing a middle/center anchor point for the image
      'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',
      // Set image dimensions
      'background-size: ' + this.width + 'px ' + this.height + 'px;',
      // Set image URL
      'background: url('+ url +');'
     ].join(' ');
     console.log('%c', style);
  // Actually loads the image
  image.src = url;
The above code will draw image in the console like this
image in console window of browser

For more detail on console.log

Javascript Interview Questions

After javascript can be executed on the server side, it has become very popular. So for better understanding and quality code, there are few concepts that a developer must know. So here are javascript interview questions generally asked in the interviews

1) What is event bubbling and capturing?

2) Best practices in javascript?

3) How to reduce the loading time of web page without concerning too much refactoring?

4) If two div on the page has the¬†same id(“mydiv”) then getelementbyid(“mydiv”) will refer to ?

5) How to handle large JSON on UI if rendering is slow?

6) The result of accessing undeclared variable?

7) Parent/Child communication in javascript ?

8) How to make Ajax call?

9) What is setTimeout?

10) What are closures?

11) What is a prototype in javascript?

12) Scope in javascript?

13) How to define the class in javascript?

14) How can promises be implemented in javascript?

15) # and ! in URL?

16) What are callbacks?

17) Suppose we have an error in production which is not producible on Local and we don’t have access to the production and we have only minified file the production then how you can track the error?

18) What is async and defer?

19) How to find the inner classes of a div by using javascript?

20) What is the difference between promise and callback?

21) What is view engine?

22) What are bind filters and reduce map in js?

23) Difference between primitive and non-primitives data types?

24) How javascript interpret DOM that is rendering order or control flow?

25) What is the hoisting?

26) Difference between following two snippets

function abc(){
¬† return ‚ÄúSunil‚ÄĚ
var abc = function(){
¬† ¬†return ‚ÄúSunil‚ÄĚ;
27) Inheritance in javascript?
28) Local scope and block level scope in javascript?

29) What is lexical scope?

Further Reading