Discover the Most Asked HTML Interview Questions

Are you a front-end web developer? And looking to find out some quick ways to crack your job interview. Then, do spend just 10 minutes reading the 30+ HTML interview questions which we’ve picked for you. Front-end web development even as defined by Wikipedia is the practice of producing HTML, CSS, and JavaScript to build a website or web application. Therefore, it’s obvious that HTML is the first and foremost element of web development that you should be getting ready to prepare.

Must-know HTML interview questions

Q-1. What are the new features introduced in HTML5?

Answer.
HTML5 introduces a number of new elements and attributes that help in building an attractive webSite, that we see nowadays.

It supports the following new features.

• New Semantic Elements – These are like <header>, <footer>, and <section>.
• Forms 2.0 – It contains improvements to HTML web forms. It has introduced new attributes for the <input> tag.
• Persistent Local Storage – With HTML5, it is possible to achieve this, without resorting to third-party plugins.
• WebSocket – It facilitates setting up bidirectional communication for web applications.
• Server-Sent Events(SSE) – These events got introduced in HTML5. The direction of the flow of the execution of these events is from the server to the Web Browser.
• Canvas – It supports a two-dimensional drawing surface that is programmable using JavaScript.
• Audio & Video – It allows embedding audio or video on web pages without resorting to third-party plugins.
• Geolocation – It facilitates the visitors to share their physical location with the web application.
• Microdata – It allows building our personal vocabulary beyond HTML5 and extends our web pages with those custom semantics.
• Drag and drop – It supports dragging and dropping items from one location to another location on the same Web page.

Q-2. What would happen if the HTML Document does not contain <!DOCTYPE>?

Answer.
It instructs the Web Browser about the version of HTML used for creating the Web page.
If the developer misses declaring the DOCTYPE information in the code, then new features and tags provided by HTML5, like <article>, <footer>, and <header> will not be supported. Additionally, the Browser may automatically go into Quirks or Strict Mode.

Q-3. What is a tag in HTML?

Answer.
A tag instructs the Browser about how to format the HTML correctly. When you write an HTML page, you enter tags for many reasons to change the appearance of text, showing a graphic, or make a link to another page. HTML uses symbols like “<” and “>” to enclose the tags. And symbol “\” for closing.

Q-4. What is the difference between HTML elements and tags?

Answer.
HTML elements communicate to the Browser how to represent the text. They become HTML tags when enclosed within angular brackets <>.

Q-5. What are the various elements provided by HTML5 for media content?

Answer.
HTML provides the support of the following elements for representing the media content.

• <audio> – It defines the sound content.
• <video> – It represents the video content that needs to be attached to a Web page.
• <source> – This tag defines the source of video and audio.
• <embed > – It provides a container for an external application.
• <track> – It defines text tracks for video and audio.

Q-6. What are the new Form elements made available in HTML5?

Answer.
When we want to collect some data from the person visiting our site, we use HTML Forms. An example is, the user has to enter his name, and email id when he registers for the first time.

A form takes input from the site visitor and then posts it to a back-end application such as CGI, ASP Script, or PHP script. The back-end application will then perform the required processing on the passed data based on defined business logic inside the application.

There are various form elements available in earlier versions of HTML like, text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

HTML5 provides the support of some new Form elements that are as follows.

• <datalist> – It represents a list of pre-defined options for input controls.
• <keygen> – It defines a key-pair generator field (for forms).
• <output> – It represents the result of the calculation.

Q-7. Explain the difference between semantic and non-semantic elements.

Answer.
Semantic elements are one of the new features that are part of HTML5. They intend to help the developers quickly create the page structure.

A semantic element has its meaning expressed to both the browser and the developer. Also, all modern browsers support this feature. However, it is possible for a developer to train old browsers to handle unknown elements.

Here is a list of some of the commonly used HTML5 Semantic Elements.

• <article>
• <figcaption>
• <figure>
• <header>
• <footer>
• <nav>
• <section>
• <article>
• <aside>
• <summary>

The difference – Semantic Vs. Non-semantic.

Semantic – These elements clearly describe their content like <img>, <form>, <table>, etc.

Non-semantic – These elements are without any definition. They don’t describe anything about their structure such as <span> and <div>.

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

Answer.
The various tags provided for better structuring in HTML 5 are:

• <article> – This tag defines an article.
• <aside> – It defines content other than the page content.
• <bdi> – This tag isolates a part of the text for formatting in a different direction, from another text present there.
• <command> – It defines a command button to be invoked by the user.
• <details> – It outlines the additional details that a user can hide or view as per choice.
• <dialog> – It defines a dialog box.
• <figure> – This tag specifies content like illustrations, diagrams, photos, code listings, etc.
• <figcaption> – It provides a caption for a <figure> element.
• <footer> – This tag defines a footer for a document or a section.
• <header> – This tag describes a header for a document or a section.
• <hgroup> – When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.

Q-9. How can we get the geographical position of a user in HTML5?

Answer.
Yes, HTML5 can retrieve the location of a user with the use of Geolocation API. It provides the getCurrentPosition() method to get the user’s current position.

Q-10. Describe Form Input Types in HTML5.

Answer.
HTML5 is the new standard for HTML that provides 13 new input types for forms. Using these new input types, we can create more interactive and easy-to-use web forms. It also provides better data validation, input control, color picker controls, and many others.

The new input types for forms provided by HTML5 are as follows.

• color – It’s applicable for HTML elements that represent color.
• date – It allows the user to select a date.
• DateTime – It enables the user to select a date and time (with time zone).
• DateTime-local – It allows the user to select a date and time (without a time zone).
• email – It is applicable for input fields that contain an e-mail address.
• month – It permits the user to select a month and year.
• number – It is applicable for input fields that accept a numeric value. It allows setting restrictions on the data type of the number, this field takes.
• range – It is applicable for input fields that accept a value from a range of numbers. It allows setting restrictions on the data type of the number, this field takes.
• Search – It gets used for search fields.
• tel – It defines a place for entering a telephone number.
• time – It allows the user to select a time.
• URL – It is applicable for the input fields that contain a URL address.
• week – It allows the user to select a week and a year.

Need some more HTML interview practice? Here are some HTML interview questions to help you prepare.

Q-11. How can we retrieve the geographical position of a user using HTML5?

Answer.
HTML5 provides the support of Geolocation API to retrieve the location of a user.
We can find out the current position of the user using the getCurrentPosition() method of this API.

Q-12. What is HTML5 Graphics?

Answer.
In HTML5, there are two types of graphics.

Scalable Vector Graphics (SVG).

• The HTML5 <svg> element is a container for SVG graphics. It provides several methods for drawing boxes, paths, text, circles, and graphic images.
• SVG is beneficial as nowadays, people are using high-resolution devices (iPads and Monitors), so it becomes impressive as designs, logos, and charts scale according to the requirement, maintaining the picture quality.
• SVG is XML based, which means that every element is available within the SVG DOM. It treats every shape as an object. If the user changes the attributes of any SVG object, the browser will automatically re-render the shape.

Canvas.

• It is a rectangular area on the HTML page for drawing graphics on the fly, using JavaScript.
• The default size of the canvas is 300 PX × 150 PX (width × height).
• The HTML tag <canvas> is a container for the Canvas graphics. Canvas gets executed on the pixel by pixel basis.
• In Canvas, the browser forgets the graphic, after drawing it. If the user tries to modify it, the entire scene needs to be redrawn, including all the objects present in the graphic.

Q-13. Explain the key differences between SVG and Canvas.

Answer.

• Canvas is resolution dependent while SVG is not.
• Canvas does not provide any support for event handlers while SVG does provide support for event handlers.
• Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
• Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google Maps.
• Canvas provides a less interactive animated user interface. Whereas, the interface provided by SVG is very highly interactive.

Q-14. How can we create a new HTML element?

Answer.
We can even create new elements for the document as follows.

<script>
document.createElement﴾"myElement"﴿
</script>

It can be used in HTML as.

<myElement>hello</myElement>

Q-15. What is the use of Drag and Drop in HTML5?

Answer.
Drag and Drop (DnD) is a powerful User Interface concept, which enables the user to copy, reorder and delete any number of items, just with the help of a mouse click. To do this, the user has to click and hold the mouse button over an element, drag it to the required location, and finally release the button to drop the element there.

With HTML4, developers have to either do complex Javascript programming or use other Javascript frameworks like jQuery to achieve this functionality.

HTML 5 introduced a Drag and Drop (DnD) API that provides support for all the fundamental DnD operations to the browser. Thus making it easy for the developers to code it.

The latest versions of all the main browsers, like Chrome, Firefox, and Safari, support this DnD API of HTML5.

Q-16. What are different Drag and Drop Events?

The following trigger during various stages of the drag-and-drop operations.

• dragstart – it gets triggered when the user starts dragging a draggable object.
• dragenter – it gets triggered when the user has dragged the draggable element over the target element.
• drag – it gets fired when the object is getting dragged.
• dragend – it gets fired when the user releases the mouse button after dragging an object.
• dragleave – This event gets triggered when the mouse leaves an element while a drag is occurring.
• dragover – This event gets fired when the mouse moves over an element while a drag is occurring.

Q-17. What is HTML5 Web Storage?

Answer.
HTML5 Web Storage, also known as DOM Storage is a way to preserve the state on either the client or server which makes it much easier to work against the stateless nature of HTTP. It allows the web pages to store the data locally in the user’s browser.

Following are the advantages of HTML5 Web Storage.

• It can store 5 to 10 MB of data. That is far more than what cookies allow.
• HTML5 never transfers Web storage data with any HTTP request. Thus creating less overhead than cookies and in turn, increasing the performance of the application.
• Apps can work both online and offline.
• This API is easy to learn and use.

Q-18. What are the different types of Web Storage provided by HTML5?

Answer.
There are two types of Web Storage.

1. Session Storage

This storage holds data from the current session. And the data persists only while the browser is open.

We can only store String in Session Storage. To save the objects in Session, first, convert the object into JSON string and then store this string in Session Storage.

2. Local Storage

Local Storage is the second type of HTML Web Storage. It stores data as KEY/VALUE pair.

Q-19. What is the need of introducing Local Storage in HTML5?

Answer.
Before HTML5, LocalStores was done with Cookies. They are not very good for large amounts of data, because, with every request, it passes this data to the server, making it very slow and ineffective. However, HTML5 does not pass this data on every server request. It uses the data ONLY when required. In HTML5, it is possible to store large amounts of data without affecting the website’s performance. Data for different websites get stored in separate areas. However, a particular website can only access its own data.

Q-20. Explain the differences between localStorage and sessionStorage objects.

Answer.
Following are the key differences between localStorage and sessionStorage objects.

• The localStorage object stores the data without an expiry date. However, the sessionStorage object stores the data for only one session.
• In the case of a localStorage object, data will not delete when the browser window closes. However, the data gets deleted, if the browser window closes, in the case of sessionStorage objects.
• The data in sessionStorage is accessible only in the current window of the browser. But the data in the localStorage can be shared between multiple windows of the browser.

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

Answer.
HTML5 introduced the concept of Application Cache. It means that a web application is cached, and is accessible without an internet connection.

Following are the key advantages of Application Cache.

• Offline browsing – Users can use the application even when they are offline.
• Speed  – Cached resources load faster as compared to content that gets
  downloaded, directly from the server.
• Reduced server load – The browser will only download updated/modified resources from
  the server.

Check out more advanced HTML interview questions.

Q-22. What is a Manifest file?

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

A Manifest file contains three Sections as

• CACHE MANIFEST – HTML5 performs the caching of files listed under this section after
  they get downloaded for the first time.
• NETWORK – Files listed here, always need a connection to the server. The browser can never cache them.
• FALLBACK – Files listed here specify the fallback pages if any page in it is not accessible.

Q-23. Explain HTML5 Application vs. regular HTML browser cache.

Answer.
The following are the key differences between the two.

• In AppCache, we can define all the assets the browser should cache in a manifest file (even the entire site). For fetching this content, it is not necessary for the user to have accessed it previously. In other words, Application Cache can prefetch pages that have not been visited and are unavailable in the regular browser cache. However, the browser cache will only store the pages (and associated assets) the user has previously visited.
• The AppCache allows web apps (and websites) to be made available offline, that too, with the same speed benefits as the regular browser cache could provide only when the user is online.

Q-24. What is a Web Worker?

Answer.
JavaScript will hang the browser if it has to handle UI events, query large amounts of API data for processing, and manipulate the DOM simultaneously.
Web Workers handle this situation by doing all the high computation tasks without interrupting the user interface. They do this by running on separate threads. Thus we can say that.

• A web worker is a script, which runs in the background. It exists in external files.
• The user can perform actions like clicking, selecting things, and so on. Meanwhile, the Web worker runs in the background.
• It is appropriate, to use Web Worker for CPU-intensive tasks.

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-25. How does a Web worker work?

A Web worker gets initialized with the URL of a JavaScript file that contains its code. This code sets event listeners and starts communication with the script that invoked the worker from the main page. The Syntax is as follows.

var worker = new Worker("sample_prog.js"﴿;

If the javascript file specified in the above code exists, the browser spawns a new worker thread.

Once the Web worker gets spawned, it starts communicating with the parent page, using the postMessage() method. The Web worker, in turn, returns a message, that gets accessed using the onmessage() event on the main page.

For example, the script spawns a Web worker to execute a loop with thousands of iterations. After that, the Web worker returns the calculated value to the HTML page.

<script>
var worker = new Worker('calculateLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
}; 
</script>

Below is the code of the “calculateLoop.js” file. It makes use of postMessage() API, to pass the communication back to the HTML page.

for (var i = 0; i <= 1000000000; i += 1){
var j = i;
}
postMessage(j);

Q-26. What are the new attributes provided in HTML5 for <form>?

Answer.
The new attributes provided in HTML5 for <form> are.

• autocomplete
  • It specifies if a form or an input field should have an “autocomplete” feature set as on or off.
  • If autocomplete is set to on, it enables the browser to fill the values, based on the values that the user starts to enter.
  • autocomplete works for input types like text, search, URL, tel, email, password, date pickers, range, and color.
• novalidate
  • It is a boolean attribute.
  • Its presence signifies that the form data should not get validated at the time of submission.

Q-27. What is the output element in HTML5?

Answer.
Output element gets used when you design a form, that displays the result of a computation. Along with the standard global attributes, <output> also accepts for, form, and name attributes.
Let’s see a simple example of the <output> element that adds two numbers and displays the resulting value.

<!DOCTYPE html>
<html>
<head>
<title>HTML Output Tag</title>
</head>
<body>
<form oninput="sumresult.value=parseInt(val1.value)+parseInt(val2.value)+parseInt(val3.value)">
<input type="range" name="va1" value="10" /> +
<input type="number" name="val2" value="20" /> +
<input type="number" name="val3" value="40" /><br />
The output is: <output name="sumresult"></output>
</body>
</html>

The form attribute associates the <output> with a form. It displays the output as “70” on the web page.

Looking for more HTML interview questions?

Q-28. What are the new attributes provided in HTML5 for <input> element?

Answer.
The following are the new attributes provided in HTML5 for <input>.

1. autofocus makes the element automatically receive focus when the page loads.

2. formaction specifies where to send the form data when a form is submitted.

3. form attribute specifies all the forms, to which a particular element belongs.

4. formenctype specifies how the form data will be encoded before sending it to the server.

5. formmethod specifies the HTTP method used to send form data to the server.

6. formnovalidate specifies that the form data should not be validated when the form is submitted.

7. formtarget specifies where the response after form submission is displayed.

8. height and width specifies the height and width of an element.

9. list attribute is a sequence of pre-defined options for an <input> element.

10. min and max specifies the minimum and maximum value for an <input> element.

11. multiple specifies that the user is allowed to enter more than one value in the <input> element.

12. pattern specifies a regular expression with which the value of the <input> element gets compared.

13. placeholder displays a short hint that indicates the expected value of an input field.

14. required indicates that it is mandatory to fill the particular field, before submitting the form.

15. step specifies the legal number intervals for an <input> element.

Q-29. What is the major difference between, Transitional and Strict doctype?

Answer.

• Strict – This DTD contains all HTML components and properties. However, it does NOT INCLUDE presentational or expostulated components (like text style). It does not permit the use of Framesets.
• Transitional – This DTD contains all HTML components and properties, INCLUDING presentational and belittled components (like textual style). It does not allow the use of Framesets.

Q-30. What is Audio Tag in HTML 5?

Answer.
This new element allows you to embed audio files in an HTML or XHTML document, without the need for any plug-ins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sounds like .mp3, wav, and .ogg.
Using the <source> tag, we can specify media along with media type and many other attributes. An audio element allows multiple source elements and the browser will use the first recognized format.

<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls" >
<source src="URL1" type="audio/mp3" />
<source src="URL2" type="audio/wma" />
<source src="URL3" type="audio/x-wav" />
Your browser does not support the audio element.
</audio>

</body>
</html>

Q-31. What are HTML5 audio tag attributes?

The HTML5 audio tag supports the following attributes to direct the look and feel and various functionalities of the control.

• Autoplay
  • It is a boolean attribute. If, the value is set the audio track starts playing automatically. The System will not wait for data loading to complete.
• autobuffer
  • It is a boolean attribute. If set, the audio will automatically begin buffering, even if the automatic play is not enabled.
• controls
  • If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
• loop
  • Setting this boolean attribute would automatically restart the audio from the beginning, once it reaches the end.
• preload
  • This attribute specifies that the audio will be loaded at page load, and will be ready to run. If autoplay is present, this attribute will not work.
• src
  • It represents the URL of the audio to embed. Its presence is optional.

Q-32. What is the use of the <fieldset> tag in HTML5?

Answer.
The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box around related elements.

It must start with a <legend>tag because the <legend> tag defines the title of the FIELDSET.

Following is the Syntax of the FIELDSET tag in HTML5.

<fieldset>Controls</fieldset>

All the popularly known browsers provide support for the FIELDSET tag.

HTML5 supports the following attributes with the FIELDSET tag.

• disabled
  • Its value is disabled. It specifies, whether the field set will be displayed or not.
• name
  • Its value is in the form of text. It defines the name of the FIELDSET.
• form
  • Its value is the name of the form. It specifies the form related to the FIELDSET.

Let’s see an example, where we create a field set in a form. Here we use the <legend> tag to define the heading for the FIELDSET.

<html> 
<body> 
<form> 
<fieldset> 
<legend>Personal Information</legend> 
First Name: <input type="text" /> 
<br/><br/> Last Name: <input type="text" /> 
<br/><br/> person_Address: <input type="text" /> 
<br/><br/> person_Qualification: <input type="text" /> 
</fieldset> 
</form> 
</body> 
</html>

Q-33. What are the HTML tags which get deprecated in HTML5?

Answer.
Following are the tags that are deprecated in HTML5.

• <basefont>
• <big>
• <center>
• <font>
• <s>
• <strike>
• <tt>
• <u>
• <frame>
• <frameset>
• <noframe>
• <acronym>
• <applet>
• <isindex>
• <dir>

Some attributes from HTML4 are no longer allowed in HTML5 since their functionality is better handled by CSS. Below are some of the known attributes that got removed and the corresponding impacted element.

• Attribute Removed Element
• rev, charset a, link
• longdesc, name img
• version HTML
• abbr th
• scope td
• align all block-level elements
• background body
• hspace, vspace img
• bgcolor table, tr, td, th
• border, cell padding, cell spacing table
• height, width td, th
• valign table

Q-34. What is a meter tag? What is the difference between a progress tag and a meter tag?

Answer.
The <meter> tag defines a scalar measurement within a known range or a fractional value. We can also call it a gauge. Some of the items that can be represented using <meter> tag are Disk usage, the relevance of a query result, and so on.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

The following example demonstrates the use of the <meter> tag.

<li><meter min="0" max="100" value="25">25%</meter></li>

The <meter> tag provides support for the following attributes.

min It is a number. It specifies the minimum value of the range.

max It is a number. It specifies the maximum value of the range.

low It is a number. It defines a range that represents <low> value.

high It is a number. It defines a range that represents a “high” value.

value It is a number. It is a mandatory element. It defines the current value of the gauge.

optimum It is a mandatory element with a numeric value. It specifies the optimum, or the best value, for the element. If this value is higher than the “high” value, it indicates that the higher the value, the better it is. If it’s lesser than the <low> mark, it means that the lower values are better. For all other cases, it indicates that neither high nor low values are good.

form It specifies one or more forms that define the <meter> element. It has value form_id.

Q-35. Why do we need HTML5 Server-Sent Events?

Answer.
HTML5 Server-Sent Events (SSE) is a new way for web pages to communicate with the web server. It enables a webpage to get updates from a server automatically. It was possible earlier also, but for this, the web page needs to ask if any updates were available. The client makes a request and waits for the server to respond with data. Once the web server provides its response, the communication is over.

However, there are some situations, where web pages require a long-term connection with the web server. A typical example is stock quotes on finance websites where price update happens automatically. Other examples are news feeds, sports results that run continuously on media websites, Facebook/Twitter updates, and so on.

We can achieve the above, using HTML5 using SSE. It enables a web page to hold an open connection to the web server so that it can send a response automatically at any time. Thus there’s no need to reconnect and run the same server script from scratch over and over again.

Q-36. Explain Receive Server-Sent Event Notifications.

The EventSource interface contains the Server-Sent event API. We need to create an EventSource object to receive the Server-Sent event notifications. Following is the code for the same.

var source = new EventSource("sse_demo.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};

Above code performs the following steps.

• First, create a new EventSource object, and specify the URL of the page sending the updates (in this example “sse_demo.php”).
• Every time an update arrives, an onmessage() event gets triggered.
• When an onmessage event occurs, it places the received data into the element that has <id = result>.

Q-37. Explain Server-Side Code Example.

For the above example to work, we need a server capable of sending data updates. The server-side event stream syntax is simple. Set the “Content-Type” header to “text/event-stream”. Now you can start sending event streams. Following is the code (demo_sse.php).

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Following is the explanation of the above code.

• Set the “Content-Type” header to “text/event-stream”.
• Specify that the page should not cache.
• Output the data to send (Always start with “data: “).
• Flush the output data back to the web page.

Wrapping Up – HTML Interview Questions

We wish you could make the most out of the above HTML interview questions. However, you can search our Web Development section for more questions on CSS, JavaScript, AngularJS, and NodeJS.

Here are some additional thoughts to consider.

• HTML CSS Quiz
• JavaScript Interview Questions
• Web Developer Interview Questions
• Selenium Interview Questions
• Use Locators for Selenium Testing

And if you liked this post, then please care to share it. To stay in touch, please follow us on social media.

Best,

TechBeamers