HTML5 Interview Questions and Answers: A New Standard In Readiness!

Udemy Editor

HTML5 has so many new and improved features that for some web developers, it can feel like learning HTML from the top again. If you’re an up-and-coming web developer, there’s no reason not to start learning HTML5 from scratch – it is the future web standard, after all.

Beginners can find useful information and other resources in this fundamentals of HTML5 course, or this HTML5 for beginner’s course.

If you’re a step ahead and busy studying for your job interview, here are some sample HTML5 interview questions to help you prepare!

What is the origin of HTML5?

In 2004, HTML 4.01 was the standard, remaining stagnant and without updates since 2000. While the Web Hypertext Application Technology Working Group, or WHATWG, were working out a new standard, the World Wide Web Consortium, or W3C, was focusing their own efforts on XHTML 2.0.

In 2006, the two organizations decided to join forces and develop a new web standard for HTML. They are currently working on HTML5.

What are some of the key issues with previous HTML versions that HTML5 is addressing?

One main issue developers of HTML5 are aiming to reduce is the need for so many external plug-ins like Silverlight and Flash. HTML5 also offers improvements to error handling and scripting.

How would you typical HTML5 document look, and what are the primary differences between that, and an older version of HTML?

A basic HTML5 would look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

A notable difference is the DOCTYPE declaration, which has been shortened down in HTML 5 from the lengthy declaration seen in older versions of HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

What are the new form element types introduced in HTML5?

Date
Datetime-local
Time
Color
Email
URL
Range
Telephone
Number
Search

What is the syntax for each of these elements?

<!--DATE TYPE to display a calendar dialogue box-->
<input type="date" name="bday">
<!--DATETIME-LOCAL TYPE to display a calendar with local time included-->
<input type="datetime-local" name="bdaytime">
<!--COLOR TYPE to display a color picker dialogue box-->
<input type="color" name="favcolor">
<!--EMAIL TYPE to display email validation text-->
<input type="email" name="email">
<!--URL TYPE to display URL validation text-->
<input type="url" name="sitename">
<!--RANGE TYPE to display a meter for range control-->
<input type="range" min="0" max="10" step="2" value="6">
<!--TELEPHONE TYPE to allow a textbox to receive telephone numbers-->
<input type="tel" name="mytel">
<!--NUMBER TYPE to create a textbox that displays number range-->
<input type="number" name="quantity" min="1" max="10">
<!--SEARCH TYPE to create a search engine box-->
<input type="search" name="googleengine">

What is the <datalist> element in HTML5? Use it in an example. Are there any limitations to it?

The <datalist> element generates an autocomplete feature for textboxes, with custom options to allow quick and easy user input.

<form action="demo_form.asp" method="get">
<input list="vgcompanies" name="browser">
<datalist id="vgcompanies">
  <option value="Sony">
  <option value="Microsoft">
  <option value="Nintendo">
  <option value="Sega">
  <option value="Valve">
<input type="submit">
</form>

The <datalist> is not supported in Safari, or Internet Explorer versions 9 and earlier.

What are some markup elements that have been added in HTML5?

<article>
<aside>
<audio>
<command>
<details>
<figure>
<figcaption>
<summary>
<header>
<footer>
<mark>
<meter>
<nav>
<progress>
<ruby>
<section>
<time>

Explain HTML5 web storage, and the differences between localStorage and sessionStorage.

HTML5 allows web pages to locally store data in key/value pairs within the web user’s browser, a quicker and more secure method than cookies.

Data stored in the localStorage object has no expiration date, while data stored in the sessionStorage object only lasts a single session; until the user exits their browser.

localStorage object example:

localStorage.lastname="Xiu";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

sessionStorage example:

if (sessionStorage.clickcount)
  {
  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
  }
else
  {
  sessionStorage.clickcount=1;
  }
document.getElementById("result").innerHTML="The user has clicked the button " + sessionStorage.clickcount + " time(s) during this session.";

Before an HTML5 developer uses web storage, they should check the browser support for both the sessionStorage and localStorage objects.

if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

What is the application cache, and what are its benefits?

The application cache generates offline versions of a web application, making it accessible offline. It also improves the site’s performance and speed.

How do you enable the application cache?

To enable the application cache, just add the manifest attribute inside the <html> tag and link to the manifest file. If a web user visits a page with the manifest attribute included, that page will be cached.

N/A

The suggested file extension for manifest files is “.appcache,” as seen in the example above.

What is the manifest file?

The manifest file is a text file that instructs the browser what it should and should not cache when the application cache is enabled. It is made up of three parts:

Cache Manifest: Indicates files to be cached after they are initially downloaded.
Network: Indicates files that require a server connection to load, and will not be cached.
Fallback: Indicates fallback pages in the case a page is not accessible.

Example manifest file:

CACHE MANIFEST
# 2014-01-15 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

What does the canvas element do? Give an example.

The canvas element in HTML5 is used to draw graphics through scripting. This is usually done with JavaScript.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#7D26CD";
ctx.fillRect(0,0,150,75);
</script>

How would you embed an audio file using HTML5?

You can easily embed audio files with HTML5 using the convenient new <audio> tag.

<audio controls>
<source src="examplesong.mp3" type="audio/mpeg">
Your browser doesn't support audio embedding feature.
</audio>

Which file formats does the <audio> tag support? Which browsers support the different formats?

MP3, WAV, and OGG files are supported by the <audio> tag.

The MP3 file format is supported by Chrome, Internet Explorer, Safari, and Firefox 21 running on Windows Vista, Windows 7, Windows 8, and Android devices. It is not supported by other versions of Firefox, or Opera.

The WAV file format is supported by Chrome, Firefox, Safari, and Opera. It is not supported by Internet Explorer.

The OGG file format is supported by Chrome, Firefox, and Opera. It is not supported by Internet Explorer or Safari.