HTML5 Interview Questions and Answers

Last Updated: March 23, 2020

Author: Full Stack Tutoorials

HTML5 Interview Questions: HTML5 Interview Questions and Answers for freshers and experienced. HTML5 is a markup language used for structuring and presenting content on the World Wide Web.

HTML5 | HTML5 Interview Questions | Basic

Q:- What is HTML5?

HTML5 is a markup language used for structuring and presenting content of a web page.

HTML5 is the latest version of HTML - Hypertext Markup Language, the code that describes web page.
It is developed by - World Wide Web Consortium.
It was initially released on 28 October 2014.
It is not case sensitive

Q:- What is file extension of HTML5?

.html

Q:- What is Doctype?

DOCTYPE is short form of Document Type Declaration.

it tells the web browser about the version of markup language in which a web page is written.

Q:- What is the correct syntax for Doctype in HTML5?

Latest syntax for HTML5 document type is <!DOCTYPE html>.
It is not a HTML tag.
It is an instruction to the web browser about what version of HTML the page is written in.

Q:- What are the new features in HTML5?

Following are some new features in HTML5

Web Storage - Local storage, Session Storage.
New Input Types date, time, email, URL and search etc.
Graphics canvas element is provided for 2D drawing.
New Media Elements video and audio etc.
New Semantic Elements article, header, footer, nav, section, figure etc.
Geolocation support.
Web Worker support.

You may also like - HTML and CSS Interview Questions

Q:- What are the difference between HTML (HTML4) and HTML5?

HTML5 is more powerfull and easier than HTML4, HTML5 has lots of new TAG like header, footer, nav, audio, video, main etc.

Key	HTML (HTML4)	HTML5
DOCTYPE	DOCTYPE declaration in Html is too longer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	DOCTYPE declaration in HTML5 is very simple "<!DOCTYPE html>
Character Encoding	Character Encoding in HTML is also longer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">	Character Encoding (charset) declaration is also very simple <meta charset="UTF-8">
Audio & Video	Audio and Video are not part of HTML4	Audio and Videos are integral part of HTML5 e.g. <audio> and <video> tags.
Vector Graphics	Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc	Vector graphics is an integral part of HTML5 e.g. SVG and canvas
GeoLocation	It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.	JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)
Storage	It use cookies. cookies can store only upto 4KB data in string format.	It also use cookies and it also provides local & session storage. Local Storage can store upto 5MB data in key-value format (can vary on different browsers)
Shape	Not possible to draw shapes like circle, rectangle, triangle.	Using HTML5 you can draw shapes like circle, rectangle, triangle.
JavaScript Support	Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.	Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5
Browser Support	Works with all old browsers	Supported by all new browsers

You may also like - Bootstrap Interview Questions

HTML5 | html5 Interview Questions | HTML Tags

Q:- What are the various tags provided for better structuring in HTML5?

<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.
<mark> - It defines highlighted text.
<meter> - It defines a scalar measurement within a known range.
<nav> - It defines links for navigation.
<progress> - This tag exhibits the progress of a task.
<ruby> - It defines a ruby annotation for East Asian typography.
<section> - It defines a section in a document.
<summary> - It provides a visible heading for a <details> element.
<time> - This tag defines a date/time.
<wbr> - This tag defines a line-break.

You may also like - Basic JavaScript Interview Questions

HTML5 | HTML5 Interview Questions | HTML Storage

Q:- What are the different types of storage in HTML5?

You can store data locally using HTML5 Storage. Exciting thing about this storage is that its fast as well as secure.

Type of web storage

localStorage It stores data for a longer period of time even if the browser is closed.
sessionStorage It stores data for a specific session.

sessionStorage	localStorage
It persists data until we close the window or tab in which it was stored.	It persist data even if the window or tab is closed (but can be explicitly removed or expires).
Values stored in sessionStorage are not shared. These will be visible only to respective window or tab.	Values stored in localStorage are shared for all windows and tabs from same origin.
Maximum size is 5MB (can vary on different browsers).	Minimum size is 5MB (can vary on different browsers).

Working with localStorage is quite simple and having following methods:

localStorage.getItem(key): fetch an item from storage against provided key.
localStorage.setItem(key, value): add an item to storage.
localStorage.removeItem(key): removes an item from storage against provided key.
localStorage.clear(): clearing the storage removing all items from it.

Q:- What are the deprecated Elements in HTML5?

frame
frameset
noframe
applet
big
acronym
basefont
center

You may also like - PHP Developer Interview Questions

Q:- What is canvas in HTML5?

HTML5 introduce new tag <canvas> which is used to draw graphics on the web page. It draw graphics on web by using JavaScript.
canvas is only a container for graphics you must need to write a script to draw graphics on web page.

Q:- What is SVG?

SVG stands for Scalable Vector Graphics.

SVG is used to define vector-based graphics for the Web
SVG defines the graphics in XML format
SVG graphics do NOT loose any quality if they are zoomed or resized
Every element and every attribute in SVG files can be animated
SVG is an W3C standard

SVG Circle:

Q:- What is the difference between SVG and Canvas?

HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web, but they are fundamentally different

SVG	Canvas
Vector based (composed of Shapes)	Raster based (composed of Pixel)
Multiple graphical elements, which become the part of the DOM	Single HTML element similar to `<img>` in behavior
Modified through script and CSS	Modified through script only
Give better performance with smaller number of objects or larger surface, or both	Give better performance with smaller surface or larger number of objects, or both
Better scalability — can be printed with high quality at any resolution	Poor scalability — not suitable for printing on higher resolution

HTML5 | HTML5 Interview Questions | Advanced

Q:- What are web workers and why do we need them ?

A web worker is a JavaScript running in the background, without affecting the performance of the page.

Q:- What are the restrictions of Web Worker thread?

One limitation is that Web Workers cannot access the DOM, so they can't read or modify the HTML document

Since web workers are in external files, they do not have access to the following JavaScript objects:

The window object
The document object
The parent object

Q:- How to terminate a web worker?

The terminate() method of the Worker interface immediately terminates the Worker
var myWorker = new Worker('worker.js');
myWorker.terminate();

Q:- What is HTML5 Server-Sent Events?

Server-Sent Events allow a web page to get updates from a server.

You may also like - React.js Interview Questions

Q:- What is the concept of Application Cache in HTML5? What are its advantages?

HTML5 introduced a new concept Application Cache - means that a web application is cached, and accessible without an internet connection.

There are three advantages of Application Cache:

Offline browsing - Users can use the application when they're offline
Speed/Improve performance - Cached resources load faster
Reduce HTTP request and server load - The browser will only download updated/changed resources from the server

The HTML5's application cache feature is supported in all major modern browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 10+.

Q:- What is a Manifest file?

A Manifest file is a simple text file that tells the browser what to cache and what not to cache.

To enable the application cache for an application, you must include the manifest attribute in the <html> element in your application's pages

There are three sections of a Manifest file:

CACHE MANIFEST - Files listed here are cached after they are downloaded for the first time.
NETWORK - Files listed here require a connection to the server, and are never cached.
FALLBACK - Files listed here specify fallback pages if a page is inaccessible.