html5 interview questions

HTML5, being a hot topic these days, serves as a fulfilling platter to stand out in an interview. The fact is, HTML5 is indeed a great deal to the web. HTML5 is a much more upgraded version of HTML with a bunch of its new and exciting features like:

  • Audio and video media support
  • Persistent local storage 
  • New, easy to implement elements and attributes
  • WebSocket
  • Server-sent events

There are a handful of HTML5 interview questions that an interviewee is most likely to face. So, let’s dig deeper into those questions.

1. What is HTML5?

HTML5 is the latest version of HTML (HyperText Mark-up Language) which is also referred to as World Wide Web (www) primary language. This standard version of HTML has features and behaviours, as well as a larger set of technologies leading to the building of more diverse and powerful web sites and applications. It is a cooperation between W3C(World Wide Web Consortium) and WHATWG( Web Hypertext  Application Technology Working Group). HTML5 actually incorporates three main kinds of code – HTML, CSS and JavaScript to take care of structure, presentation and implementation respectively, hence reducing the requirement of external plugins. 

The advanced features of HTML5 that make it more user-friendly include-

  • Addition of new attributes
  • Addition of new parsing rules in order to enhance its flexibility
  • Supporting Web SQL, i.e. allows implementation of standards for storing data in SQL databases
  • Allowing offline editing
  • Supporting Protocol and MIME handler registration simultaneously
  • Encouragement of semantic(markup)

2. What is HTML5 used for?

HTML5 is a markup language that is used to design the structural layout and format of webpages in World Wide Web. It is the fifth and latest version of HTML, hence it has a good lot of enhanced features and elements in its box for the users and developers. HTML5 is used for designing web content like web pages, sites, applications, advertisements, audio-video contents and games. 

HTML5 has replaced Flash in a quite fast pace and allows to make highly interactive ads and videos without requiring any external plugins, thus it can be said that it has revolutionized the world of web.  

3. What are the building blocks of HTML5?

The building blocks of HTML5 are:

  • Inclusion of canvas and SVG
  • Possess more semantic text markup
  • Supports many new form elements
  • Offers high level audio and video content
  • Supports JavaScript API in the background
  • Has new API for communication
  • Supports geolocation API
  • Supports web worker API
  • Provides efficient data storage in the form of local storage and session storage

4. When was HTML5 released?

HTML5 was published on 22 January, 2008 as a public-facing form. However, it was released as a W3C recommendation on 28 October, 2014 which brought the specification process to completion. Further, HTML5.1 and HTML5.2 were released as recommendations by W3C on 1 November,2016 and on 14 December, 2017 respectively. HTML5 does not only intend to encompass HTML4 but XHTML 1and DOM Level2 HTML also.

5. What is the difference between HTML and HTML5?

HTML5 being the fifth and the last version of HML till now is much more efficient and advanced as compared to HTML:

6. What is the difference between HTML4 and HTML5?

The main differences between the HTML4 and HTML5 are listed below:

7. What is new in HTML5?

HTML5 includes a lot of new features that are quite convenient to implement. New inline elements of HTML5 indicate contents that are-

  • Marked in a definite fashion
  • Time and date
  • Fraction of a certain range
  • Represent progress of any particular task towards its completion

The new features of HTML5 that support making of more dynamic pages-

  • Support creation of  context menus
  • href is no more required on a tag
  • async attribute to allow asynchronous loading of script

 The new form types HTML5 include: datetime, datetime-local, date, month, week, time, number, range, email, url.

HTML5 does not support some elements of HTML4 like acronym, big, dir, etc. HTML5 provides a few new elements like supporting drawing space in JavaScript, adding audio and video to one’s web pages with simple tags.

HTML5 gives a well-defined structure of a web page, including definitions for sections of pages, header & footer of a page, navigation on a page, some primary content or article on a page, images to annotate articles of page, and some extra content like slide bar on the pages.

8. Which browsers support HTML5?

Currently, latest versions of Apple Safari, Google Chrome, Opera and Mozilla Firefox support many functionalities of HTML5. Internet Explorer 9.0 is also intended to have support for HTML features. Besides, the mobile web browsers that come pre-installed on Android phones, iPhones, and iPads, all provide excellent support for HTML5.

9. How to turn on HTML5 in Chrome?

Here are the steps to turn on HTML5 in Chrome by installing the extension from Chrome Web Store (using IDE for example):

  • Choose New Project from File to open New Project Wizard
  • Select HTML5/JS Application in the HTML/JavaScript category and then Click Next
  • Specify the name and location for your project, followed by clicking Next
  • Choose No Site Template > Click on Finish button(index.html is opened in the editor)
  • Confirm integration
  • Click Run in the toolbar
  • Click Go to Chrome Web Store button in the Install Chrome Extension dialog box(Connector page is opened in Chrome)
  • In the connector page, click on Add to Chrome option
  • Now, click Re-Run Project in the dialog box of Install Chrome extension  as the final step

It has been quite long since Google proposed making HTML5 the default language over Flash in Chrome, i.e. Chrome directly syncs to HTML5. However, when it comes to Androids, one can always enable HTML5 in Chrome by changing its settings.

10. How to install HTML5?

No as such installation of HTML5 is required since almost all the modern day web browsers support HTML5 by default. However, a proper text editor to work with HTML5 (like in the case of HTML) is required to be installed on the device, which can be done by directly downloading it from the browser. All the HTML5 web contents are automatically supported by the web browsers; hence no separate installation is needed to work on or with HTML5.

11. Why to use HTML5?

There are numerous reasons that point towards the benefits of using HTML5. Be it for individual purposes or for business purposes, HTML5 is there to meet its users’ needs and requirements.

  • More interactive: In this world of growing virtualization, high interactivity is a must to have features. <canvas>, the HTML5 drawing tag is used to create dynamic websites. Besides, it comes with a great assortment of APIs, like Drag and Drop, offline storage database, browser history management, document editing and timed playback of media, to provide excellent user experience.
  • High accessibility: The Semantics and ARIA of HTML5 are the major reasons behind the creation of highly accessible sites. Headings like <header>, <section>, etc. are responsible for providing access to different sections of a web page.
  • Doctype: Coding in HTML5 does not involve any kind of hustle and bustle at all. Its doctype declaration is nevertheless pretty precise and simple. Apart from the simplicity part, HTML5 runs in almost all the web browsers.
  • Supports audio and video without external plugin: <video> and <audio> tags of HTML5 enable its users to access audio and video content without any third party plugin like Flash and Silverlight. These tags use attributes like height, width, autoplay and so on to specify the parameters of the audio/video.
  • Enhanced storage: The local and session storage of HTML5 provides a smarter way of using the storage capacity efficiently. Local storage makes the web applications possible without third party plugins.
  • Easy and clean coding: With a diversified set of attributes and tags, it becomes very easy to code in HTML5. It allows writing clean and descriptive codes with its semantic markup structure. Also, HTML5 boilerplate enables the designers to create webpages without facing any hassle.
  • Wide browser support: All modern and popular web browsers such as Chrome, Firefox, Opera, etc., all support HTML5. Now even IE features tend to make use of some HTML5 functionality.
  • Game development: HTML5 provides an efficient way to develop interactive games. <canvas> element plays an important role in game development using HTML5.
  • Mobile friendly: Since mobile technology is ruling the world in the current era, it is pretty much comprehensible for HTML5 to be mobile friendly if it wants to lead the world of web.

12. How to use or code in HTML5?

In order to code in HTML5, begin with <!DOCTYPE HTML> in the text editor. One can simply open the text editor and write the code for html5 like any other html code, just to be kept in mind that one has to start with <!DOCTYPE  HTML>.  Start with DOCTYPE, add <html> tag to specify the language, create head section and body section as per your requirements and then save the file with .htm extension. 

  • Start with DOCTYPE
  • Add <html> tag to specify the language
  •  Create the head section and body section as per your requirements and then save the file with .html extension. Consider the following sample code:
<html lang = "en">
  <!-- basic.html -->
  <meta charset = "UTF-8" />
  <h1> Sample</h1>
    This is a sample code.
   It teaches how to code in HTML5


13. Which DOCTYPE is correct for HTML5?

DOCTYPE( Document Type Definition) is a declaration that is done on the top of a webpage. It tells the web browser about the version of markup language being used for writing the webpage. There are three types of DOCTYPE- Strict, Framest and Transitional DOCTYPE. The DOCTYPE for HTML5 is quite efficiently concise as well as case – insensitive.

The correct DOCTYPE declaration for HTML5 is: <!DOCTYPE html>

<!DocTYpe html>, <!dOCtype html>, and <!doctype html>, are some other declarations of DOCTYPE that are supported by HTML5.

14. How to turn off HTML5?

In case one wants to turn off or disable HTML5 in one’s browse, one can easily do so by going through the following procedure:

For YouTube(Chrome)

  • Scroll down the HTML5 video Settings page on YouTube
  • Click on the ‘Use the default player’
  • Also, for Chrome, in HTTP Switchboard a selective column in the matrix can be turned off to turn off HTML5 functionalities

       For Firefox

  • Go to about:config
  • Set media.ogg.enabled to false

15. How to download HTML5 video?

There are several easy ways to download an HTML5 video, one of them are mentioned here:

  • Open video downloader by clicking on +New Download button
  • Copy and paste of URL html5 video and further analyse it
  • Now choose the resolution and format as per your desire
  • Click on Download All button and download the HTML5 video in a go

16. What is an HTML5 player?

The video technology of HTML5 empowers the marketers with the ability to show up an engaging video experience on any platform virtually, no matter whether it is an iPad or a Smartphone device or a web browser. HTML5 video players provide a simpler way for marketers and digital agencies to embed videos on websites or within different applications. There are certain HTML5 video players that make it pretty convenient to work with as well as build on various HTML5 videos.

17. Which functionality applies to HTML5 ads?

With new syntactical features and elements of HTML5, it becomes very easy to integrate various multimedia and graphical contents without requiring Flash and external plugins. Also, with its inbuilt features of adding audio and video, we don’t require third party plugins while working with HTML5. Hence-

  • HTML5 ads are easy to update and do not need extra plugins
  • HTML5 ads essentially work with more platforms and browsers
  • HTML5 ads are much more interactive and engaging, henceforth revolutionizing the world of digital marketing

18. How to disable HTML5 twitch?

HTML5 can be disabled on Twitch using following simple steps-

  • Go to the homepage of Twitch application
  • While trying to play a video,  go to the settings option on the right bottom corner of the video
  • Click on Advanced Settings icon
  • Now, click on Disable HTML5

19. How to link CSS to HTML5?

External style sheets (CSS) can be easily linked to HTML5 by using the <link> tag in the head section, which contains the link to the CSS code of the style sheet. Consider the following example-

<!DOCTYPE html>
<html lang = "en-US">
 <meta charset = "UTF-8">
 <link rel = "stylesheet"
   type = "text/css"
   href = "MyStyle.css" />
 <h1>External Style Sheet</h1>
  This sheet contains a style set for headings, body and paragraphs. This sheet is coded in CSS instead of HTML5.


20. What are the new form elements introduced in HTML5?

The five new form elements introduced in HTML5 are:

  • <datalist>: This element allows to display a list of suggestions to a text input element
  • <meter>: This element is used to point to a numeric value that lies within a range. Value, max, min, high, low, optimum are the attributes of this element.
  • <output>: This element displays the output text which can be modified via using Script like JavaScript.
  • <progress>: This form element indicates the amount of work completed, i.e. tells about the progress of a task.
  • <keygen>: This element passes encrypted data to the server by generating an encryption key. keytype and challenge come under its parameters.

Apart from the above mentioned new form elements; there are a whole lot of new form <input> elements as well-

  • Date: Used for choosing a certain date
  • Time: Used for picking a certain time
  • Datetime: Allows to pick a combination of date and time
  • Datetime-local: Allows to choose local date and time combination
  • Week: Allows to pick weeks
  • Month: Allows to pick a certain month
  • E-mail: Allows to enter multiple email addresses
  • Tel: Allows to enter various telephone/phone numbers around the whole world, validated by the client side 
  • Search: Enables to search multiple queries through input text
  • url: Used for inserting urls/web addresses
  • color: This type is a color-picker
  • range: Allows to enter any numeric value lying within a certain range
  • placeholder: This provides hint to the user about what can be entered

21. What happens if you view a new HTML5 form input type in an older browser?

 Most of the web browsers( both new and old) are capable of handling HTML elements as inline elements even when they are unrecognized as input elements if a new HTML5 form input is viewed in it. Still, one can have the browsers to identify and further handle the new form input types. While some of the browsers ignore these new form elements and some might treat them as errors, one needs to add CSS rules to the webpage, causing these elements to behave like block elements in order to fix the compatibility issue.

header, section, footer, aside, nav, main, article, figure

{ display: block;}

Apart from this method, one can also rebuild the widgets with JavaScript to make the elements familiar to the old browsers.

22. Which tags are no longer valid in HTML5?

Following tags are no longer valid in HTML5:

  • <acronym> which was used to define an acronym
  • <big> was used to define big text
  • <center> was used to center text
  • <applet> was used to define an applet
  • <frame> was used for defining frames
  • <basefont> was used to define the basefont for a page
  • <font> which was earlier used for defining the font, size and color of the text
  • <dir> was used for defining a directory list
  • <isindex> was used to define a single-line input field
  • <frameset> was used for defining a set of frames
  • <noframes> was used for non-framing a section
  • <tt> was used to teletype a text
  • <u> was used for underlining a text
  • <strike> and <s> were used to strikethrough a text

23. How to center text in HTML5?

Earlier, <center> tag was used in HTML to center text. But, since this tag is a deprecated HTML tag and no longer supported by HTML5, CSS text align property or style attribute in HTML5 is applied to the desired <div> or <p> element. Hence, text can be centered in HTML5 by applying text – align : center to the desired text. However, their total dimensions remain the same. CSS margin – right and margin – left properties can be used in HTML5 to center the blocks as per one’s requirements.

Examples: Centering text using CSS text-align property


    <title> Center text</title>
        <p style="text-align: center">Hello World!</p>       

Centering a block using CSS margin alignment property

T.blocktext {
    margin-left: auto;          // setting left and right margins to auto places the block of text in the center               
    margin-right: auto;
    width: 10cm
<P class="block_text">Pieces of text to be made block text


24. How to center an image in HTML5?

To center an image in HTML5, style attribute with its value text – align : center is used within a block level element like <p> … </p> tags.



    <title> Centering an image </title>
      <p style="text-align:center;"><img src="C:\Users\Lenovo\Desktop\great-learning-logo.png" alt="Logo"></p>


Also, CSS properties can be used to center an image in HTML5. Consider the following example using CSS alignment property:

    display: block;
    margin-left: auto;
    margin-right: auto;
<IMG class="DisplayLogo" src=" C:\Users\Lenovo\Desktop\great-learning-logo.png " alt="logo">

25. What is HTML5 Canvas?

Canvas in HTML5 is an element that gives a very powerful and convenient way to design graphics using JavaScript. <canvas> is used to draw charts, graphs, compose photos and even carry out basic animations.

<canvas id = “mycanvas” width = “100” height = “200”></canvas>

This <canvas> element has just additional width and height attributes along with the core attributes like id, name, etc.

<canvas> element can be easily found using getElementById in the DOM


      <title> Canvas usage </title>
         #mycanvas{border:5px solid green;}
      <canvas id = "mycancvas" width = "100" height = "200"></canvas>


Initially the <canvas> element of HTML5 is blank and its rendering context is needed to be accessed and drawn on it in order to display something. For that matter, the rendering context of sample canvas in the above example has to be created too.

26. What is the difference between HTML5 and CSS3?

Just like HTML5 is the fifth and the latest version of HTML, CSS is the third and the latest version of CSS. HTML5 includes a number of advanced elements to facilitate easy coding of web pages. Likewise, CSS3 encompasses the concept of modules that aid efficient designing in less time. HTML5 contains cascaded CSS3 to specify the style and structure of the site or app. HTML5 and CSS3 files are kept separated though.

27. Briefly explain the different formatting tags used in HTML5.

The set of formatting tags used in HTML5 comprises of-

  • <em>: This tag is used to produce emphasised text.
  • <small>: Used for implementation of small text, i.e., inserted text is displayed in small size using this tag.
  • <marks>: This tag is used for highlighting the text.
  • <ins>: By using this tag, one can insert a block of text in a document.
  • <del>: Used for specifying the deleted piece of text.
  • <sub>: Used for implementing subscripted text.
  • <sup>: Superscripted text can be inserted using this tag.

28. Which HTML5 tag would you use to define footer?

<footer> tag is used to define footer in HTML5. Footer usually contains information like authorship, copyright, back to top, contact, sitemap, etc.



<!DOCTYPE html>
          <title> footer example</title>
      <p> The part below this paragraph is the footer section of this page. Hope this example will help you to learn using footer tag well. 
Happy learning! </p>
          <div class="column"> 
                <p>Company Info</p> 
                <ul style="list-style-type:disc"> 
                    <li>About Us</li> 
                    <li>Terms &amp; Conditions</li> 
                    <li>Contact Us</li> 


29. Which tags are used to create a table in HTML5?

A table is created using the <table> tag. Furthermore, <tr>, <th> and <td> tags are used for specifying the table row, table headings and table data respectively. Let’s consider the following example:

<!DOCTYPE html>
    <table border = "2">
<!DOCTYPE html>
    <table border = "2">


30. Which tag represents an independent piece of content of a document in HTML5?

The tag which is used to represent an independent piece of content of a document in HTML5 is <article> tag. This tag represents a self – contained text which can be distributed independently from the rest of the site. This element can be used for a blog post, forum post or news story. 


<!DOCTYPE html>
          <title> article example</title>
      < article class = ‘OurCourses’>
        <h1>We provide following courses</h1>
         <article class = ‘Courses’>
              <h2> HTML5</h2>
               <p>HTML5 is a mark-up language</p>
         </article class = ‘Courses’>
               <p>Python is a programming language</p>


31. What are the common lists to design a webpage using HTML5?

The common lists to design a webpage using HTML5 are:

  • Ordered lists, used to make a list of related items in a specific order using <ol> tag
  • Unordered lists, used to make an unordered list of related items using <ul> tag
  • Menu lists create menu driven set of elements using <menu> tag
  • Definition lists are used to create list of objects along with their definitions using <dl> tag
  • Directory lists can be generated using  <dir> tag

32. What are the audio and video formats that are used for embedding on a webpage?

The audio formats that are used to embed on a webpage are MP3, WAV, Ogg Vorbis. WebM, MPEG4, Ogg video formats are used for embedding purposes on a web page. 

33. Which plugin is required to use svg tags in HTML5?

SVG(Scalable Vector Graphics) are used to draw 2d vectors and graphics in XML. <svg> tag in HTML5 enables the user to use SVG of XML to draw vector type diagrams since it contains the SVG graphics .

Raphael-Vector Graphics, Zoom plugin, Touch enabled SVG pan, jQuery inline, SVG path animation plugin, iSVG are some of the jQuery SVG plugins required in order to use the <svg> tags in HTML5.

34. How to convert Flash to HTML5?

By following the steps mentioned below, one can easily convert Flash to HTML5:

  1. In any of the Flash to HTML5 conversion tools like Animate, open your Flash file.
  2. Click on ‘Convert to Other Document Formats’
  3. Then choose HTML Canvas and click OK button
  4. Click Code Snippets in order to change Actions script
  5. Choose Convert to Bitmap, enabling conversion of vectors to bitmaps by right-clicking
  6. Check Export all bitmaps as Spritesheets and check Convert text to outlines, further click on OK button to Publish. 

35. How to convert PSD to HTML5?

For the conversion of PSD to HTML5, one has to go through the following procedure:

  • Dividing the PSD file into chunks: Since a PSD file is too heavy and static; it is not possible to export it directly to HTML5. Therefore, the image file created in Photoshop has to be divided into sections like header, body, navigation, or footer. It helps in coding that file in HTML5
  • Coding for the file chunks in HTML5(conversion): Now, the segments of PSD file need to be coded in the HTML5 mark-up language using any good text editor. As the first step of coding, code the main work and its background. In the next step, code the image navigation, content area and footer section. While coding, take special care of the navigation menu and the typography fonts.
  • SEO semantic Coding: The fundamentals of semantic coding in SEO have to be kept in mind while conversion. Incorporation of ALT tags along with descriptions of heading and meta tags as per requirement.
  • Test and Validation: A validation tool can be used to make this process of test and validation of coding less time consuming.

36. What is the HTML5 stack?

HTML5 stack is a set of linked software technologies that aid in carrying out a particular operation of a certain website or web application. The HTML5 stack includes HTML5, CSS3 and JavaScript. This stack has predefined common elements (including noscript and simple div) and attributes. Besides, there is a choice of using one’s own set too; this feature makes the stack very flexible and versatile.

37. Explain the Drag and Drop concept of HTML5.

Drag and Drop facility of HTML5 is one of its most essential features that are responsible for an enhanced user interface. This feature allows the user to drag an object from one place and drop it at the desired location with a simple mouse click. 

Move, copy and link are some of the common features that are used by most of the Drag and Drop operations. In order to make an image draggable, one is supposed to set the draggable image attribute to true, i.e., type = <img draggable = “true”>. In this way, the Drag and Drop feature can be used for an image.

38. What is the Geolocation API in HTML5 and how to use it?

Geolocation API is used for obtaining the user’s location for certain privacy and security reasons. The navigator.geolocation.get current position() method is used to get one’s location.


<!DOCTYPE html>
<title> location page</title>
<p>Click The My Location Button given below to get your location.</p>
<button onclick="getLocation()"> My Location </button>
<p id="location"></p>
var x = document.getElementById("location");
function getLocation() {
if (navigator.geolocation) {
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position) {
x.innerHTML = "At Latitude: " + position.coords.latitude +
"<br>At Longitude: " + position.coords.longitude;


39. How to clear HTML5 offline storage mega?

HTML5 offline storage space mega browser (like Chrome) error can be cleared by following the steps enlisted below:

  • Go to Settings in browser(Google Chrome)
  • Click on Content Settings as the next step, from there access Advanced Settings option
  • Further, click on Cookies, under which you have to choose All Cookies  & Data option
  • As the last step of the process, search for cookie in Chrome and then clear it using the Trash button

Now, you won’t find Out of HTML5 Storage Space message anymore while downloading a file using HTML5 downloader.

40. What is HTML5 boilerplate?

HTML5 boilerplate which is now known to be one the most popular front-end templates is used to build robust, adaptable and fast web sites and applications. It offers a set of HTML5 in-built features and elements to help the designers make efficient websites and applications in just no time. The very basic features and elements to be found in HTML5 boilerplate cover almost all the requirements needed to begin with any website designing. It supports HTML, CSS, JavaScript, Crossdomain.xml, Apache web server configuration(.htaccess) and other miscellaneous documentation like ignore file, gitignore, etc.

In other words, HTML5 boilerplate is a professional template cum handy tool to create websites. It is pretty good to go with, when it comes to designing apps and sites, especially for beginners. It gives splendid mobile friendly analytics, graphics, icons and what not! It supports the latest versions of Modernizr, as well as includes normalizers.css to produce satisfactory output.

41. How to make HTML5 games?

HTML5 has been gaining popularity in developing games too. The steps to make a game in HTML5 are as follows-

  • Creating canvas to draw the game graphics and designs
  • Creating game loop to implement the game functionality and simulate the appearance of continuous gameplay
  • Drawing game text that will move around on screen
  • Creating the player object
  • Defining keyboard controls for player movement
  • Adding more game objects other than players like enemies, obstacles, etc.
  • Defining winning and losing conditions
  • Adding sound and display messages

42. How to create a dashboard in HTML5?

One can either use a dashboard template or go along with the conventional way of coding for creating a dashboard in HTML5. First get the concept for your dashboard then think about what all things you need to include. After that, get started with a clean design of dashboard. Now, move on to the development of your dashboard in which you are supposed to choose the functional and the most visually compelling components of HTML5. It allows you to produce a dynamic and descriptive representation of data. In the last part, think about the deployment but thanks to HTML5 compatibility, it has got you covered there. 

You can check out the HTML5 course of The Great Learning Academy to learn coding for the creation of a dashboard and get a better grasp on web development.

So, these were the html5 interview questions that can help you have a fine chance of qualifying your interview, but ultimately, the final results will be governed by your depth of preparation and clarity of concept. Hope these html5 interview questions will help you fetch good news for yourself! Best of luck!

If you wish to learn more such concepts, you can join Great Learning Academy’s free online courses and upskill today!



Please enter your comment!
Please enter your name here

3 × 1 =